Question

我已经尝试了一个多星期的时间来点击'更多信息'按钮时点击一个表行，但似乎没有任何工作。

我是Jquery的新手，所以如果有人可以帮我滑动'more-info-1'，'more-info-2'，'more-info-3'tr标签。主要的问题是这些id是通过php动态创建的，我不明白如何在Jquery中选择它们 - 比如使用'more-info-'或其他东西。

我希望它像这个例子一样工作： Here当然减去iframe。

用户将点击“更多信息”按钮，然后'more-info-'tr将向下滑动。

以下是页面源代码:(我不知道如何在Stack OverFlow上正确插入HTML，是否有一种特殊的方式 - 代码按钮无法正常使用HTML）

    html

div id="output-listings"

    div class="main-info"

        table class="listings"

            tbody

                    tr id="more-info-1" class="mi-1"

                        td

                        div id="more-1" class="more-information"/div

                        /td

                    /tr

                    tr id="main-info-1"

                        tdLeftlane News/td

                        tdwww.leftlanenews.com//td

                        tda id="link-1" class="more-info-link" href="#"More info/a/td

                    /tr

                    tr id="more-info-2" class="mi-2"

                        td

                        div id="more-2" class="more-information"/div

                        /td

                    /tr

                    tr id="main-info-2"

                        tdMotor Authority/td

                        tdwww.motorauthority.com/ /td

                        tda id="link-2" class="more-info-link" href="#"More info/a/td

                    /tr

                    tr id="more-info-3" class="mi-3"

                        td

                        div id="more-3" class="more-information"/div

                        /td

                    /tr

                    tr id="main-info-3"

                        tdAutoblog/td

                        tdhttp://www.autoblog.com//td

                        tda id="link-3" class="more-info-link" href="#"More info/a/td

                    /tr

            /tbody

        /table

    /div

/div!--end output-listings--

/html

我非常感谢你的帮助。

Answer 1

虽然craig的响应有效，但您可以限制代码并允许jquery在特定范围内获取所有TR元素，并按照他的建议解析出id等。

$(".listings tbody tr").each(function(index) {
    // hide by default
    $(this).css({'display': 'none'});


    // set the onclicks
    $(this).click(function() {
      // your dosomething can change your appearance
      dosomething(the_id_you_parse_out);
    });
});

不确定那是否正常工作代码，我只是把它放在一起，这样你就可以得到如何使用jquery的选择器的要点。

Answer 2

从快速浏览一下，看起来你想要这样的东西。

$('#link-1').click(function(){
    $('#more-info-1').slideToggle()
})

您还可以通过更改类的设置方式，或通过让内部函数解析单击的链接数并将其提供给内部jQuery调用来概括此脚本以使用这三个脚本：

$('.more-info-link').click(function(){
    var id = $(this).attr('id');
    var num = id.substr(id.length-1,1);
    $('#more-info-'+num).slideToggle();
})

Answer 3

为了防止trs显示，可以向他们添加style ='display：none'。

Answer 4

根据您是否需要为元素分配特定ID以用于其他目的，您实际上可以执行此操作而无需提供个人ID。

在这个例子中，在加载时我们首先隐藏任何具有可切换类的tr。然后我们告诉jQuery跳过几个级别的dom，然后隐藏下一个tr - 这就不需要调用id了。

示例jQuery：

$(document).ready(function(){

$("#tableToggle tr.toggleable").hide();

$("#tableToggle .tableToggleButton").click(function(){
    $(this).parent().parent().next('tr').slideToggle();                                                 
});

});

示例修改表：

<table id="tableToggle">
<tbody>
<tr>
<td><div class="tableToggleButton">More info 1</div></td>
</tr>
<tr class="toggleable">
<td>Main info 1</td>
</tr>
<tr>
<td><div class="tableToggleButton">More info 1</div></td>
</tr>
<tr class="toggleable">
<td>Main info 1</td>
</tr>
</tbody>
</table>

Answer 5

由于jquery代码通常只在DOM准备就绪时才会执行，所以即使你的js代码隐藏它，如果你最初不使用CSS来隐藏它，你也总会看到TR只有一毫秒。

所以这里的大多数贡献者可能都回答了你的问题。我想补充一点，你最初可以使用CSS隐藏TR，然后使用JS来完成剩下的工作。

一个好的经验法则是仅使用CSS尝试获取“默认”网页浏览，然后使用jquery代码添加丰富的功能。或者至少那就是我要做的事情。

使用Jquery滑动表格行

5 个答案: