php,jquery做的一个下拉显示的效果有点问题问问大家
文件如下
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title></title><style> .list{list-style-type:none;} .list li{line-height:30px;border-bottom:1px #666 dashed; } .list li a{color:#666;text-decoration:none;} .list li a:hover{color:#F90;} div{background-color:#DDEBF0;} .table { text-align:center; line-height:20px;font-size:12px; color:#000000;/*表格内字的颜色*/ border:1px solid #c0d3d9;/*表格的外边框及颜色*/ background-color:#dcebee;/*整个表格背景颜色*/ padding:1 2 1 2;/*表格内的四个边距离，上右下左*/}.table tr {height:20px;border:0px;} .table td {border:1px solid #c0d3d9;} .table a{ text-decoration:none; color:#000;}.table a:hover{ color:#d36d1b; text-decoration:none;} </style><script src="js/jquery-1.5.2.min.js" type="text/javascript"></script> <script> $(document).ready(function(){ //点击每个li中a的时候触发事件$(".list li a").click(function (evt){ //在jquery中阻止默认事件evt.preventDefault(); //阻止超链接跳转 var t=$(this);//jquery中关于数据存储，取出存储在超链接上的数据 contentvar div =t.data("content"); //如果说取到数据了，下拉显示出来if(div){ //使用slideToggle来动态的显示/隐藏divdiv.slideToggle("slow"); }else{//如果没有取到，则创建一个div,并且让div显示到超链接的后面 //创建一个超链接div=$("<div></div>"); //创建完了div以后，先把div保存到超链接上t.data("content",div); //给div添加内容div.html("<img src=\"images/ajax-loader-eeeeee.gif\"> Loading......."); //显示到超链接的后面去t.after(div); //获取原来的div的高度var oh=div.height(); //先把新创建的div进行隐藏div.hide(); //怎么样才能向div中插入新查询的数据div.load(t.attr("href"),function(){ //获取新的高度var nh=div.height();//把当前的div的高度设置为以前的高度div.height(oh); //执行动画效果，让高度从oh变到nhdiv.animate({height:nh},"slow"); }); //先把新创建的div隐藏后再进行显示，目的就是要个优美的滑动效果div.show("slow"); } }); }); </script></head> <body><ul class="list"><li><a href="20120331jquery-ajax-caidan-server.php?id=1">11111111</a> <table width="80%" border="0" cellpadding="0" cellspacing="0" class="table" > <tr> <td>标题</td> <td>标题</td> <td>标题</td> <td>标题</td> <td>标题</td> <td>标题</td> <td>标题</td> <td>标题</td> </tr> <tr> <td><a href="20120331jquery-ajax-caidan-server.php?id=1">文字内容</a></td> <td>文字内容</td> <td>文字内容</td> <td>文字内容</td> <td>文字内容</td> <td>文字内容</td> <td>文字内容</td> <td>文字内容</td> </tr> </table></li><li><a href="20120331jquery-ajax-caidan-server.php?id=2">222222222</a></li><li><a href="20120331jquery-ajax-caidan-server.php?id=3">3333333333</a></li><li><a href="20120331jquery-ajax-caidan-server.php?id=4">44444444444</a></li><li><a href="20120331jquery-ajax-caidan-server.php?id=5">55555555555</a></li><li><a href="20120331jquery-ajax-caidan-server.php?id=6">66666666666</a></li> </ul></body></html>
请看一下截图，我点22222或3333的连接后出现的php输出的内容直接显示在22222或33333上面，我想在上面的那个表格输出中，点击显示的内容在<tr>
<td><a href="20120331jquery-ajax-caidan-server.php?id=1">文字内容</a></td>
<td>文字内容</td>
<td>文字内容</td>
<td>文字内容</td>
<td>文字内容</td>
<td>文字内容</td>
<td>文字内容</td>
<td>文字内容</td>
</tr>
这个TR下面输出，不知道这个样式该怎么改。
效果如图
[解决办法]
样式不用改
用jquery，我不知你提到的22222 3333是什么连接，假如是个a标签，你得加个标识符例如id="myTest"
只需触发点击事件
$("#Test").click(function(){
var myContent = "<td>this is a test</td><td>文字内容222</td>";
$("table").append(myContent);
})
试一下