gpt4 book ai didi

javascript - 根据搜索文本框显示/隐藏行

转载 作者:行者123 更新时间:2023-11-29 22:29:17 24 4
gpt4 key购买 nike

我正在尝试实现以下效果,行已经出现在页面上,所以我猜是关于 jquery 语法的,但我对 jquery 还不是很聪明。

http://kobikobi.wordpress.com/2008/09/15/using-jquery-to-filter-table-rows/

它只是不工作,是的,jquery 库包含在内。

Filter: <input type="text" id="FilterTextBox" name="FilterTextBox" />
<script language="javascript" type="text/javascript">
$(document).ready(function () {
//add index column with all content.
$(".filterable tr:has(td)").each(function () {
var t = $(this).text().toLowerCase(); //all row text
$("<td class='indexColumn'></td>")
.hide().text(t).appendTo(this);
}); //each tr
$("#FilterTextBox").keyup(function () {
var s = $(this).val().toLowerCase().split(" ");
//show all rows.
$(".filterable tr:hidden").show();
$.each(s, function () {
$(".filterable tr:visible .indexColumn:not(:contains('"
+ this + "'))").parent().hide();
}); //each
}); //key up.
}); //document.ready

</script>


<table class="filterable">
<tr>
<th>
name
</th>
<th>
yearsExperienceRequired
</th>
<th>
Actions
</th>
<th>
Index Column
</th>
</tr>

@foreach (var item in Model) {
<tr class="indexColumn">
<td>
@Html.DisplayFor(modelItem => item.name)
</td>
<td>
@Html.DisplayFor(modelItem => item.yearsExperienceRequired)
</td>
<td>
@Html.DisplayFor(modelItem => item.name)
</td>
<td>
@Html.ActionLink("Edit", "Edit", new { id=item.PositionID }) |
@Html.ActionLink("Details", "Details", new { id = item.PositionID }) |
@Html.ActionLink("Delete", "Delete", new { id = item.PositionID })
</td>
</tr>
}

</table>

生成的HTML如下,

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8" />

<title>Index</title>

<link href="/Content/Site.css" rel="stylesheet" type="text/css" />



</head>

<body>

<div class="page">

<header>

<div id="title">

<h1>Eva 1.0</h1>

</div>

<div id="logindisplay">

Welcome <strong>eva</strong>!

[ <a href="/Account/Register">Register New User</a> ]

[ <a href="/Account/LogOff">Log Off</a> ]

[ <a href="/Account/ChangePassword">Change Password</a> ]





</div>



<nav>

<ul id="menu">

<li> <a href="/">DashBoard</a></li>

<li> <a href="/Position">Positions</a> </li>

<li> <a href="/UserPositionPosition/Position">Prospects</a> </li>

<li> <a href="/UserPositionPosition/Position">Prospect History</a> </li>

<li> <a href="/UserPositionPosition/Position">Technical Interview</a> </li>

<li> <a href="/UserPositionPosition/Position">Manager Interview</a> </li>

<li> <a href="/UserPositionPosition/Position">Current Employees</a> </li>

<li> <a href="/UserPositionPosition/Position">Current Employees History</a> </li>

</ul>

</nav>

</header>

<section id="main">









<h2>Index</h2>



<p>

<a href="/Position/Create">Create New</a>



</p>



Filter: <input type="text" id="FilterTextBox" name="FilterTextBox" />

<script language="javascript" type="text/javascript">

$(document).ready(function () {

//add index column with all content.

$(".filterable tr:has(td)").each(function () {

var t = $(this).text().toLowerCase(); //all row text

$("<td class='indexColumn'></td>").hide().text(t).appendTo(this);

}); //each tr

$("#FilterTextBox").keyup(function () {

var s = $(this).val().toLowerCase().split(" ");

//show all rows.

$(".filterable tr:hidden").show();

$.each(s, function () {

$(".filterable tr:visible .indexColumn:not(:contains('"+ this + "'))").parent().hide();

}); //each

}); //key up.

}); //document.ready


</script>





<table class="filterable">

<tr>

<th>

name

</th>

<th>

Years of Experience Required

</th>

<th>

Index Column

</th>

<th>

Actions

</th>

</tr>



<tr class="indexColumn">

<td>

.net developer

</td>

<td>

5

</td>

<td>

.net developer

</td>

<td>

<a href="/Position/Edit/1">Edit</a> |

<a href="/Position/Details/1">Details</a> |

<a href="/Position/Delete/1">Delete</a>

</td>

</tr>

<tr class="indexColumn">

<td>

java developer

</td>

<td>

5

</td>

<td>

java developer

</td>

<td>

<a href="/Position/Edit/2">Edit</a> |

<a href="/Position/Details/2">Details</a> |

<a href="/Position/Delete/2">Delete</a>

</td>

</tr>



</table>



</section>

<footer>

</footer>

</div>

<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.6.4.min.js" type="text/javascript"></script>





<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.9/jquery.validate.min.js" type="text/javascript"></script>

<script src="http://ajax.aspnetcdn.com/ajax/mvc/3.0/jquery.validate.unobtrusive.min.js" type="text/javascript"></script>



</body>

</html>

最佳答案

当我在 JS bin 中测试您的代码时,一切正常。

http://jsbin.com/ipobiz

您可以在右上角编辑它。

他确实警告过你的换行符

$(".filterable tr:visible .indexColumn:not(:contains('" 
+ this + "'))").parent().hide();

你但这可能是因为我只是从这里复制粘贴了代码。

可能的修复

  • 您以前的 javascript 文件可能已被缓存。尝试按 CTRL + F5 完全刷新所有内容。
  • 尝试将您的代码与您的 View 分开,然后再试一次,因为这似乎在这里工作得很好。
  • 在此函数中添加一个 alert(t);console(t);:

这将显示放入 IndexColumn 中的值。如果他没有显示您的任何值,那么您的 jquery 中的 for each 有问题。

$(".filterable tr:has(td)").each(function () { 
var t = $(this).text().toLowerCase(); //all row text
//alert(t); or console(t); here
$("<td class='indexColumn'></td>")
.hide().text(t).appendTo(this);
});

关于javascript - 根据搜索文本框显示/隐藏行,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/7821438/

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