Отображение данных в виде строки таблицы при нажатии на один или несколько флажков в Django

Я работаю на фреймворке Django и застрял в неприятной ситуации. У меня есть таблица данных, которая берется из базы данных и отображается в табличной форме. В конце таблицы есть несколько чекбоксов, которые используются для настройки данных и отображения только тех данных, для которых я нажал на один или несколько чекбоксов. После нажатия на флажок / флажки данные должны отображаться в табличной форме.

    <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>

Как вы можете видеть на изображении, когда я нажимаю на любой флажок, он просто дает мне значение флажка, а не весь ряд. Я хочу получить результат всей строки при нажатии на один или несколько флажков, и он должен отображаться в виде таблицы, содержащей строки.

Помоги мне выбраться из этой ситуации.

Ваша функция javascript должна найти не только значение флажка. Вам также нужны строки с соответствующей зарплатой.

Для достижения этой цели я добавлю класс, соответствующий зарплате, в каждую строку. Затем я использую JavaScript's QuerySelectorAll, чтобы получить каждую строку с классом, соответствующим зарплате, скрыть каждую строку и показать соответствующие строки.

Я добавил "a" перед каждым классом, потому что они не могут начинаться с цифры.

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>
         <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>
    
<table id = "tab1">
     <tr>
         <td>
          <input type="checkbox" value="12" /> 12 </td>
         <td>
          <input type="checkbox" value="22" /> 22 </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>
<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>
Вернуться на верх