gpt4 book ai didi

javascript - 搜索特定的 html 表格列

转载 作者:行者123 更新时间:2023-12-02 14:52:52 25 4
gpt4 key购买 nike

你好,有人可以帮我解决这个问题吗?搜索正在进行中但我如何排除要搜索的最后一列?我有三列,名字、姓氏和电子邮件。

我想要的是仅使用两列进行搜索。并在搜索时排除列电子邮件。谢谢这是我的 JavaScript 代码

<script type="text/javascript">
function doSearch() {
var searchText = document.getElementById('searchTerm').value;
var targetTable = document.getElementById('report');
var targetTableColCount;

//Loop through table rows
for (var rowIndex = 0; rowIndex < targetTable.rows.length; rowIndex++ ) {
var rowData = '';

//Get column count from header row
if (rowIndex == 0) {
targetTableColCount = targetTable.rows.item(rowIndex).cells.length;
continue; //do not execute further code for header row.
}

//Process data rows. (rowIndex >= 1)
for (var colIndex = 0; colIndex < targetTableColCount; colIndex++) {
var cellText = '';

if (navigator.appName == 'Microsoft Internet Explorer')
cellText = targetTable.rows.item(rowIndex).cells.item(colIndex).innerText;
else
cellText = targetTable.rows.item(rowIndex).cells.item(colIndex).textContent;

rowData += cellText;
}

// Make search case insensitive.
rowData = rowData.toLowerCase();
searchText = searchText.toLowerCase();

//If search term is not found in row data
//then hide the row, else show
if (rowData.indexOf(searchText) == -1)
targetTable.rows.item(rowIndex).style.display = 'none';
else
targetTable.rows.item(rowIndex).style.display = 'table-row';
}
}
</script>

这是我的 html 代码

<input id="searchTerm" class="form-control" placeholder="Enter text" onkeyup="doSearch()">  
<table id="report" class="table">
<thead>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr>
<td>John</td>
<td>Doe</td>
<td>john@example.com</td>
</tr>
<tr>
<td>Mary</td>
<td>Moe</td>
<td>mary@example.com</td>
</tr>
<tr>
<td>July</td>
<td>Dooley</td>
<td>july@example.com</td>
</tr>
</tbody>
</table>

我还有一个问题。我在 html 表格上添加了一个可扩展行现在搜索没有给出所需的输出。例如,当我搜索不在 html 表中的值时,它只会删除第一行并显示该行的其余部分。这不是正确的输出。

<table id="report" class="table">
<thead>
<tr>
<th>Firstname</th>
<th>Lastname</th>

<th>Email</th>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td>John</td>
<td>Doe</td>
<td>john@example.com</td>
<td>
<div class="arrow"><a id="menu-toggle" href="#" ><i class="glyphicon glyphicon-plus-sign"></i></a></div>
</td>
</tr>
<tr><td colspan="4">
<button type="button" class="btnview btn btn-xs btn-warning" >
<span class="glyphicon glyphicon-remove-circle" aria-hidden="true"></span>View
</button>
</td>
</tr>

<tr>
<td>Mary</td>
<td>Moe</td>
<td>mary@example.com</td>
<td>
<div class="arrow"><a id="menu-toggle" href="#" ><i class="glyphicon glyphicon-plus-sign"></i></a></div>
</td>
</tr>
<tr><td colspan="4">
<button type="button" class="btnview btn btn-xs btn-warning" >
<span class="glyphicon glyphicon-remove-circle" aria-hidden="true"></span>View
</button>
</td>
</tr>
<tr>
<td>July</td>
<td>Dooley</td>
<td>july@example.com</td>
<td>
<div class="arrow"><a id="menu-toggle" href="#" ><i class="glyphicon glyphicon-plus-sign"></i></a></div>
</td>
</tr>
<tr><td colspan="4">
<button type="button" class="btnview btn btn-xs btn-warning" >
<span class="glyphicon glyphicon-remove-circle" aria-hidden="true"></span>View
</button>
</td>
</tr>
</tbody>
</table>

罗马先生,将您的代码集成到我的代码后。搜索现在正在按预期进行。但是当搜索词输入为空并且我按退格键时。就变成这样了

https://jsfiddle.net/t6xg97uo/ enter image description here

最佳答案

我相信这应该可以回答您的问题。我只是调整您要搜索的列数:

            for (var colIndex = 0; colIndex < (targetTableColCount-1); colIndex++) {

这是一个例子:

http://codepen.io/anon/pen/PNWNmL

更新

好吧,我不确定这是否是您正在寻找的内容的正确修复,但我只是注释掉了导致退格时显示该按钮的代码。这是我所做的:

<tbody>
<tr>
<td>John</td>
<td>Doe</td>
<td>john@example.com</td>
<td>
<div class="arrow"><a id="menu-toggle" href="#" ><i class="glyphicon glyphicon-plus-sign"></i></a></div>
</td>
</tr>
<tr>
<!-- <td colspan="4">
<button type="button" class="btnview btn btn-xs btn-warning" >
<span class="glyphicon glyphicon-remove-circle" aria-hidden="true"></span>View
</button>
</td> -->
</tr>

<tr>
<td>Mary</td>
<td>Moe</td>
<td>mary@example.com</td>
<td>
<div class="arrow"><a id="menu-toggle" href="#" ><i class="glyphicon glyphicon-plus-sign"></i></a></div>
</td>
</tr>
<tr>
<!-- <td colspan="4">
<button type="button" class="btnview btn btn-xs btn-warning" >
<span class="glyphicon glyphicon-remove-circle" aria-hidden="true"></span>View
</button>
</td> -->
</tr>
<tr>
<td>July</td>
<td>Dooley</td>
<td>july@example.com</td>
<td>
<div class="arrow"><a id="menu-toggle" href="#" ><i class="glyphicon glyphicon-plus-sign"></i></a></div>
</td>
</tr>
<tr>
<!-- <td colspan="4">
<button type="button" class="btnview btn btn-xs btn-warning" >
<span class="glyphicon glyphicon-remove-circle" aria-hidden="true"></span>View
</button>
</td> -->
</tr>
</tbody>

这是一个 jsfiddle:

https://jsfiddle.net/t6xg97uo/1/

关于javascript - 搜索特定的 html 表格列,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36046058/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com