所以我试图用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的吗?但我该如何解决呢?