jquery对表格的各项事件操作
Posted 柴鹏举
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了jquery对表格的各项事件操作相关的知识，希望对你有一定的参考价值。
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>demo6.html</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
<script type="text/javascript" ></script>
<script type="text/javascript">
$(function(){
//通过事件委派的方式给所有按钮绑定点击事件 on(events,[selector],[data],fn)
$("#table").on("click","button",function(){
//判断按钮的功能来完成相应的业务。获取action属性值为：add的情况
if($(this).attr("action")=="add"){
$("#table").append("<tr align='center'><td><input type='text'></td><td><input type='text'>"+
"</td><td><input type='text'></td><td><input type='text'></td>"+
"<td><button action='del'>删除</button></td></tr>");
}else if($(this).attr("action")=="del"){
//this 不就是所谓按钮
$(this).parent().parent().remove();
}
});
$("#table").on("blur","input",function(){
var v = $(this).val();
$(this).parent().html(v);
//$(this).remove();
});
$("#table tbody").on("dblclick","td",function(e){
if($(this).not($(this).has("button"))[0]){
var text = $(this).html();
$(this).html("<input type='text' value='"+text+"'>");
}
});
});
</script>
</head>
<body>
<table id="table" align="center" border="1" width="80%">
<caption><br/>信息登记表<br/><br/></caption>
<thead>
<tr align="center">
<td colspan="4"> </td>
<td>
<button action="add">添加</button>
</td>
</tr>
<tr>
<th width="18%">序号</th>
<th width="18%">姓名</th>
<th width="18%">性别</th>
<th width="18%">年龄</th>
<th width="8%">操作</th>
</tr>
</thead>
<tbody>
<tr align="center">
<td>1</td>
<td>mike</td>
<td>boy</td>
<td>20</td>
<td>
<button action="del">删除</button>
</td>
</tr>
<tr align="center">
<td>2</td>
<td>mary</td>
<td>girl</td>
<td>18</td>
<td>
<button action="del">删除</button>
</td>
</tr>
<tr align="center">
<td>3</td>
<td>alis</td>
<td>girl</td>
<td>30</td>
<td>
<button action="del">删除</button>
</td>
</tr>
</tbody>
</table>
</body>
</html>
以上是关于jquery对表格的各项事件操作的主要内容，如果未能解决你的问题，请参考以下文章