javascript - 您能帮我突出显示通过 java 脚本动态创建的所选 HTML 表格行吗

Question

下面是我用来动态添加行的 JavaScript 功能 addRow()，现在尝试使用 rowhighlight() 函数以红色突出显示所选行。

/动态添加行到 HTML 表格的函数/

function addRow(msg)
{
    var table = document.getElementById("NotesFinancialSummary");
    var finSumArr1 = msg.split("^");
    var length = finSumArr1.length-1;
    alert("length"+ length);
    for(var i=1; i<finSumArr1.length; i++)
    {

        var rowValues1 = finSumArr1[i].split("|");
        tb=document.createElement("tbody");
        var tbody=document.createElement("tbody");
        table.appendChild(tbody);
        var tr=document.createElement("tr");
        tbody.appendChild(tr);
        for(var k=0;k<=10;k++)//adding data to table dynamically
        {       

            var td=document.createElement("td");
            tr.appendChild(td);
            var element1=rowValues1[k];
            td.innerHTML =element1;
            tr.onclick=function(){

            rowhighlight(this);//calling the rowhighlight function
            }

        }



       }




}


     function rowhighlight(x)
    {

        var index = x.rowIndex;
        document.getElementById("NotesFinancialSummary").rows     [index].style.backgroundColor = "red";



    }

Answer 1

一种方法是首先循环遍历其他行并删除样式(实际上应该是一个类)，然后将样式(同样是类)应用到所选行。

这是一种实现方法:

function rowHighlight() {
    var selectedRows = document.getElementsByClassName('selected');

    for (var n = 0; n < selectedRows.length; n++) {
        selectedRows[n].className = '';
    }
    this.className = 'selected'
}

这是一个工作示例，虽然非常简单:fiddle time!