我想顯示搜索旁邊的總行數，并使搜索代碼在python中工作？

Question 1

我創建了一個表，我想搜索兩列（代碼和名稱），所以當用戶輸入任何字母或名稱、代碼列時，它會顯示包含該字母的所有行名，我想在搜索框旁邊顯示我的表的總行數。

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

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

Answer 1

我在這里為你樹立了一個榜樣。也許會有幫助。

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中工作？

熱門問答

如何獲取在特定元素之后出現的所有特定元素

JavaScript實現滾動到頁面指定位置，這行代碼表達了什么？

為什么VarType（）為包含長整數的變量返回vbString？

如何導入文件名與數據幀中的列值對應的圖像？

如何在每次渲染組件時傳遞數組的一個字符串？

如何根據Python中的其他列填充字段？

MFC中如何根據內容自動調整窗口大小

在Tkinter中如何自定義控件的外觀和行為

在Slim框架中如何創建一個版本化的RESTful API

如何在我的后端Wordpress自定義類型頁面上顯示已檢查的版本，但在數據庫中我想看到變量名稱

react里父組件獲取到的this.prop.children如何獲取到特定的子組件？

python除法余數為0