javascript - 使用按钮单击事件 javascript 突出显示多条记录

Question

我在 JSFiddle 找到了以下代码。此代码一次仅突出显示一行。但我需要一次突出显示多行，并且单击按钮时它们应该保留。任何人都可以帮助我吗？

Javascript

function highlight(ctrl){
   var elements=document.getElementsByTagName('tr');
    for(var i=0;i<elements.length;i++)
        elements[i].classList.remove('backChange');
   var parent=ctrl.parentNode.parentNode;
   parent.classList.add("backChange");
}

document.write("<table id=appTable border=1 style=margin-top:10px; margin-left:10px;>")
        document.write("<tr><th>Select</th><th>Name</th><th>Location</th><th>Action</th></tr>");
for (row=1; row<5; row++) {
                     document.write("<tr class='New'>")
                     for (col=1; col<=4; col++) {
                            if(col==1)
                {                       document.write("<td><input type='checkbox' id='mapCheck' name='myTextEditBox' /></td>")
                }

                            if(col==2)
                                 document.write("<td width='140'>Name</td>")
                            if(col==3)
                                 document.write("<td width='200'>Location</td>")
                if(col==4)
                 document.write("<td><button type='button' onclick='highlight(this)'>select</button></td>")
                        }
                document.write("</tr>")
                }
        document.write("</table>")

CSS

.backChange{
    background:red;
}

Answer 1

删除循环并切换类

function highlight(ctrl) {
  var parent = ctrl.parentNode.parentNode;

  if(parent.classList == "New backChange") {
    parent.classList.remove("backChange");
  }
  else {
    parent.classList.add("backChange");
  }
}

.backChange{
    background:red;
}

<table id="appTable" style="margin-top:10px;" margin-left:10px;="" border="1">
  <tbody>
    <tr>
      <th>Select</th>
      <th>Name</th>
      <th>Location</th>
      <th>Action</th>
    </tr>
    <tr class="New">
      <td><input id="mapCheck" name="myTextEditBox" type="checkbox"></td>
      <td width="140">Name</td>
      <td width="200">Location</td>
      <td><button type="button" onclick="highlight(this)">select</button></td>
    </tr>
    <tr class="New">
      <td><input id="mapCheck" name="myTextEditBox" type="checkbox"></td>
      <td width="140">Name</td>
      <td width="200">Location</td>
      <td><button type="button" onclick="highlight(this)">select</button></td>
    </tr>
    <tr class="New">
      <td><input id="mapCheck" name="myTextEditBox" type="checkbox"></td>
      <td width="140">Name</td>
      <td width="200">Location</td>
      <td><button type="button" onclick="highlight(this)">select</button></td>
    </tr>
    <tr class="New">
      <td><input id="mapCheck" name="myTextEditBox" type="checkbox"></td>
      <td width="140">Name</td>
      <td width="200">Location</td>
      <td><button type="button" onclick="highlight(this)">select</button></td>
    </tr>
  </tbody>
</table>