Есть ли лучший способ получить значения из строки таблицы?

Question

Скажем, у меня есть этот

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

Теперь я хочу, чтобы получить строку, которая проверяется, то значения Клеточные что проверили ряд. Так что я хотел бы сделать это

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

Так позволяет не только предполагать один флажок может быть проверен (так что нет JQuery цикла Еогеаспа).

Так что теперь сказать, что я хотел бы получить 2-ое значение ячеек таблицы, я бы просто пойти

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

вещь с этим, хотя это делает код настолько хрупким. Например, если я поместил еще одну ячейку таблицы после флажка?

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

Так что теперь я должен пройти через мой код и изменить этот

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

к этому

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

Так как теперь я на самом деле после того, как 3-й ячейки, а не 2-ю ячейку больше ,

Так есть лучший способ?

Благодаря

Answer 1

Дайте td х интерес имя класса, так что вы можете выбрать их с помощью переключателя Classname.

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

Я уверен, что вы будете нуждаться в родительском(). Родитель(), так как флажок в TD, который находится в тре, и вам нужно, чтобы добраться до тра искать тд (ячейку).

Answer 4

В ответ на ваш комментарий к отзыву BalusC ...

Если вы являетесь , спрятав ячейки с дополнительной информацией, необходимой вам, а затем извлеките ее с помощью приведенного выше сценария. Я думаю, что было бы более эффективно просто добавлять нужные данные во входные данные, используя собственный атрибут 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> 

Тогда вы могли бы просто использовать этот скрипт (так как вы сказали, только один флажок в то время):

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