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

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

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

? 最佳回答:

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

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>

主站蜘蛛池模板: 久久久久成人精品一区二区| 国产伦理一区二区三区| 亚洲国产高清在线精品一区| 伊人久久大香线蕉AV一区二区 | 精品国产一区二区三区色欲| 免费一区二区无码视频在线播放 | 精品人妻一区二区三区四区在线| 国产内射999视频一区| 国产一区二区三区免费看| 国产精品视频分类一区| 国产午夜精品一区理论片飘花 | 国产成人一区二区三区精品久久| 无码国产精品一区二区免费vr| 乱中年女人伦av一区二区| 国产SUV精品一区二区88L| 成人一区二区三区视频在线观看| 亚洲一区二区三区丝袜| 日韩一区二区三区四区不卡| 亚洲一区二区三区在线| 91福利国产在线观一区二区| 日韩免费无码一区二区三区 | 日本高清天码一区在线播放| 国产成人久久精品麻豆一区| 日韩AV无码一区二区三区不卡| 亚洲av乱码中文一区二区三区| 亚洲日韩国产一区二区三区在线 | 日本一区二三区好的精华液| 亚洲日本精品一区二区| 一区二区三区观看免费中文视频在线播放 | 亚洲一区免费视频| 亚洲av鲁丝一区二区三区| 久久久久无码国产精品一区| 在线观看亚洲一区二区| 日韩中文字幕一区| 精品久久久久久无码中文字幕一区| 久久精品日韩一区国产二区| 精品国产高清自在线一区二区三区| 无码国产精品久久一区免费| 国产成人高清亚洲一区久久| 国产美女av在线一区| 午夜天堂一区人妻|