jquery表格常见问题解答_Jquery

jquery表格常见问题解答

jquery

jquery表格常见问题解答,jquery,Jquery,当我按下一个链接时，所有的td都会显示出来。按下时如何隐藏和显示每个td <head> <style type="text/css"> .details{display:none;} </style> <script type="text/javascript"> $().ready(function() { $('a.buy').click(function() { $('.details').slideTog

当我按下一个链接时，所有的td都会显示出来。按下时如何隐藏和显示每个td

    <head>

<style type="text/css">
.details{display:none;}
</style>
<script type="text/javascript">
$().ready(function() {
    $('a.buy').click(function() {
        $('.details').slideToggle('fast', function() {
        });
    });
});
</script>
<body>
<table>
    <tr>
        <td> <a class="buy" href="#">more details</a> </td> 
    </tr>
    <tr>
        <td class="details">text 1 text 1 text 1 text 1 </td>
    </tr>
        <tr>
        <td> <a class="buy" href="#">more details</a> </td> 
    </tr>
    <tr>
        <td class="details">text 2 text 2 text 2 text 2 </td>
    </tr>
        <tr>
        <td> <a class="buy" href="#">more details</a> </td> 
    </tr>
    <tr>
        <td class="details">text 3 text 3 text 3 text 3 </td>
    </tr>
</table>              

</body>
</html>


.details{显示：无；}
$（）.ready（函数（））{
$（'a.buy'）。单击（函数（）{
$（'.details'）.slideToggle（'fast'，function（）{
});
});
});
文本1文本1文本1文本1文本1文本1
文本2文本2文本2文本2文本2
文本3文本3文本3文本3文本3

$（'.details'）

使用此类寻址所有单元格。您必须特别针对您想要的目标：

$(this) // <-- this is the currently clicked link
  .closest('tr') // <-- go up until the next tr
  .next() // <-- next tr
  .find('td.details').show(); // <-- show the cell there

$('.details').hide();
// then the above

这并不是特别有性能，但它完成了任务。

您可以使用.closest（）和.find（）jquery函数来实现这一点。下面是HTML中使用

的工作示例（最佳匹配）

HTML

如何单击隐藏的

td

使其可见：D？？

<dl class="faq">
<span style="font-size: 14px; ">
<span class="Apple-style-span" style="font-family: Verdana, Geneva, sans-serif; ">
    <dt><span style="color: rgb(10, 171, 253); ">Question?</dt>

    <dd>Answer.<a class="close" href="#">Close Text</a></dd> 
</span>
</span>
</dl>

$('.faq dd').hide(); 

$('.faq dt').click(function(){ 
        $(this).next('dd').slideToggle('slow'); 
});    
$('a.close').click(function (){ $(this).parent('dd').slideUp('slow'); });