Display Data in form of Table row by clicking single or multiple Checkboxes in Django

I am working on Django framework and stuck in a bad situation. I have my Data table that is fetched from database and displaying in a table form. At the end of the table there are multiple checkboxes which is used to customize the data and display the only data for which I have clicked on single or multiple checkboxes. After clicking on checkbox / checkboxes data have to display in table form.

    <head>
         
         <script>
              function getvalues()
              {
                   let selected = new Array();
                   var chckbox = document.getElementById("tab1");
                   var selchk = chckbox.getElementsByTagName("input");
                   for(var i=0; i<selchk.length;i++)
                   {
                        if(selchk[i].checked)
                        {
                             selected.push(selchk[i].value);
                        }
                   }
                   if(selected.length> 0)
                   {
                        document.getElementById("displayvalues").innerHTML= selected;
                   }
                   
              };
         </script>
              
    </head>
    <body>
    
    <table border = "1">
         <tr>
              <th> ID </th>
              <th> NAME </th>
              <th> EMAIL </th>
              <th> SALARY </th>
              <th> PHONE   </th>
         </tr>
         {%for getdata in EmployeeDetails %}
         <tr>
         <td> {{getdata.id}}</td>
         <td> {{getdata.empname}}</td>
         <td> {{getdata.email}}</td>
         <td> {{getdata.salary}}</td>
         <td> {{getdata.phone}}</td>
         </tr>
         {% endfor %}
    </table>
<table id = "tab1">
     <tr>
         <td> {%for display in EmployeeDetails %}
          <input type="checkbox" value="{{display.salary}}" /> {{display.salary}}
                         {% endfor %}
                    </td>

     </tr>
</table>

     <input id="but1" type="button" value="display records" onclick="getvalues()"/>     
          <b id="displayvalues"></b>
    </body>

As you can see in image when I click on any checkbox It just gives me checkbox value not the entire row. I want entire row result by clicking on single or multiple checkboxes and it should display in form of table pertaining rows.

Kindly Help me to get out of this.

Solution

Your javascript function needs to find more than the checkbox value. You also need the rows with the corresponding salary.

To achieve this, I would add a class corresponding to the salary on every row. Then I would use JavaScript's QuerySelectorAll to get every row with the class corresponding to the salary, hide every row and show the matching rows.

I added a "a" before every class because they can't start with a number.

function getvalues()
              {
                   let checkboxes = document.getElementById("tab1");
                   let table = document.getElementById("table");
                   var selchk = document.getElementsByTagName("input");
                   
                   let selected = [];
                   
                   for(var i=0; i<selchk.length;i++)
                   {
                        if(selchk[i].checked)
                        {
                             selected.push(selchk[i].value);
                        }
                   }
                   
                   var query = "#tr";
                   
                   for(var j = 0; j < selected.length; j++) {
                      query = query + ", .a" + selected[j];
                   }
                   
                   if (query !== "")
                       var rows = table.querySelectorAll(query); // Every element having a class corresponding to the salary you want
                   else var rows = [];
                   
                   table.querySelectorAll("tr").forEach((r) => r.style.display = "none");
                   
                   rows.forEach((r) => { // For every row r
                       r.style.display = ""; // Hide r
                   });
                   
              };

<table border = "1">
         <tr>
              <th> ID </th>
              <th> NAME </th>
              <th> EMAIL </th>
              <th> SALARY </th>
              <th> PHONE   </th>
         </tr>
         <tr class="a12">
         <td> 1</td>
         <td> test</td>
         <td> tset@test</td>
         <td> 12</td>
         <td> 0606060606</td>
         </tr>
         <tr class="a22">
         <td> 2</td>
         <td> test2</td>
         <td> tse2t@test</td>
         <td> 22</td>
         <td> 0606060626</td>
         </tr>
    </table>
    
<table id = "tab1">
     <tr>
         <td>
          <input type="checkbox" value="12" /> 12 </td>
         <td>
          <input type="checkbox" value="22" /> 22 </td>
     </tr>
</table>
<table border = "1">
         <tr>
              <th> ID </th>
              <th> NAME </th>
              <th> EMAIL </th>
              <th> SALARY </th>
              <th> PHONE   </th>
         </tr>
         <tbody id="table">
         <tr class="a12">
         <td> 1</td>
         <td> test</td>
         <td> tset@test</td>
         <td> 12</td>
         <td> 0606060606</td>
         </tr>
         <tr class="a22">
         <td> 2</td>
         <td> test2</td>
         <td> tse2t@test</td>
         <td> 22</td>
         <td> 0606060626</td>
         </tr>
         </tbody>
    </table>
    
     <input id="but1" type="button" value="display records" onclick="getvalues()"/>     
          <b id="displayvalues"></b>

ISOLATED TEMPLATE FOR CLARITY :

 <table border = "1">
     <tr>
          <th> ID </th>
          <th> NAME </th>
          <th> EMAIL </th>
          <th> SALARY </th>
          <th> PHONE   </th>
     </tr>
     {%for getdata in EmployeeDetails %}
     <tr class="a{{ getdata.salary }}">
     <td> {{getdata.id}}</td>
     <td> {{getdata.empname}}</td>
     <td> {{getdata.email}}</td>
     <td> {{getdata.salary}}</td>
     <td> {{getdata.phone}}</td>
     </tr>
     {% endfor %}
</table>
<table id = "tab1">
     <tr>
         <td> {%for display in EmployeeDetails %}
             <input type="checkbox" value="{{display.salary}}" /> {{display.salary}}
                     {% endfor %}
         </td>
     </tr>
</table>

      <input id="but1" type="button" value="display records" onclick="getvalues()"/>     
      <b id="displayvalues"></b>


 <table border = "1">
     <tr>
          <th> ID </th>
          <th> NAME </th>
          <th> EMAIL </th>
          <th> SALARY </th>
          <th> PHONE   </th>
     </tr>
     <tbody id="table">
     {%for getdata in EmployeeDetails %}
     <tr class="a{{ getdata.salary }}">
     <td> {{getdata.id}}</td>
     <td> {{getdata.empname}}</td>
     <td> {{getdata.email}}</td>
     <td> {{getdata.salary}}</td>
     <td> {{getdata.phone}}</td>
     </tr>
     {% endfor %}
     </tbody>
</table>
</body>