0

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

我有一个 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;

});

});

任何帮助都会很棒。

4

2 回答 2

2

不是以行为目标，而是将内容嵌套在行内的 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>
于 2009-07-11T02:57:01.833 回答
0 
$("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
});

看看有没有效果？

于 2009-07-11T02:51:48.427 回答