在 html 表中搜索时更改列 [英] Changing column on searching in html table

问题描述

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

Created a custom search in the table using javascript. Working as expected!

(Sr.)可以总是 1、2、3 等吗?

Can (Sr.) always be 1,2,3,etc?

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

Meaning, In the below script, if I search "vin", it will show only that row having character "vin" in the name. So in below, there is only one. Now it's showing Sr number as 2, but as there is only 1, it should show 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>

推荐答案

如果您确实想显示搜索结果的索引号，请为 Serial Number 添加一个 'th' 元素和一个 'td' 每个 'tr' 元素中的元素.

If you actually wanted to show index number of the search result, add one 'th' element for Serial Number and a 'td' element in each 'tr' element.

然后相应地更改序列号的 .innerHTML.

And then change the .innerHTML of the Serial Number, accordingly.

代码片段:

<style>
.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
}
</style>

<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>Serial</th>
      <th>Student ID</th>
      <th>Name</th>
      <th>Marks</th>
    </tr>
  </thead>
  <tbody id="table_body">
    <tr>
	  <td></td>
      <td class="font-elephant">1</td>
      <td class="font-elephant">John</td>
      <td class="font-elephant"><span>438</span> Passed</td>
    </tr>
    <tr>
	  <td></td>
      <td class="font-elephant">2</td>
      <td class="font-elephant">Kevin</td>
      <td class="font-elephant"><span>238</span> Failed</td>
    </tr>

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

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

<script>


$(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, sr = 1; i < tr.length; i++) {
      td = tr[i].getElementsByTagName("td")[2];
      if (td) {
        txtValue = td.textContent || td.innerText;
        if (txtValue.toUpperCase().indexOf(filter) > -1) {
		  sn = td = tr[i].getElementsByTagName("td")[0];
		  sn.innerHTML = sr++;
          tr[i].style.display = "";
        } else {
          tr[i].style.display = "none";
        }
      }
    }
  });
  
  $('#table_search').keyup();
});
</script>

这篇关于在 html 表中搜索时更改列的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！