使用複選框從表格中選擇特定記錄

例如，如果我有一個表存儲個人的姓名，聯繫人和國家。我希望能夠使用複選框選擇單個記錄，並能夠將它們的值提交給數據庫。

 Name  Contact   Country 
     Sam  [email protected]  India 
     Jane  [email protected]  USA

數據庫部分沒有問題，只需要能夠收集存儲在這裏的值。

來源

2014-04-16 AndyPandy_25Flow

您是否嘗試過的東西，發現自己陷入了困境？ – enhzflep

還沒有。我對HTML很陌生，無法獲得編程邏輯。 –

有很多不同的方法可以完成這項任務。我將介紹一種方式。

這個想法是，您可以在（html）表中找到所有複選框（輸入元素，類型爲checkbox）的列表。從那裏，如果盒子被卡住，你會發現哪個單元元素包含它。然後您可以找到哪個（html）表格行包含該單元格。然後，您可以使用該行的cells集合來獲取該行中的各種數據。

HTML

<table id='infoTable'> 
    <tr><th>Name</th><th>Contact</th><th>Country</th><th>Selected</th></tr> 
    <tr><td>Sam</td><td>[email protected]</td><td>India</td><td><input type='checkbox'/></td></tr> 
    <tr><td>Jane</td><td>[email protected]</td><td>USA</td><td><input type='checkbox'/></td></tr> 
</table> 
<button onclick='showSelected()'>Show selected</button>

的Javascript

function showSelected() 
{ 
    // get all checkbox elements that exist in the table of interest 
    var checkBoxes = document.querySelectorAll('#infoTable input'); 

    var i, n = checkBoxes.length; 
    var msg = 'Selected items:\n'; 

    for (i=0; i<n; i++) 
    { 
     var curCheckbox = checkBoxes[i]; 
     if (curCheckbox.checked == true) 
     { 
      var containingCell = curCheckbox.parentNode; 
      var containingRow = containingCell.parentNode; 

      var curName = containingRow.cells[0].innerHTML; 
      var curContact = containingRow.cells[1].innerHTML; 
      var curCountry = containingRow.cells[2].innerHTML; 

      msg += curName + ' - ' + curContact + ' - ' + curCountry + '\n'; 
     } 
    } 
    alert(msg); 
}

看到它在這裏的行動：http://jsfiddle.net/xphaL/

來源

2014-04-16 13:48:44 enhzflep

工程就像一個魅力。非常感激。 –

使用複選框從表格中選擇特定記錄

回答

相關問題