jQuery鼠标挪动表格变色及修改单元格值

jQuery鼠标移动表格变色及修改单元格值

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>&nbsp;</p>
</body>
</html>

jQuery鼠标挪动表格变色及修改单元格值

相关推荐