<!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=utf-8" />
<title>动态操作表格</title>
<script type="text/javascript" src="table/jquery.js"
language="javascript"></script>
<script type="text/javascript">
var count=0;
function add(){
var name=$("#name").val();
var card=$("#card").val();
var sex=$("#sex").val();
//判断只能添加二十个
if(count==20){
alert("不能再加了");
}else{
count++;
//追加
$("table").append("<tr id="+count+"><td>"+name+"</td>"+
"<td>"+card+"</td>"+"<td>"+sex+"</td>"+"<td>
<a href='javascript:del ("+count+")'>删除</a></td></tr>");
}
}
//删除
function del(row){
count--;
$("#"+row).remove();
}
</script>
<style type="text/css">
table {
border: 1px solid #00C;
border-collapse: collapse;
width: 600px;
text-align: center;
}
table tr td {
border: 1px solid #00C;
border-collapse: collapse;
width: 600px;
}
</style>
</head>
<body>
名字
<input type="text" id="name" /> 学号
<input type="text" id="card" /> 性别
<input type="text" id="sex" />
<input type="button" onclick="add()" value="添加" />
<p></p>
<table>
<tr>
<th>姓名</th>
<th>学号</th>
<th>性别</th>
<th>操作</th>
</tr>
</table>
</body>
</html>
jQuery动态添加表格
猜你喜欢
转载自lqis.iteye.com/blog/2147214
今日推荐
周排行