使用复选框从表格中选择特定记录

例如，如果我有一个表存储个人的姓名，联系人和国家。我希望能够使用复选框选择单个记录，并能够将它们的值提交给数据库。

 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

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

使用复选框从表格中选择特定记录

回答

相关问题