js DOM添加删除

最新推荐文章于 2022-04-26 21:54:58 发布

彦4212

最新推荐文章于 2022-04-26 21:54:58 发布

阅读量205

点赞数

本文链接：https://blog.csdn.net/qq_40089806/article/details/78690641

版权

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
body{
width:750px;
margin: 0 auto;
}
table{
align-content: center;
width: 100%;
border: 1px;
}
th,td{
border: 1px solid;
}

</style>

<script src="js/jquery-1.11.1.js"></script>

<script>
function shan(e){
$(e).parent().parent().remove();
}

function zeng(){

var tr=$("<tr></tr>"); //使用jquery创建元素tr

//获取输入框的内容
var ins= $("input[name='in']");
/**
* 获取所有输入框的内容
*/
for(var i=0;i<ins.length;i++){
var td=$("<td></td>");
td.text(ins[i].value);
//把创建td元素放入tr
tr.append(td);
}

tr.append("<td><button οnclick='shan(this)'>删除</button></td>"); //append,识别html标签
//向table中添加一行数据
$("table").append(tr);
}

</script>
</head>
<body>

<br>
<br>
<form>
用户名<input type="text" name="in" />
密码: <input type="password" name="in" />
邮箱 <input type="email" name="in" />

<input type="button" οnclick="zeng()" value="保存" />
</form>

<br>

<table>
<tr>
<th>用户名</th>
<th>密码</th>
<th>邮箱</th>
<th>操作</th>
</tr>
</table>
</body>
</html>