Javascript 我如何筛选“a”；“标记”；HTML表中没有迭代的行子集？
我有一个CGI脚本，它以任意顺序生成一个包含任意多行的HTML表 每行是一个或多个子集的成员，共有26个子集（26代表一个小的相对常数） 当我生成页面时，我知道每行属于哪些子集，并且可以以任何必要的方式标记它们 然后，我希望在页面上提供26个按钮，用户可以使用这些按钮中的任何一个来将表过滤到该行子集。行的显示顺序相对于彼此而言是重要的，但是隐藏不属于用户希望查看的子集的行不会丢失任何信息 第一个优先级是过滤的计算是在客户端完成的，而不是在服务器端，客户端不会重新请求页面，因为页面的大小很大，服务器正在忙于做其他事情。（读作：Javascript，对吗？）页面不是经常被请求的，但是通常会为每个页面请求请求许多过滤操作 第二个优先级是尽可能高效地完成客户端过滤。数据集非常大 第三个优先事项是尽可能广泛的浏览器互操作性 如果你还不知道的话，我根本不是一个网络程序员Javascript 我如何筛选“a”；“标记”；HTML表中没有迭代的行子集？,javascript,html,Javascript,Html,我有一个CGI脚本，它以任意顺序生成一个包含任意多行的HTML表 每行是一个或多个子集的成员，共有26个子集（26代表一个小的相对常数） 当我生成页面时，我知道每行属于哪些子集，并且可以以任何必要的方式标记它们 然后，我希望在页面上提供26个按钮，用户可以使用这些按钮中的任何一个来将表过滤到该行子集。行的显示顺序相对于彼此而言是重要的，但是隐藏不属于用户希望查看的子集的行不会丢失任何信息 第一个优先级是过滤的计算是在客户端完成的，而不是在服务器端，客户端不会重新请求页面，因为页面的大小很大，服务
我最初尝试将每个标记表示为一个CSS类，根据需要为每行分配多个类，然后使用JavaScript修改CSS定义，但这开始让我头疼。如果这是可行的，我就不太清楚了。我不能在更大的数据集上测试它，但如果出现问题（如以某种方式对数据集进行分块等），解决任何问题都不会太困难 我怀疑这里是否存在任何真正的性能问题——如果您的浏览器能够显示这些问题，但这只是一个猜测。如果数据太大，您应该考虑对其进行分页。或者，如果用户请求，允许筛选轮询服务器以获取更多信息。向用户展示一大堆文本很少是一个好的可用性决策 您必须在浏览器上测试，但我看不出任何浏览器问题 话虽如此，我希望下面的内容能为您提供一个例子（可以在这方面发挥作用）。这不是非常有效，但应该给你一个想法。另外-
匹配<html>
<body>
<table id="table" style="width: 200px; text-align: center;">
<tr style="border: 1px gray dashed;" class="1"><td>1</td></tr>
<tr style="border: 1px gray dashed;" class="2 4"><td>2 4</td></tr>
<tr style="border: 1px gray dashed;" class="3"><td>3</td></tr>
<tr style="border: 1px gray dashed;" class="4 5"><td>4 5</td></tr>
<tr style="border: 1px gray dashed;" class="5"><td>5</td></tr>
<tr style="border: 1px gray dashed;" class="3"><td>3</td></tr>
<tr style="border: 1px gray dashed;" class="4"><td>4</td></tr>
<tr style="border: 1px gray dashed;" class="5 1"><td>5 1</td></tr>
</table>
<button onClick="show('1')">1</button>
<button onClick="show('2')">2</button>
<button onClick="show('3')">3</button>
<button onClick="show('4')">4</button>
<button onClick="show('5')">5</button>
<button onClick="reset()">Reset</button>
<script>
var table = document.getElementById( 'table' );
function show( className )
{
reset();
for( var i = 0, l = table.rows.length; i < l; i++ )
{
var row = table.rows[i];
if( !row.className.match( className ) )
{
row.style.visibility = 'hidden';
}
}
}
function reset()
{
for( var i = 0, l = table.rows.length; i < l; i++ )
{
var row = table.rows[i];
row.style.visibility = 'visible';
}
}
</script>
</body>
</html>
1.
2 4
3.
4 5
5.
3.
4.
5 1
1.
2.
3.
4.
5.
重置
var table=document.getElementById（'table'）；
函数显示（类名）
{
重置（）；
for（var i=0，l=table.rows.length；i也许有人可以对ie6-7做点什么，如果这很重要的话
<!DOCTYPE html>
<html>
<body>
<style>
#table tr { display: none }
#table.all tr { display: table-row }
#table.bar tr.bar { display: table-row }
#table.foo tr.foo { display: table-row }
</style>
<input type="button" value="Foo" onclick="filter('foo')">
<input type="button" value="Bar" onclick="filter('bar')">
<table id="table" class="all">
<tr class="foo"><td>1</td></tr>
<tr class="bar"><td>2</td></tr>
<tr class="foo bar"><td>3</td></tr>
</table>
<script type="text/javascript">
var table = document.getElementById('table')
function filter (cat) {
table.className = cat
}
</script>
</body>
</html>
#表tr{显示：无}
#table.all tr{显示：表行}
#table.bar tr.bar{显示：表行}
#table.foo tr.foo{display:table row}
1.
2.
3.
var table=document.getElementById（'表'）
功能过滤器（cat）{
table.className=cat
}
jQuery.show（）.hide（）他们不接受
表行显示块{display:block；display:table row}display:nonedisplay:table rowvisibility:collapsevisibility:visibility<tr class="category1">
...
</tr>
<div id="toggleButtons">
<a href="#" class="category1">Hide Category 1</a>
</div>
$(function(){
$("#toggleButtons a").click(function(){
$("tr." + $(this).attr("class")).hide();
}, function(){
$("tr." + $(this).attr("class")).show();
});
});