<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>form填充效果</title>
<style>
table {
background:#cccccc;
}
tr.alt td {
background:#eeeeee;
}
tr.over td {
background:#ffffff;
}
</style>
<script src="http://www.codefans.net/ajaxjs/jquery1.3.2.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
$(".fillform tr").mouseover(function(){
$(this).addClass("over");}).mouseout(function(){
$(this).removeClass("over");}).click(function(){
$(this).find("td").each(function(i){
$("form>input").eq(i).val($(this).text());
} );})
$(".fillform tr:even").addClass("alt");
//手型。
$(".fillform tr").mouseover(function(){$(this).css("cursor","hand")});
});
</script>
</head>
<body>
<!--$(".fillform tr") 产生一个点击事件 -->
<form class="form">
姓名:<input type="text"><br>
呢称:<input type="text"><br>
连接地址:<input type="text"><br>
联系方式:<input type="text"><br>
<input type="button" value="save"><br>
</form>
<table width="50%" border="0" cellspacing="0" cellpadding="0">
<thead>
<tr>
<th>姓名</th>
<th>呢称</th>
<th>地址</th>
<th>联系方式</th>
</tr>
</thead>
<tbody class="fillform">
<tr>
<td>张三</td>
<td>css</td>
<td>http://www.codefans.net</td>
<td>249834575@qq.com</td>
<td>编辑</td>
</tr>
<tr>
<td>李四</td>
<td>lisi</td>
<td>http://www.baidu.com</td>
<td>123456@qq.com</td>
<td>编辑</td>
</tr>
<tr>
<td>王五</td>
<td>wangwu</td>
<td>httP://www.qq.com</td>
<td>wuwangd@qq.com</td>
<td>编辑</td>
</tr>
</tbody>
</table>
</body>
</html> |
注册 登录
