用jQuery隐藏表元素
我有一个2行表-上面的一行是一列，第二行是3列。
4“表单元格”中的每个单元格都有一个图形和一个标题，并被分配给同一个类。
我希望能够单击这4个单元格中的任何一个单元格，隐藏所有4个单元格的内容，并将它们替换为单击单元格所基于的新内容。
我可以通过给每个单元格分配相同的td类(使用显示和隐藏方法)来使其工作(使用显示和隐藏方法)，但无法确定如何使单个、顶部的行单元格可单击以隐藏底部3，或单击底部3中的任意一个，并从第二行隐藏顶部行单元格和其他2。
有什么简单的方法可以用jQuery做到这一点吗？
用代码更新
很抱歉没有发布代码。我在这方面是全新的，只到目前为止，但现在明白为什么你会想看到它.：)
到目前为止我的情况是这样的。提前谢谢你的帮助。
$(document).ready(function () {
$('.box').hide().filter('.top').show();
$('.box h1').click(function () {
$(this).hide();
$(this).parent().siblings().hide();
$(this).siblings().show().last();
$(this).siblings('a.up-link').click(function () {
$(this).siblings().hide().filter('h1').show();
$(this).parent().siblings(':not(h1)').show();
$(this).remove();
});
});
});
<table width="100%" border="0" cellpadding="0">
<tr>
<td class="box top">
<h1 style="background-image:url(blue.jpg);width:275px;height:230px; background-repeat:no-repeat;">
<p class="caption-2">
Topic 1
</p>
</h1>
<div class="box">
<h1>Answer 1</h1>
</div>
</td>
</tr>
<tr>
<td class="box top">
<h1 style="background-image:url(blue.jpg);width:275px;height:230px; background-repeat:no-repeat;">
<p class="caption-2">
Topic 2
</p>
</h1>
<div class="box">
<h1>Answer 2</h1>
</div>
</td>
<td class="box top">
<h1 style="background-image:url(blue.jpg);width:275px;height:230px; background- repeat:no-repeat;">
<p class="caption-2">
Topic 3
</p>
</h1>
<div class="box">
<h1>Answer 3</h1>
</div>
</td>
<td class="box top">
<h1 style="background-image:url(blue.jpg);width:275px;height:230px; background- repeat:no-repeat;">
<p class="caption-2">
Topic 4
</p>
</h1>
<div class="box">
<h1>Answer 4</h1>
</div>
</td>
</tr>
</table>回答 2
Stack Overflow用户
发布于 2013-06-11 23:22:08
不确定这是否正是您要寻找的内容(并且它不像您使用<div>结构的其他问题的答案那样可以嵌套)，但是下面的内容将使您的主题可以点击，并在隐藏其他主题的同时揭示它们相关的答案。此外，还可以单击这些答案，然后再回过头来显示所有主题：
$(document).ready(function () {
$('td > :not(h1)').hide(); //hide the immediate children that aren't h1 of each td
$('td > h1').click(function () { //make the immediate h1 child of the td (aka the Topic) clickable
$('td > h1').hide(); //hide the topic when clicked
$(this).next('div.box').show().off('click').click(function () { //show the answer box, unbind any previous click handler, add click handler that will reset it back to the way it was
$(this).hide();
$('td > h1').show();
});
});
});Stack Overflow用户
发布于 2013-06-06 20:30:29
这只是一种方法，但却是一种强大的方法。
您可以将表放入DIV中，然后使用jQuery的.html()方法将整个Div替换为新内容。
这是一种工作的jsFiddle
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.9.1/themes/base/jquery-ui.css" />
<style>
table, tr, td {border:1px solid green;border-collapse:collapse;padding:5px 5px;}
</style>
<script type="text/javascript">
$(document).ready(function() {
$('#theTable td').click(function() {
var i = $(this).attr('id');
if (i == 'r1c3'){
$('#theDiv').html('<table id="theTable"><tr><td>Just one cell in this table</td></tr></table>');
}else{
alert('You clicked: [' + i + ']. Try clicking Row 1 Cell 3');
}
});
}); //END $(document).ready()
</script>
</head>
<body>
<div id="theDiv">
<table id="theTable">
<tr>
<td id="r1c1">Row 1, Cell 1</td>
<td id="r1c2">Row 1, Cell 2</td>
<td id="r1c3">Row 1, Cell 3</td>
</tr>
<tr>
<td id="r2c1">Row Two, Cell 1</td>
<td id="r2c2">Row Two, Cell 2</td>
<td id="r2c3">Row Two, Cell 3</td>
</tr>
</table>
</div>
</body>
</html>https://stackoverflow.com/questions/16971310
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号