<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>table</title>
<script type="text/javascript" src="../../jQuery v1.7.2.js"></script>
<script type="text/javascript">
$(function(){
$("tbody tr").click(function(){
$(this).find("td").each(function(i){
$("form>input").eq(i).val($(this).text());
});
});
// $(".edit").click(function(){
// $("tbody tr").find("td").each(function(i){
// $("form>input").eq(i).val($(this).text());
// });
// });
// 上面两段代码的后面那段没有效果,总是显示表格第一行
$("tbody tr").find("td:last").mouseover(function(){
$(this).css("cursor","pointer")
});
});
</script>
<style type="text/css">
td { text-align:center; line-height:20px;}
</style>
</head>
<body>
<form class="form">
姓名:<input type="text"><br>
呢称:<input type="text"><br>
连接地址:<input type="text"><br>
联系方式:<input type="text"><br>
<input type="button" value="编辑"><br>
</form>
<table width="50%" border="1" cellspacing="0" cellpadding="0">
<thead>
<tr>
<th>姓名</th>
<th>呢称</th>
<th>地址</th>
<th>联系方式</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr>
<td>张三</td>
<td>zhangsan</td>
<td>www.baidu.com</td>
<td>000000@qq.com</td>
<td class="edit">编辑1</td>
</tr>
<tr>
<td>李四</td>
<td>lisi</td>
<td>www.sina.com</td>
<td>111111@qq.com</td>
<td class="edit">编辑2</td>
</tr>
<tr>
<td>王五</td>
<td>wangwu</td>
<td>www.qq.com</td>
<td>222222@qq.com</td>
<td class="edit">编辑3</td>
</tr>
<tr>
<td>赵六</td>
<td>zhaoliu</td>
<td>www.javaeye.com</td>
<td>333333@qq.com</td>
<td class="edit">编辑4</td>
</tr>
</tbody>
</table>
</body>
</html>
没注释掉的JQ代码可以达到效果,注释掉的那段不行。为什么呢?
<tr>
<td kk="1">张三</td>
<td kk="1" >zhangsan</td>
<td kk="1" >www.baidu.com</td>
<td kk="1" >000000@qq.com</td>
<td class="edit">编辑1</td>
</tr>
$("td.edit").click(function(){
$("[kk=1]").each(function(){.....);
});
版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。