有沒有更好的方法從表格行中獲取值？

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 foreach循環）。

所以現在說我想獲得第二個表格單元格的值我只想去

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

因爲現在我的第三個單元格後，我其實並沒有第二小區。

那麼還有更好的方法嗎？

感謝

Answer 1

給這個td S的權益類名，這樣就可以使用類名選擇器中選擇它們。

<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是在TR，你需要去的TR搜索的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');