Я хочу показать общее количество строк рядом с поиском и заставить код поиска работать в python?

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

в HTML

 <input type="text" class="form-control"  onkeyup="searchrecords" id="searchtext" placeholder="Search" aria-label="Text input with dropdown button">
                                        <h6 class="mt-3 mx-4">Total: </h6>
                                    </div>
                                </div>
                                <table class="table table-striped " id="table1">
                                    <thead>
                                        <tr class="feed-bg text-white ">
                                            <th>ID</th>
                                            <th>Employee Code</th>
                                            <th>Employee Name</th>
                                            <th>Email</th>

                                        </tr>
                                    </thead>
                                    <tbody>
                                        {% for i in data_list %}
                                        <tr>
                                            <td>{{ forloop.counter }}</td>
                                            <td>{{i.employee_code}}</td>
                                            <td>{{i.employee_name}}</td>
                                            <td>{{i.email}}</td>
                                        </tr>
                                        {% endfor %}
                                    </tbody>
                                </table>

В JS я сделал код поиска, но он не работает!

   function searchrecords()
   {
       var input,table,tr,td,filter;
       input=document.getElementById("searchtext");
       filter=input.value.toUpperCase();
       table=document.getElementById("table1");
       tr=table.getElementsByTagName("tr");
       for(i=0;i<tr.length;i++)
       {
           td=tr[i].getElementsByTagName("td")[0];
           if(td)
           {
               textdata=td.innerText;
               if(textdata.toUpperCase().indexOf(filter)>-1)
               {
                   tr[i].style.display="";
               }
               else
               {
                   tr[i].style.display="none";
               }
           }
       }
   }

enter image description here

Выглядит так, как будто ваш код перебирает все строки, затем для каждой строки проверяет первую ячейку в строке (td[0]) на соответствие полю ввода. Похоже, что первая ячейка в ряду содержит счетчик, поэтому предположительно не будет соответствовать введенному тексту?

Попробуйте вставить несколько операторов console.log в ваш цикл, чтобы проверить, что происходит (или пройдитесь в отладчике)

Было бы проще, если бы вы поделились всем соответствующим сгенерированным HTML (включая ввод 'searchtext'). Если предположить, что вы довольны сгенерированным HTML, то конечный HTML будет полезнее, чем разметка django.

Вы, вероятно, должны удалить теги python и django из вашего вопроса, поскольку кажется, что ваша проблема связана исключительно с HTML/JS

Я сделал пример для вас здесь. Может быть, это поможет.

const input = document.getElementById("searchtext");
const rowNum = document.getElementById("row-num");
const table = document.getElementById("table1");
const tr = Array.from(table.getElementsByTagName("tr"));

function renderRowNr() {
  rowNum.innerHTML = tr.filter((row) => row.style.display !== "none").length;
}

function resetRows() {
  tr.forEach((row) => (row.style.display = "inherit"));
}

function searchrecords() {
  resetRows();
  input.value &&
    tr
      .filter((row) => {
        return !Array.from(row.children)
          .map((cell) => {
            return cell.textContent
              .toUpperCase()
              .includes(input.value.toUpperCase());
          })
          .some((cell) => cell === true);
      })
      .forEach((row) => (row.style.display = "none"));
  renderRowNr();
}

function init() {
  resetRows();
  renderRowNr();
  input.addEventListener("change", () => searchrecords());
}

init();
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <label>Filter: </label>
    <input id="searchtext" />
    <p>row number: <span id="row-num"></span></p>
    <table class="table table-striped" id="table1">
      <tbody>
        <tr>
          <td>1</td>
          <td>abc</td>
          <td>Lokrum</td>
          <td>email1</td>
        </tr>
        <tr>
          <td>2</td>
          <td>def</td>
          <td>Lara</td>
          <td>email2</td>
        </tr>
        <tr>
          <td>3</td>
          <td>ghi</td>
          <td>Lora</td>
          <td>email3</td>
        </tr>
      </tbody>
    </table>
    <script src="app.js"></script>
  </body>
</html>

Вернуться на верх