gpt4 book ai didi

javascript - 在 Html 中过滤表行

转载 作者:塔克拉玛干 更新时间:2023-11-02 21:53:31 26 4
gpt4 key购买 nike

我创建了一个 html 页面,其中包含搜索文本和下面的表格,表格中包含一些数据。

我使用了 JSFiddle 上可用的代码。

但是没有用。请提出类似所示示例的建议。

我正在使用简单的 html、CSS 和 Javascript 编码。

在这个 jQuery 中使用:

var $rows = $('#table td');
$('#search').keyup(function() {
var val = $.trim($(this).val()).replace(/ +/g, ' ').toLowerCase();

$rows.show().filter(function() {
var text = $(this).text().replace(/\s+/g, ' ').toLowerCase();
return !~text.indexOf(val);
}).hide();
});

因为这是一个混合应用程序,我可以有更简单的东西吗?

我正在使用以下代码。请检查

<!DOCTYPE html>
<html>
<head>
<title>Search Box Example 2 - default placeholder text gets cleared on click</title>
<link rel="stylesheet" href="css/SalesTable.css">

<meta name="ROBOTS" content="NOINDEX, NOFOLLOW" />
<!-- JAVASCRIPT to clear search text when the field is clicked -->

<script src="http://code.jquery.com/jquery-2.1.0.js"></script>
<script type="text/javascript">

var $rows = $('#table tr');
$('#tfq').keyup(function() {
var val = $.trim($(this).val()).replace(/ +/g, ' ').toLowerCase();

$rows.show().filter(function() {
var text = $(this).text().replace(/\s+/g, ' ').toLowerCase();
return !~text.indexOf(val);
}).hide();
});

</script>



<!-- CSS styles for standard search box with placeholder text-->

</head>
<body>
<!-- HTML for SEARCH BAR -->
<div id="tfheader">
<form id="tfnewsearch" method="get" action="http://www.google.com">
<input type="text" id="tfq" class="tftextinput2" name="q" size="21" maxlength="120" placeholder="Type to search"><input type="button" value="Search" class="tfbutton2">
</form>
<div class="tfclear"></div>
</div>

<br>
<br>

<div id="tableSalesOrder">
<table id="table">


<tr>
<th>
A
</th>
<th>
B
</th>
<th>
C
</th>
<th>
D
</th>
</tr>

<script language="javascript">
<!--

for(i =0 ;i<4 ; i++)
{
document.write('<tr>');
document.write('<td>12345</td>')
document.write('<td>34566</td>')
document.write('<td>345356</td>')
document.write('<td>Tyjhue</td>')
document.write('<td><form id="approveForm"><input type = "submit" value="ButtonA"></form></td>')
document.write('<td><form id="rejectForm"><input type = "submit" value="ButtonB"></form></td>')
document.write('<td><form id="detailForm"><input type = "submit" value="ButtonC"></form></td>')
document.write('</tr>')

}

//-->
</script>

</table>

</div>

</body>
</html>

最佳答案

包含 Jquery

    <head>
<style type="text/css">
body {padding: 20px;}
input {margin-bottom: 5px; padding: 2px 3px; width: 209px;}
td {padding: 4px; border: 1px #CCC solid; width: 100px;}
</style>
</head>
<body>
<input type="text" id="search" placeholder="Type to search">
<table id="table">
<tr> <td>Apple</td>
<td>Green</td>
</tr>
<tr> <td>Grapes</td>
<td>Green</td>
</tr>
<tr> <td>Orange</td>
<td>Orange</td>
</tr>
</table>
<script src="http://code.jquery.com/jquery-2.1.0.js"></script>
<script type="text/javascript">
var $rows = $('#table tr');
$('#search').keyup(function() {
var val = $.trim($(this).val()).replace(/ +/g, ' ').toLowerCase();

$rows.show().filter(function() {
var text = $(this).text().replace(/\s+/g, ' ').toLowerCase();
return !~text.indexOf(val);
}).hide();
});
</script>
</body>

运行代码,

关于javascript - 在 Html 中过滤表行,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/21552714/

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