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>jQuery鼠标移动表格变色及修改单元格值</title></head><body><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"/> <title>jq sort</title> </head> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript"> $(document).ready(function(){//鼠标移到tr上变色$("table tr").mouseover(function(){$(this).css("background","#FFCCCC");});$("table tr").mouseout(function(){$(this).css("background","");});//点击tr行时把单元格内容负值到文本框中var tr;$("table tr").click(function(){tr = $(this);$("#id1").val($(this).find("td:eq(0)").text());$("#id2").val($(this).find("td:eq(1)").text());$("#id3").val($(this).find("td:eq(2)").text());});$("#bt1").click(function(){if(tr!=null){tr.find("td:eq(0)").text($("#id1").val());tr.find("td:eq(1)").text($("#id2").val());tr.find("td:eq(2)").text($("#id3").val());}});}); </script> 姓名:<input id="id1" type="text" value="测试">性别:<input id="id2" type="text" value="人妖">年龄:<input id="id3" type="text" value="9999"><input id="bt1" type="button" value="修改" /><table width="481" height="97" border="1"> <tr align="center" bgcolor="#FFCCCC"> <th width="134" height="23" scope="col">姓名</th> <th width="121" scope="col">性别</th> <th width="204" scope="col">年龄</th> </tr> <tr align="center"> <td>张三</td> <td>男</td> <td>20</td> </tr> <tr align="center"> <td>小红</td> <td>女</td> <td>19</td> </tr> <tr align="center"> <td>星等</td> <td>男</td> <td>21</td> </tr> <tr align="center"> <td>李四</td> <td>男</td> <td>17</td> </tr></table><p> </p></body></html>?