时间戳

首页 > 解决方案 > 更改在 html 表中搜索的列

javascript - 更改在 html 表中搜索的列

问题描述

使用 javascript 在表中创建自定义搜索。按预期工作！

( Sr. ) 可以一直是 1,2,3 等吗？

意思是，在下面的脚本中，如果我搜索“vin”，它将只显示名称中包含字符“vin”的行。所以在下面，只有一个。现在它显示 Sr 编号为2，但由于只有 1，它应该显示 1。

$(document).ready(function() {
  $("#table_search").on("keyup", function() {
    var input, filter, table, tr, td, i, txtValue;
    input = document.getElementById("table_search");
    filter = input.value.toUpperCase();
    table = document.getElementById("table_body");
    tr = table.getElementsByTagName("tr");
    for (i = 0; i < tr.length; i++) {
      td = tr[i].getElementsByTagName("td")[1];
      if (td) {
        txtValue = td.textContent || td.innerText;
        if (txtValue.toUpperCase().indexOf(filter) > -1) {
          tr[i].style.display = "";
        } else {
          tr[i].style.display = "none";
        }
      }
    }
  });
});
.form-control {
  background-position: 10px 10px;
  background-repeat: no-repeat;
  width: 100%;
  font-size: 16px;
  padding: 12px 20px 12px 40px;
  border: 1px solid #ddd;
  margin-bottom: 12px;
}

table {
  border-spacing: 0;
  width: 100%;
  border: 1px solid #ddd;
}

th,
td {
  text-align: left;
  padding: 16px;
}

tr:nth-child(even) {
  background-color: #f2f2f2
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p><input class="form-control" id="table_search" type="text" placeholder="Search..."></p>

<table>
  <thead>
    <tr>
      <th>Sr</th>
      <th>Name</th>
      <th>Marks</th>
    </tr>
  </thead>
  <tbody id="table_body">
    <tr>
      <td class="font-elephant">1</td>
      <td class="font-elephant">John</td>
      <td class="font-elephant"><span>438</span> Passed</td>
    </tr>
    <tr>
      <td class="font-elephant">2</td>
      <td class="font-elephant">Kevin</td>
      <td class="font-elephant"><span>238</span> Failed</td>
    </tr>

    <tr>
      <td class="font-elephant">3</td>
      <td class="font-elephant">Lux</td>
      <td class="font-elephant"><span>568</span> Passed</td>
    </tr>

    <tr>
      <td class="font-elephant">4</td>
      <td class="font-elephant">Bro</td>
      <td class="font-elephant"><span>538</span> Passed</td>
    </tr>
  </tbody>
</table>

标签： javascriptjqueryhtmltwitter-bootstrapangularjs-filter

解决方案

搜索时只需添加更多 Sr 列。尝试遵循这个。希望能帮到你，我的朋友：））

$(document).ready(function() {
  $("#table_search").on("keyup", function() {
    var input, filter, table, tr, tdSr, tdName, i, txtSrValue, txtNameValue;
    input = document.getElementById("table_search");
    filter = input.value.toUpperCase();
    table = document.getElementById("table_body");
    tr = table.getElementsByTagName("tr");

    for (i = 0; i < tr.length; i++) {
      tdSr = tr[i].getElementsByTagName("td")[0];   
      tdName = tr[i].getElementsByTagName("td")[1];
      if (tdSr) {
        txtSrValue = tdSr.textContent || tdSr.innerText;
        txtNameValue = tdName.textContent || tdName.innerText;
        if (txtNameValue.toUpperCase().indexOf(filter) > -1
        || txtSrValue.toUpperCase().indexOf(filter) > -1) {
          tr[i].style.display = "";
        } else {
          tr[i].style.display = "none";
        }
      }
    }
  });
});

https://jsfiddle.net/7vnchukx/

推荐阅读