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