Question

我希望使用复选框选择表格上的记录。

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

      Name      Contact           Country
      Sam       sam@test.com      India
      Jane      jane@test.com     USA

数据库部分没有问题，只需要能够收集存储在这里的值。

Answer 1

你可以通过许多不同的方式来完成这项任务。我会提出一种方式。

这个想法是你得到一个感兴趣的（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>sam@test.com</td><td>India</td><td><input type='checkbox'/></td></tr>
    <tr><td>Jane</td><td>jane@test.com</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/

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

1 个答案: