<style>
table{
width: 600px;
border: solid 1px;
text-align: center;
display: none;
}
</style>
<script src="../js/jquery-1.11.1.js"></script>
<script>
$(function(){
//给添加按钮添加点击事件
$("#add").click(function(){
$("table")[0].style.display="block"; //当点击添加按钮--->table显示
$("table").addClass("current_tab");
//获取框中的值
var name= $("#name")[0].value;//$("#name")[0].
var age=$("#age").val(); //jq框中的value值 val()--->是jquery的方法
var birth=$("#birth").val();
//创建元素
var tr=$("<tr>");
//创建td
var td1=$("<td>").html(name);
var td2=$("<td>").html(age);
var td3=$("<td>").html(birth);
var td4=$("<td><button>删除</button></td>");
tr.append(td1);
tr.append(td2);
tr.append(td3);
tr.append(td4);
$("tbody").append(tr);
//隔行变色
$("tbody tr:odd").css("background-color","red");
$("tbody tr:even").css("background-color","yellow");
console.log("button--->",$("button").length);
$("td button").click(function(){
$(this).parent().parent().remove();
//隔行变色
$("tbody tr:odd").css("background-color","red");
$("tbody tr:even").css("background-color","yellow");
//查询tbody是否有内容,么有内容整个表头隐藏
var trs= $("tbody").children("tr");
if(trs.length==0){
$("table")[0].style.display="none";
}
});
});
});
</script>
</head>
<body>
姓名:<input id="name" />
年龄:<input id="age" />
生日:<input id="birth" />
<input type="button" value="添加" id="add" />
<table border="1px solid">
<thead>
<tr>
<th>姓名</th>
<th>年龄</th>
<th>生日</th>
<th> 删除</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
table{
width: 600px;
border: solid 1px;
text-align: center;
display: none;
}
</style>
<script src="../js/jquery-1.11.1.js"></script>
<script>
$(function(){
//给添加按钮添加点击事件
$("#add").click(function(){
$("table")[0].style.display="block"; //当点击添加按钮--->table显示
$("table").addClass("current_tab");
//获取框中的值
var name= $("#name")[0].value;//$("#name")[0].
var age=$("#age").val(); //jq框中的value值 val()--->是jquery的方法
var birth=$("#birth").val();
//创建元素
var tr=$("<tr>");
//创建td
var td1=$("<td>").html(name);
var td2=$("<td>").html(age);
var td3=$("<td>").html(birth);
var td4=$("<td><button>删除</button></td>");
tr.append(td1);
tr.append(td2);
tr.append(td3);
tr.append(td4);
$("tbody").append(tr);
//隔行变色
$("tbody tr:odd").css("background-color","red");
$("tbody tr:even").css("background-color","yellow");
console.log("button--->",$("button").length);
$("td button").click(function(){
$(this).parent().parent().remove();
//隔行变色
$("tbody tr:odd").css("background-color","red");
$("tbody tr:even").css("background-color","yellow");
//查询tbody是否有内容,么有内容整个表头隐藏
var trs= $("tbody").children("tr");
if(trs.length==0){
$("table")[0].style.display="none";
}
});
});
});
</script>
</head>
<body>
姓名:<input id="name" />
年龄:<input id="age" />
生日:<input id="birth" />
<input type="button" value="添加" id="add" />
<table border="1px solid">
<thead>
<tr>
<th>姓名</th>
<th>年龄</th>
<th>生日</th>
<th> 删除</th>
</tr>
</thead>
<tbody>
</tbody>
</table>