Question

我对编程和网站开发很陌生，所以对于noobish问题和草率代码道歉。我在网上搜索了答案，但这些解决方案适用于静态表，而不是像我这样的动态创建表。

我已经将表格格式化，以便当您点击一行时，该行被选中并且其BG颜色会发生变化。我也已经对它进行了配置，以便用户点击＆＃34;获取选定的行＆＃34;单击一行后，所选行的[描述]将被发送到未来的PHP网页。

我很高兴，除了我还想实现这两个功能：

如果用户左键单击第二个/第三个/等未选择的行，则可以进行多个行选择。（我想在用户点击＆＃34;获取选定的行＆＃34;按钮时发送所有突出显示的行的[描述]。）
如果用户左键单击已选择的行，则该行将被取消选中。（这意味着行的BG颜色将恢复其原始颜色，并且＆＃34;获取所选行＆＃34;按钮）将不再发送[描述]行。

My full HTML code on JSFiddle

对于与我的问题相关的JavaScript代码部分，请搜索以下行：window.onload = function () {

对于在点击时更改行的BG颜色的CSS代码，请搜索：tr.selected

我花了20个小时试图将这两个功能变为现实，但代码的复杂性确实使这很难。如果有人可以提供帮助，我会非常感激！

Answer 1

我查看您的代码，然后根据需要对其进行修改希望这是你所期望的。

首先，更改highlight功能以进行多项选择。

function highlight(e) {
    if (e.target.parentNode.className != ''){
        //if already selected, then unselect
        e.target.parentNode.className = '';
    }else{
        //if not selected then select it
        e.target.parentNode.className = 'selected';
    }
}

之后，您需要修改“确定”按钮的单击事件，如下所示。

$("#tst").click(function () {
        var value = "";

        //get all selected row
        var selected = $(".selected");
        //loop through all selected row and get all first column value
        for(var i = 0; i < selected.length; i++){
            if(value != "") value = value + ", ";
            value = value + selected[i].cells[0].innerHTML;
        }

        value = value || "No row Selected";
        alert(value);
});

希望得到这个帮助。

如何允许选择多行+在动态创建的表中启用取消选择行？

1 个答案: