Wie wiederhole ich Tabellenzeilen und gebe einen bestimmten Zellenwert an ein Array weiter, wenn ein Kontrollkästchen aktiviert ist?

Question

Ich versuche, einen Benutzer zu ermöglichen, Tabellenzeilen mit einem Kontrollkästchen zu markieren, sobald sie die Zeilen auswählen und auf eine Schaltfläche klicken Ich möchte Zeilen-ID-Text in einem Array gespeichert werden. Hier

ist der HTML-Code für die Tabelle, die Ihnen eine Vorstellung von der Struktur zu geben:

<table id="test" class="table"> 
    <thead> 
     <tr> 
      <th>Id</th> 
      <th>Name</th> 
      <th>Location</th> 
      <th>Copy</th> 
     </tr> 
    </thead> 

    <tbody> 
     <tr>     
      <td>1</td> 
      <td>The Name</td> 
      <td>The Location</td> 
      <td><input type="checkbox" class="checkbox" /></td> 
     </tr> 
     <tr>     
      <td>2</td> 
      <td>The Name</td> 
      <td>The Location</td> 
      <td><input type="checkbox" class="checkbox" /></td> 
     </tr> 
     <tr>     
      <td>3</td> 
      <td>The Name</td> 
      <td>The Location</td> 
      <td><input type="checkbox" class="checkbox" /></td> 
     </tr> 
    </tbody> 
</table> 

So wie Sie es sehen können, ist eine ID-Spalte und jede Zeile hat eine Checkbox zur Auswahl. Das Konzept besteht darin, dass Sie auf das Kontrollkästchen klicken, um die gewünschten Zeilen auszuwählen und die ID-Werte der ausgewählten Zeilen an ein Array zu übergeben.

Ich bin auf halbem Weg, aber ich kann den Checkbox-Teil überhaupt nicht funktionieren. Hier ist mein JavaScript-Code, um meinen Ansatz zu demonstrieren.

var table = $('#test').not('thead tr'), 
    rows = table.find('tr:not(:has(th))').get(), 
    ids = [], 
    rowcount = rows.length,    
    r,cells,cellcount,c,cell;       

    //Rows 
     for (r = 0; r < rowcount; r++) { 
      cells = rows[r].cells; 
      cellcount = cells.length; 

      var checkbox = $(rows).find(".checkbox");    

      //Cells 
      for (c = 0; c < cellcount; c++) 
      {         
       cell = cells[c];     
       var content = cells[0].innerHTML; 

       if(checkbox.is(":checked")) { 
        ids.push(content); 
       } 

      }//cells 


      //ids.push(content); 
     }//rows 

     //This is the button that will grab the array that's been populated by the checkboxes. 
     $('#go').on('click', function() { 
      console.log(ids);      
     }) 

Answer 1

Wenn Ihre ID immer in der ersten Spalte ist

//Get all the checked checkboxes 
var checkboxes = $('#test tbody input:checked'); 

//Loop through every checkbox 
for (let i = 0; i < checkboxes.length; i++){ 
    //   <input>   <td>   <tr>  <td>   
    ids.push(checkboxes[i].parentElement.parentElement.firstChild.innerHTML); 
}