码迷,mamicode.com
首页 > 其他好文 > 详细

表格的删除和添加

时间:2017-06-25 16:16:53      阅读:163      评论:0      收藏:0      [点我收藏+]

标签:false   parent   java   姓名   pos   uname   第一个   value   onclick   

<!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>

表格的删除和添加

标签:false   parent   java   姓名   pos   uname   第一个   value   onclick   

原文地址:http://www.cnblogs.com/kevin-yang520/p/7076949.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!