如何使用Jquery slideToggle表行？ [英] How to slideToggle table row using Jquery?
本文介绍了如何使用Jquery slideToggle表行？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我想知道如何从我的脚本中滑动一个表格行。
I was wondering how I can slideToggle a table row from my script.
我有一个php文件，包含在一个名为'output - 列表'。
I have a php file that is included in an html page inside a div called 'output-listings'.
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。
As you can see the script above creates dynamic id's and classes which confuses me on how to select them with Jquery.
这是我迄今为止的jquery，但不能伤心地工作。
Here is the jquery that I have so far, but does not work sadly.
$(function() {
$("a.more-info-link").click(function() {
$("#more-info-" + this.id).load("getinfo.php").slideToggle("slow");
return false;
});
});
任何帮助都会很棒。
推荐答案
而不是定位该行，将内容嵌套在行内的div中，并将动画应用于div。 p>
Instead of targeting the row, nest the content in a div inside the row and apply the animation to the 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>
这篇关于如何使用Jquery slideToggle表行？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
