Is there a better way to get values ​​from a table row?

Question

Say I have it

<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 checked string, and then the cell values ​​of this checked string. Therefore i would do it

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

So, let's assume that only one checkbox can be checked (therefore there is no jQuery foreach loop).

So now I’ll say that I want to get the cell value of the 2nd table, I would just go

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

The thing with this, though, is making the code so fragile. For example, if I placed another cell in the table after the checkbox is checked?

<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>
</tr>
</table> 

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

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

to that

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

Since then, I am already after the third cell, and not the second cell anymore.

So is there a better way?

thank

Answer 1

td , .

<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>

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

, text(), . html() HTML-, .

, <input type="radio"> ? name, .

Answer 2

@BalusC , - , ?

var PRICE_ROW = 1;
var AMOUNT_ROW = 2;

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

JavaScript .

Answer 3

, , . .

// 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();
}

, parent(). parent(), td, tr, tr td (), .

Answer 4

BalusC...

, , script. , , data- (ref). :

<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>

script ( ):

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