我想顯示搜索旁邊的總行數，并使搜索代碼在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中工作？

熱門問答

冰糕覆蓋了內核的URI

DataGridView1只顯示類的內容，而不顯示子類的內容

區分墊手風琴

計算機專業，在前端上，做什么類型的畢設，方向，會讓人眼前一亮，比較新穎。

如何確保依賴項僅安裝在帶有Poetry的Windows上？

為pandas數據幀中的每一行從左到特定字符提取子字符串？

PHP mail（）將一些字符更改為htmlentities？

請問el-dropdown-item想要在底端加上“查看全部”div，但發現擠到上面位置了，請問如何修改

返回鍵不適用于Textarea PHP / Yii

Python3將protobuf數據轉成string

截取標點符號后的字符串

字符串是值傳遞還是引用傳遞