tags:

views:

65

answers:

2

Ran into a bit of an issue with some jQuery code, but in essence, I have a table that may or may not have BR elements in the first column. When there are no BR elements the following code works fine and a value is returned. However, when there are BR elements, the code values to return any values for most of the columns. Any ideas what might be going on?

The following jQuery works correctly for the first row ('Row-19') and will show the value for each element; however, for the second row ('Row-21') only shows the values for the first and next-to-last column. In the production environment we are using this code to update or get the value in a given TD element on demand, so iterating through the columns isn't the preferred option.

jQuery

alert($('#Row-' + id + ' :nth-child(' + ndx + ')').html());

XHTML Code

<tr id="Row-19">
    <td>Value</td>
    <td>Value</td>
    <td>Value</td>
    <td>Value</td>
    <td>1</td>
    <td>2</td>
    <td>
        <a href="#" title="Edit" onclick="edit('19');">[Edit]</a>&nbsp;
        <a href="#" title="Delete" onclick="delete('19');">[Delete]</a>
    </td>
</tr>
<tr id="Row-21">
    <td>
        Value<br />
        Value<br />
        Value<br />
        Value<br />
        Value<br />
    </td>
    <td>Value</td>
    <td>Value</td>
    <td>Value</td>
    <td>3</td>
    <td>4</td>
    <td>
        <a href="#" title="Edit" onclick="edit('21');">[Edit]</a>&nbsp;
        <a href="#" title="Delete" onclick="delete('21');">[Delete]</a>
    </td>
</tr>
+2  A: 

Works fine for me: http://jsbin.com/awame3

$("a[title='Edit']").click(function(e){ 
  e.preventDefault();  
  $(this).parent().prevAll("td").each(function(){ 
    alert($(this).html()); 
  }); 
}); 

Updating a Specific Cell

$("a[title='Edit']").click(function(e){
  e.preventDefault();
  var cell = $(this).closest("tr").find("td:eq(0)").html("new values");
  alert($(cell).html());
});

You could apply a class to whichever cell needs to be manipulated, and abandon addressing the indexes altogether:

$(this).parent().siblings("td.editMe").html("new values");

Getting Cells 2 - 5

Using a filter, you could get cells 2 through 5:

$(this).closest("tr").children("td:gt(0)").filter(":lt(5)");
Jonathan Sampson
I have some of the same code that works as well, the bigger issue is that I need to be able to select from a given TD element on demand to update the values. Let me know if I should update the question to make that a bit clearer.
Rob
Which TD element, Rob? Have you considered using `:eq(index)`?
Jonathan Sampson
@Jonathan Sampson - TD elements 2 through 5 of second row. I'm checking into the `:eq` code now.
Rob
Looks like using `:eq` does the trick, any idea why the original code would not have worked correctly?
Rob
I'm not sure how `:eq(index)` solved your problem :) I know I suggested you consider it earlier, but after learning that you wanted a range of fields, I provided what I think to be a better solution.
Jonathan Sampson
Well, I think I might have written things incorrectly, we are just getting a single element at a time. However, that said, being able to get a range is always something useful.
Rob
Ah. If you need only one element, `:eq(index)` is excellent.
Jonathan Sampson
+1  A: 

Works for me as well http://jsbin.com/ukica

BBonifield