我想在搜索旁边显示总行数并使搜索代码在 python 中工作？

Question

我创建了一个 table，我想搜索两列（代码和名称），因此当用户输入任何字母或名称数字时，代码列会显示包含该字母的所有行名称我想在搜索框旁边显示 table 的总行数。

在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";
               }
           }
       }
   }

Answer 1

看起来您的代码循环遍历了所有行，然后针对每一行检查该行中的第一个单元格 (td[0]) 是否与输入字段相对应。看起来行中的第一个单元格包含一个计数器，因此可能与输入文本不匹配？

尝试在循环中加入一些 console.log 语句来检查发生了什么（或在调试器中单步执行）

如果您共享所有相关生成的 HTML（包括 'searchtext' 输入），会更容易。假设您对已生成的 HTML 感到满意，那么最终的 HTML 将比 django 标记更有用。

你应该从你的问题中删除 python 和 django 标签，因为你的问题似乎纯粹是 HTML/JS

Answer 2

我在这里为你做了一个例子。也许有帮助。

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>

我想在搜索旁边显示总行数并使搜索代码在 python 中工作？

I want to show the total rows beside the search and make search code work in python?

javascript

python

django

html-table