Question

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

我有一个php文件，它包含在名为'output-listings'的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;

});

});

任何帮助都会很棒。

Answer 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>

Answer 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
});

看看它是否有效？

如何使用Jquery slideToggle表行？

2 个答案: