<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>元素操做</title>
<style type="text/css">
p{
text-align: center;
}
table{
margin: 0 auto;
width: 500px;
}
table,tr,td{
border: 1px solid black;
border-collapse: collapse;
text-align: center;
}
</style>
<script src="../js/jquery-3.3.1.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
/*
* $(html)
*/
function addItem(){
//获取table
var $tb = $("#tb1");
//获取表示行的节点
var $line = $("<tr></tr>");
//创建存放姓名的单元格
var $tdName=$("<td></td>");
//创建表单中的姓名
var $txtName=$("#username").val();
$tdName.text($txtName);
//创建存放年龄的单元格
var $tdAge =$("<td></td>");
//创建年龄
var $txtAge=$("#age").val();
//设置内容
$tdAge.text($txtAge);
//创建存放电话的单元格
var $tdTel =$("<td></td>");
//创建电话
var $txtTel=$("#tel").val();
//设置内容
$tdTel.text($txtTel);
//创建存放删除按钮的单元格
var $tdDel = $("<td></td>");
var $btnDel = $("<button>删除</button>");
$btnDel.prop("type","button");
//为删除按钮设置单击事件,删除所在行
$btnDel.click(function(){
$(this).parent().parent().remove();
});
//将按钮放入单元格
$tdDel.append($btnDel);
//在行中追加元素
$line.append($tdName);
$line.append($tdAge);
$line.append($tdTel);
$line.append($tdDel);
//将行追加到table
$tb.append($line);
}
$(function(){
$("#btnAdd").click(function(){
addItem();
})
});
</script>
</head>
<body>
<div id="main">
<div id="divform">
<form method="post">
<p>
<label >姓名</label>
<input type="text" id="username" />
</p>
<p>
<label>年龄</label>
<input type="text" id="age" />
</p>
<p>
<label>电话</label>
<input type="text" id="tel" />
</p>
<p>
<button type="button" id="btnAdd">添加</button>
</p>
</form>
</div>
<hr />
<div id="divtable">
<table id="tb1">
<tr>
<td>姓名</td>
<td>年龄</td>
<td>电话</td>
<td>操作</td>
</tr>
</table>
</div>
</div>
</body>
</html>