如何使用 Jquery 滑动切换表行？答案

【问题标题】：How to slideToggle table row using Jquery?如何使用 Jquery 滑动切换表行？
【发布时间】：2016-09-30 05:48:31
【问题描述】：

我想知道如何从脚本中滑动切换表格行。

我有一个 php 文件，该文件包含在名为“输出列表”的 div 内的 html 页面中。

PHP 文件：

<?php
function outputListingsTable()
{
    $mysql = new mysqli('localhost', 'root', 'root', 'ajax_demo') or die('you\'re dead');
    $result = $mysql->query("SELECT * FROM explore") or die($mysql->error);

    if($result) 
    {
        echo "<div class=\"main-info\"> \n";
            echo "<table class=\"listings\"> \n";
                echo "<tbody> \n";

                    while($row = $result->fetch_object()) 
                    {
                        $id = $row->id;
                        $siteName = $row->site_name;
                        $siteDescription = $row->site_description;
                        $siteURL = $row->site_url;
                        $sitePrice = $row->site_price;


                        echo "  <tr id=\"more-info-" .$id. "\" class=\"mi-" .$id. "\"> \n";
                                echo "  <td> \n";
                                echo "      <div id=\"more-" .$id. "\" class=\"more-information\"></div> \n";
                                echo "  </td> \n";
                        echo "  </tr> \n";

                        echo "  <tr id=\"main-info-" .$id. "\"> \n";
                        echo "      <td>" . $siteName . "</td> \n";
                        echo "      <td>" . $siteURL . "</td> \n";
                        echo "      <td><a id=\"link-" . $id . "\" class=\"more-info-link\" href=\"#\">More info</a></td> \n";  
                        echo "  </tr> \n";
                    }
        echo "</tbody> \n";
    echo "</table> \n";
echo "</div> \n";           

    }

}

?>

如您所见，上面的脚本创建了动态 id 和类，这让我对如何使用 Jquery 选择它们感到困惑。

这是我目前拥有的 jquery，但遗憾的是无法正常工作。

$(function() {

$("a.more-info-link").click(function() {

$("#more-info-" + this.id).load("getinfo.php").slideToggle("slow");

return false;

});

});

任何帮助都会很棒。

【问题讨论】：

标签： jquery string dynamic slider html-table

【解决方案1】：

不以行为目标，而是将内容嵌套在行内的 div 中，并将动画应用到 div。

<html>
    <head>
        <title>SandBox</title>       
    </head>
    <body>
        <table>
            <tr>
                <td>
                    <div id="divMoreInfo">
                        some text or whatever goes here.
                    </div>
                </td>
            </tr>
            <tr id="main-info-">
                <td>
                    <a id="link" href="#">More info</a>
                </td>
            </tr>
        </table>
    </body>
</html> 
<script src="js/jquery.js" type="text/jscript" ></script>
<script type="text/javascript">
    $("#link").click(function() {
        $("#divMoreInfo").slideToggle(200);
    });
</script>

【讨论】：

【解决方案2】：

$("a.more-info-link").click(function() {
    var id = $(this).attr("id").substring(4); // This extract the id from the link's id field
    $(#more-info-" + id).load("getinfo.php", function() {
        $(this).slideToggle("slow");
    }); // I suppose you want to toggle after the content was loaded? or you can keep your statement
});

看看有没有效果？

【讨论】：

这似乎不起作用，显然加载getinfo.php后存在非法字符？函数开始的地方。
也许您可以在此处发布您的“生成”html 而不是 PHP 页面。这样我们就可以更多的针对html和js本身了。