Is there a better way to get values out of a table row?

Say I have this

<table border="1" id="tbl">
<tr>
<td><input type="checkbox" name="vehicle" value="Bike" /></td>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td><input type="checkbox" name="vehicle" value="Bike" /></td>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
</table> 

Now I want to get the row that is checked, then the cell values of that checked row. So I would do this

 var cells = $('#tbl :checked').parents('tr').children('td');

So lets assume only one checkbox can be checked(so no jQuery foreach loop).

So now say I wanted to get the 2nd table cells value I would just go

var secondCell = $(cells[1]).html();

The thing with this though it makes the code so brittle. Like what if I put another table cell after after the checkbox one?

<table border="1" id="tbl">
<tr>
<td><input type="checkbox" name="vehicle" value="Bike" /></td>
   <td> I am new </td>
  <td>row 1, cell 1</td>
  <td>row 1, cell 2</td>
</tr>
<tr>
<td><input type="checkbox" name="vehicle" value="Bike" /></td>
   <td> I am new </td>
  <td>row 2, cell 1</td>
  <td>row 2, cell 2</td>
<开发者_StackOverflow社区/tr>
</table> 

So now I have to go through my code and change this

var secondCell = $(cells[1]).html();

to this

var thirdCell = $(cells[2]).html();

Since now I am actually after the 3rd cell and not the 2nd cell anymore.

So is there a better way?

Thanks

---

Give the tds of interest a classname so that you can select them using the classname selector.

<tr>
    <td><input type="checkbox" name="vehicle" value="Bike" /></td>
    <td> I am new </td>
    <td class="cell1">row 1, cell 1</td>
    <td class="cell2">row 1, cell 2</td>
</tr>

with

var row = $('#tbl :checked').parents('tr');
var cell1 = $('.cell1', row);
var cell2 = $('.cell2', row);

You would probably also rather use text() to get its contents. The html() would return any the containing HTML as well which might not be of your interest.

Have you considered as well to use the <input type="radio"> to force a single selection? If you give them all the same name, then they belongs to the same single selection group.

---

I like the @BalusC answer and suggest you to use it but if for some reason you can not do that, why just don't use global constants?

var PRICE_ROW = 1;
var AMOUNT_ROW = 2;

$(cells[PRICE_ROW]).html();

Another alternative might include converting rows to JavaScript objects with names as keys before use.

---

I went through the same thing a few days ago, I have a table full of check boxes that I need to pull cell values from for client side evaluation. Here is what I came up with.

// Find all the checked checkboxes in a table
var CheckedCheckBoxes = $('#tbl').find("input[type='checkbox']:checked");

// Loop over all the checked checkboxes, and pull in the value from the 'td' item I select
CheckedCheckBoxes.each(function() {
    var cellValue = $(this).parent().parent().find('td:eq(2)').text();
}

I'm pretty sure you'll need parent().parent() since the checkbox is in a td that is in a tr, and you need to get to the tr to search for the td (cell) you want.

---

In response to your comment to BalusC's answer...

If you are hiding the cells with extra information you need, then retrieving it with the above script. I think it would be more efficient to just add the data you need into the input itself using a custom data- attribute (ref). For example:

<table border="1" id="tbl">
 <tr>
  <td><input type="checkbox" name="vehicle" value="Bike" data-extra="some extra data stored here instead of in a hidden table cell" data-price="250" /></td>
  <td> I am new </td>
  <td>row 1, cell 1 (this cell is hidden)</td>
  <td>row 1, cell 2 (this cell is hidden)</td>
 </tr>
 <tr>
  <td><input type="checkbox" name="vehicle" value="Bike" data-extra="some extra data" data-price="300"/></td>
  <td> I am new </td>
  <td>row 2, cell 1 (this cell is hidden)</td>
  <td>row 2, cell 2 (this cell is hidden)</td>
 </tr>
</table>

Then you could just use this script (since you said only one checkbox is checked at a time):

var cell = $('#tbl :checked').attr('data-extra');