通过HTML / PHP页面中的嵌套手风琴可排序和隐藏信息?

时间:2015-09-29 15:10:48

标签: javascript php jquery html jquery-ui

所以我试图用PHP在sql server中显示数据。我正在使用我在网上找到的可排序库,这是我的代码:

 echo "<table id='report' class='sortable'>";
        echo "<thead><tr>";
            echo "<th>A</th>";
            echo "<th>B</th>";
            echo "<th>C</th>";
            echo "<th>D</th>";
            echo "<th>E</th>";
            echo "<th>F</th>";
            echo "<th>G</th>";
            echo "<th>H</th>";
            echo "<th>I</th>"; 
        echo "</tr></thead>";
        echo "<tbody>";

        for($i=0; $i<$tablerows; $i++)
        {                
            echo "<tr>";
                echo "<td>".$result[$i]['A']."</td>";
                echo "<td>".$result[$i]['B']."</td>";
                echo "<td>".$result[$i]['C']."</td>";
                echo "<td>".$result[$i]['D']."</td>";
                echo "<td>".$result[$i]['E']."</td>";
                echo "<td>".$result[$i]['F']."</td>";
                echo "<td>".$result[$i]['G']."</td>";
                echo "<td>".$result[$i]['H']."</td>";
                echo "<td>".$result[$i]['I']."</td>";
                echo "<td><div class='arrow'></div></td>";
            echo "</tr>";  
            echo "<tr>";
                echo "<td colspan='5'>";
                echo "<div id='nestedAccordion'>";
                    echo "<h2>COLUMN 1 ELABORATE</h2>";
                        echo "<div>";
                        echo "</div>";
                    echo "<h2>COLUMN 2 ELABORATE</h2>";
                        echo "<div>";
                        echo "</div>";
                    echo "<h2>COLUMN 3 ELABORATE</h2>";
                        echo "<div>";
                        echo "</div>";
                    echo "<h2>COLUMN 4 ELABORATE</h2>";
                        echo "<div>";
                        echo "</div>";
                    echo "<h2>COLUMN 5 ELABORATE</h2>";
                        echo "<div>";
                        echo "</div>";
                echo "</div>";
                echo "</td>";
            echo "</tr>";

加载页面后,可以按<th>标记中的A-I标题对其进行排序。如你所见,在我的'for'循环中,我的最后一个标签有一个箭头。我希望如此,如果用户想要有关该行的更多信息,他可以通过单击该箭头查看该信息,并且将显示的信息位于:<td colspan='5'>

这是javascript / jquery:

$(document).ready(function () {
    $("#report tr:odd").addClass("odd");
    $("#report tr:not(.odd)").hide();
    $("#report tr:first-child").show();
    $(".arrow").click(function(){
        $(this).parents("tr").next("tr").toggle();
        $(this).toggleClass("up");
    });

    var parentDivs = $('#nestedAccordion div'),
    childDivs = $('#nestedAccordion h3').siblings('div');
    $('#nestedAccordion h2').click(function () {
        parentDivs.slideUp();
        if ($(this).next().is(':hidden')) {
            $(this).next().slideDown();
        } else {
            $(this).next().slideUp();
        }
    });

    $('#nestedAccordion h3').click(function () {
        childDivs.slideUp();
        if ($(this).next().is(':hidden')) {
            $(this).next().slideDown();
        } else {
            $(this).next().slideUp();
        }
    });
});

我遇到的问题和问题只能是桌子或箭头可以排序。当我加载页面时,我点击箭头查看更多信息我可以查看它,但如果我后来排序,箭头下的数据将被视为自己的行而不是从中选择的行的一部分。 如果我在开始时排序,然后单击箭头,则隐藏下面的行。我认为问题在于这段代码:

$(".arrow").click(function(){
    $(this).parents("tr").next("tr").toggle();
    $(this).toggleClass("up");
});

因为下一个tr是针对colspan的吗?但我该如何解决呢?

0 个答案:

没有答案