<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表格的删除和添加</title>
<script type="text/javascript" src="jquery-1.8.3.min.js"></script>
</head>
<body>
<table border="1px" width="500px" id="ss">
<tr>
<th>姓名</th>
<th>大小</th>
<th>性别</th>
<th>操作</th>
</tr>
<tr>
<td>小强</td>
<td>B</td>
<td>男</td>
<td><button onclick="fun(this)">删除</button></td>
</tr>
<tr>
<td>大熊</td>
<td>F</td>
<td>男</td>
<td><button onclick="fun(this)">删除</button></td>
</tr>
<hr>
<form action="" method="post" onsubmit="return func()">
<table border="1px" width="500px">
<tr>
<td>姓名</td>
<td><input type="text" name="uname">
</td>
</tr>
<tr>
<td>大小</td>
<td><input type="text" name="size"></td>
</tr>
<tr>
<td>性别</td>
<td><input type="text" name="sex"></td>
</tr>
<tr>
<td><input type="submit" value="提交"></td>
<td><input type="reset" value="重置"></td>
</tr>
</table>
</form>
</table>
</body>
<script type="text/javascript">
// 删除
function fun(ob){
$(ob).parents("tr").remove();
}
function func(){
// alert(‘sss‘);
//获取value值
uname=$("input[name=‘uname‘]").val();
size=$("input[name=‘size‘]").val();
sex=$("input[name=‘sex‘]").val();
//把uname size sex 的值 添加到tr里面
str="<tr>";
str+="<td>"+uname+"</td>";
str+="<td>"+size+"</td>";
str+="<td>"+sex+"</td>";
str+="<td><button onclick=‘fun(this)‘>删除</button></td>";
str+="</tr>"
// alert(str);
// 把含有数据的天亮内部插入到第一个table里
$("#ss").append(str); //找到选择对象追加到对象里面
return false;
}
</script>
</html>