jquery不能够对js产生的动态表格行进行高亮显示的问题（鼠标移上去）的解决方案
 |
mamaoyuan625
2009-08-22
jquery不能够对js产生的动态表格行进行高亮显示的问题
网上大部分是解决静态的数据，也就数预先在页面上写一些数据，在进行高亮显示，但是实际开发中，数据都是动态产生的， 不可能是静态数据。现在仅仅是解决 行高亮显示 其他的如排序等 以后再测试 下边是 <script src="script/jquery-1.2.6.js" type="text/javascript"></script> jquer的异步请求 $(document).ready( function() {
$("#bt").click( function() {
$.ajax( {
type :"post",
url :"send.do?method=query2",
data :null,
success : function(data) {
$("#t1_body").empty();
var ul = eval('(' + data + ')');
for ( var i = 0; i < ul.length; i++) {
var tr = $("<tr></tr>");
var td = $("<td></td>");
var td1 = $("<td></td>");
var td2 = $("<td></td>");
td.append(ul[i].id);
td1.append(ul[i].age);
td2.append(ul[i].name);
tr.append(td);
tr.append(td2);
tr.append(td1);
$("#table1").append(tr);
} }
});
}
);
//现在鼠标移上去 开始变颜色 移出时还原，这也是网上99% 的table的行高亮显
//示的答案， 问题就出在这儿
$("table tr").mouseover(function(){$(this).addClass("over")}),
$("table tr").mouseout(function(){$(this).removeClass("over")});
});
解决方案： $("#bt").click( function() {});
函数function中 第一步：ajax请求 得到服务器端的数据 产生动态表格 第二步：重要
$.getScript("script/jquery-1.2.6.js", function(){
$("table tr").mouseover(function(){$(this).addClass("over")}),
$("table tr").mouseout(function(){$(this).removeClass("over")});
});
先加载js文件 然后再mouseover 或out 具体原因还在研究中 开始本人测试是把mouseover和out放到ready 的function中，结果起作用的是原来页面静态数据，动态产生的数据没有起作用
css <style type="text/css">
th {
background: #8889AD;
color: #FFFFFF;
line-height: 20px;
height: 30px;
}
td {
padding: 6px 11px;
border-bottom: 1px solid #95bce2;
vertical-align: top;
text-align: center;
}
tr.over td {
background: #94A274; /*这个将是鼠标高亮行的背景色*/
}
html代码 <body> <link rel="stylesheet" href="flora/flora.all.css" type="text/css" media="screen" title="Flora (Default)"> <h3 align="center"> jquery Ajax </h3> <hr> <label> 请输入用户名 ： </label> <input id="account" name="account" type="text"> <input id="bt" name="bt" type="button" value="检测"> <div class="hint"> <table id="table1" align="center" width="70%" border="0" cellpadding="3" cellspacing="0" borderColor="#cccccc" bgcolor="#efefef"> <thead> <tr> <th> Age </th> <th> Name </th> <th> ID </th> </tr> </thead> <tbody> <tr> <td> 1 </td> <td> 2 </td> <td> 3 </td> </tr> </tbody> </table> </div> </body>
|
 |
風一樣的男子
2009-09-08
$("table tr").mouseover(function(){$(this).addClass("over")}),
$("table tr").mouseout(function(){$(this).removeClass("over")}); 放到 $.ajax 的 success 里面看看 |
|
mamaoyuan625
2009-09-10
解决办法：
var tr = $("<tr onmouseover=$(this).addClass('over') onmouseout=$(this).removeClass('over')></tr>"); 即可 |
