jquery如何对js动态产生的表格行高亮显示

前几天本人在用jquery的时候， 鼠标移到table上的td时，所在的行高亮显示其他颜色，网上很多例子，包括官方的例子也只是针对页面上的静态数据，但是实际开发中我们操作的数据确实动态产生的，于是作了个测试，始终不行，在查资料，对js动态产生的表格数据，关于这方面的资料太少了，即使有网友提到这方面的也说不能操纵动态的。可能是本人的道行不够吧，花了些时间，终于做出来了

 

<script src="script/jquery-1.2.6.js" type="text/javascript"></script>
		<script language="javascript">
	$(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);
					}
				}
			});

			$.getScript("script/jquery-1.2.6.js", 
				function() {
					 $("table tr").mouseover( function() {$(this).addClass("over")}),
					 $("table tr").mouseout( function() {$(this).removeClass("over")
				});
			});
		});	
		});
</script>

 以前是把

 $("table tr").mouseover( function() {$(this).addClass("over")}),
 $("table tr").mouseout( function() {$(this).removeClass("over")

 放到ready的function中和click是并行的，

如：

<script language="javascript">
	$(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);
					}
				}
			});

});	

$("table tr").mouseover( function() {$(this).addClass("over")}),
 $("table tr").mouseout( function() {$(this).removeClass("over")
		});

 而且没有

 $.getScript("script/jquery-1.2.6.js",
    function() {}）；

这样的话只要是动态产生的表格数据，鼠标移到上面却不起作用，起作用的是原来页面上的静态数据。

现在要把

$.getScript("script/jquery-1.2.6.js",
function() {
$("table tr").mouseover( function() {$(this).addClass("over")}),
$("table tr").mouseout( function() {$(this).removeClass("over")
});
});
放到click的function中，在ajax之后

具体原理本人现在还在研究中。

 

项目随后下载

评论

7 楼 mamaoyuan625 2009-09-08  

在网友的提示下，终于做出来了，

$.getScript("script/jquery-1.2.6.js",
function() {
$("table tr").mouseover( function() {$(this).addClass("over")}),
$("table tr").mouseout( function() {$(this).removeClass("over")
});
});

这段代码都可以省略掉，
在创建tr时

var tr = $("<tr onmouseover=$(this).addClass('over') onmouseout=$(this).removeClass('over')></tr>");

即可 ，感谢各位

6 楼 dancewhyw 2009-09-04  

这个只是针对ie6
高于这个版本的浏览器 或者火狐之类的浏览器
直接用css的伪类就可以实现高亮了

除ie6以外的浏览器，你用css控制
比如你的over样式是红色
.over { background-color:red; }
写成
.over, table tr:hover { background-color:red; }

注意 tr:hover

这样效率最高，只不过ie6不支持 ，所以要写下针对ie6及以下版本的js代码

5 楼 mamaoyuan625 2009-09-03  

各位网友提到的方法，把
if ($.browser.msie&&$.browser.version<7.0){
$('tr', '#table1').each(function(){
    $(this).hover(
        function(){$(this).addClass('over');},
        function(){$(this).removeClass('over');}
    });
}



放到for里面



我都试了，不知道是什么原因，确实没有成功！

4 楼 mamaoyuan625 2009-09-03  

谢谢各位同道中人 ，jquery，我也才开始学习没多久，谢谢赐教

3 楼 dancewhyw 2009-09-03  

不好意思，前面面少写了each - -b

if ($.browser.msie&&$.browser.version<7.0){
$('tr', '#table1').each(function(){
    $(this).hover(
        function(){$(this).addClass('over');},
        function(){$(this).removeClass('over');}
    });
}

楼主试试吧

2 楼 dancewhyw 2009-09-03  

上面排版造成一点小错误
function(){$(this).removeClass('over');}

1 楼 dancewhyw 2009-09-03  

根本不需要这么麻烦
除ie6以外的浏览器，你用css控制
比如你的over样式是红色
.over { background-color:red; }
写成
.over, table tr:hover { background-color:red; }

你动态生成的数据

                    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);
                        if ($.browser.msie&&$.browser.version<7.0){
                            $('tr', '#table1').hover(
                                function(){$(this).addClass('over');},
                                function(){$(this).removeClass('over'}
                            );
                        }
                    }