<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>创建表及删除</title>
<style type="text/css">
table{
width: 400px;
text-align: center;
}
</style>
<script src="js/jquery-1.11.1.min.js"></script>
<script>
$(function(){
//点击事件后
$("#tj").click(function(){
//获取输入框
var name=$("#name").val();
var age=$("#age").val();
var bir=$("#bir").val();
//在创建新的一行
var mtr=$("<tr></tr>");
var mtd1=$("<td></td>").html(name);
var mtd2=$("<td></td>").html(age);
var mtd3=$("<td></td>").html(bir);
var mtd4=$("<td><button>删除</button></td>");
//将每一列添加到这一行
mtr.append(mtd1);
mtr.append(mtd2);
mtr.append(mtd3);
mtr.append(mtd4);
//将这一行添加到表中
$("table").append(mtr);
//点击删除按钮时,找到tr删除
$("td button").click(function(){
$(this).parent().parent().remove();
})
});
})
</script>
</head>
<body>
姓名:<input type="text" id="name" />
年龄:<input type="text" id="age" />
生日:<input type="text" id="bir" />
<button id="tj">添加</button>
<table border="1px">
<tr>
<td>姓名</td>
<td>年龄</td>
<td>生日</td>
<td>操作</td>
</tr>
</table>
</body>
</html>
<html>
<head>
<meta charset="UTF-8">
<title>创建表及删除</title>
<style type="text/css">
table{
width: 400px;
text-align: center;
}
</style>
<script src="js/jquery-1.11.1.min.js"></script>
<script>
$(function(){
//点击事件后
$("#tj").click(function(){
//获取输入框
var name=$("#name").val();
var age=$("#age").val();
var bir=$("#bir").val();
//在创建新的一行
var mtr=$("<tr></tr>");
var mtd1=$("<td></td>").html(name);
var mtd2=$("<td></td>").html(age);
var mtd3=$("<td></td>").html(bir);
var mtd4=$("<td><button>删除</button></td>");
//将每一列添加到这一行
mtr.append(mtd1);
mtr.append(mtd2);
mtr.append(mtd3);
mtr.append(mtd4);
//将这一行添加到表中
$("table").append(mtr);
//点击删除按钮时,找到tr删除
$("td button").click(function(){
$(this).parent().parent().remove();
})
});
})
</script>
</head>
<body>
姓名:<input type="text" id="name" />
年龄:<input type="text" id="age" />
生日:<input type="text" id="bir" />
<button id="tj">添加</button>
<table border="1px">
<tr>
<td>姓名</td>
<td>年龄</td>
<td>生日</td>
<td>操作</td>
</tr>
</table>
</body>
</html>