更改在 html 表中搜索的列

Question

使用 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>

Answer 1

搜索时只需添加更多 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/

Answer 2

如果您确实想显示搜索结果的索引号，请为序列号添加一个“th”元素，并在每个“tr”元素中添加一个“td”元素。

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

代码片段：

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