Question

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>

Answer 1

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)");