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

Question

我对编程和网站开发非常陌生，因此对于这个愚蠢的问题和草率的代码表示歉意。我在网上搜索了答案，但这些解决方案适用于静态表，而不是像我这样的动态创建的表。

我已经对表格进行了格式化，这样当您单击一行时，该行就会被选中，并且其 BG 颜色会发生变化。我也已经配置好了，当用户点击一行后点击“Get selected rows”按钮时，所选行的[Description]将被发送到未来的PHP网页。

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

• 如果用户左键单击第二/第三/等未选择的行，则可以进行多个行选择和取消选择。 （我希望在用户单击“获取选定行”按钮时发送所有突出显示的行的 [描述]。）

• 如果用户左键单击已选择的行，则该行将被取消选择。 （这意味着该行的BG颜色恢复到原来的颜色，“获取选定行”按钮将不再发送行[描述]。

My full HTML code on JSFiddle.

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

对于在点击时改变行背景颜色的 CSS 代码，搜索：tr.selected

我花了 20 个小时尝试将这 2 个功能变为现实，但代码的复杂性确实让这变得困难。如果有人可以提供帮助，我将不胜感激！

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';
    }
}

之后，你需要修改OK按钮的点击事件如下。

$("#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);
});

希望对您有所帮助。