ボタンクリックイベントを使用して複数のレコードを強調表示します。

Question

JSFiddleで次のコードが見つかりました。このコードでは、一度に1つの行のみが強調表示されます。しかし、私は一度に複数の行を強調表示する必要があり、ボタンがクリックされたときにそれらは残るべきです。誰かが私を助けることができますか？

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>

トグル行います0