Wil*_*der 10 javascript html-table
我有一张桌子,列出了吉他店里的商品 - 每排都包含一件商品.每一行(以及每件商品)都是新的,二手的或寄售的.我希望用户能够单击侧栏UL中的链接(单击"新建","已使用"或"缺点"),并且只有相应条件的表行保持可见.因此,如果用户单击"已使用",则所有New和Cons行都将隐藏.
我用一些简单的JavaScript做了这个工作,但它使用的getElementByID对我来说不起作用,因为我需要用类来识别TR.所以这就是我难倒的地方.我不确定如何使用类来完成这项工作.
这是我到目前为止所解决的解决方案:
<html>
<head>
<script>
function used() {
document.getElementById("new").style.display = 'none';
document.getElementById("cons").style.display = 'none';
document.getElementById("used").style.display = '';
}
function news() {
document.getElementByClass("new").style.display = '';
document.getElementById("cons").style.display = 'none';
document.getElementById("used").style.display = 'none';
}
function cons() {
document.getElementByClass("new").style.display = 'none';
document.getElementById("cons").style.display = '';
document.getElementById("used").style.display = 'none';
}
</script>
</head>
<body>
<span onClick="used();">Used</span><br />
<span onClick="news();">New</span><br />
<span onClick="cons();">Cons</span><br /><br />
<table border="1">
<tr id="used">
<td>Used</td>
</tr>
<tr id="new">
<td>New</td>
</tr>
<tr id="cons">
<td>Cons</td>
</tr>
</table>
</body>
</html>
上面的代码工作正常,如果我可以让它与类一起工作,它将解决我的迫切需要.但是,最终我还想扩展它以用于品牌 - 这样用户就可以点击一个品牌并只查看该品牌的帖子.在那种情况下,我可能在表中有20或30个品牌,因此上述情况并不理想.此外,这最终将存在于Wordpress网站中,理想情况下,我会从wordpress中的元数据创建每个品牌的类,同样创建一个包含切换表格的品牌的动态UL,以及具有可以工作的js解决方案变化的变量集!所以我知道我上面所说的并不是最好的方法,但它是我现在唯一能够尝试的方法.
对于上述内容的帮助将非常受欢迎 - 因为当我向更具挑战性的品牌方面迈进时,我将如何更有效地做到这一点的建议.
编辑:
谷歌帮助了我,我有了新的方向 - 这可能解决了我的问题:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<title>Sandbox</title>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<style type="text/css" media="screen">
</style>
</head>
<body>
<ul class="side-nav">
<li><a class="cond" href="#">Show all</a></li>
<li><a class="used" href="#">Used</a></li>
<li><a class="new" href="#">New</a></li>
<li><a class="cons" href="#">Cons</a></li>
</ul>
<table>
<tr class="cond used">
<td>A Used Item</td>
<td>Used.</td>
</tr>
<tr class="cond new">
<td>A New Item</td>
<td>New</td>
</tr>
<tr class="cond cons">
<td>A Cons Item</td>
<td>Cons</td>
</tr>
</table>
<script>
$(function()
{
$('ul.side-nav a').click(function()
{
$('tr.cond').hide();
$('tr.' + $(this).attr('class')).show();
});
});
</script>
</body>
</html>
One*_*One 15
document.getElementsByClassName返回一个NodeList,而不是单个元素,我建议使用jQuery,因为你只需要使用类似的东西$('.new').toggle()
或者如果你想要普通的JS试试:
function toggle_by_class(cls, on) {
var lst = document.getElementsByClassName(cls);
for(var i = 0; i < lst.length; ++i) {
lst[i].style.display = on ? '' : 'none';
}
}
JQuery 10.1.2具有很好的显示和隐藏功能，可以封装您正在谈论的行为。这样可以省去编写新函数或跟踪CSS类的麻烦。
$("new").show();
$("new").hide();