<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>table添加一行、删除一行</title>
<style>
input{
border: none;
outline: none;
}
button{
margin:4px;
border:1px solid #75a60e;
border-radius: 4px;
padding:2px 6px;
background-color: 75a60e;
color: wheat;
}
table td input{
100%;
padding:4px;
}
</style>
<script type="text/javascript" src="lib/jquery-1.7.1.js"></script>
<script type="text/javascript">
function addTr(){
var trHtml="<tr align='center'><td width='30%'><input type='checkbox' name='ckb'/></td><td width='30%'><input type='text' /></td><td width='30%'><input type='text' /></td></tr>";
var $tr=$('#tab tr').eq(0);
$tr.after(trHtml);
if ($('#emptyTr').size() !== 0) {
$('#emptyTr').remove();
}
}
function delTr(){
var ckbs=$("input[name=ckb]:checked");
if(ckbs.size()==0){
alert("先选中要删除的行！");
return;
}
ckbs.each(function(){
$(this).parent().parent().remove();
});
//当全部删除时添加一个提示信息
if($("input[name=ckb]").size() == 0){
var emptyTr = '<tr align="center" id="emptyTr"><td colspan="3"style="color: green;">暂无数据</td></tr>';
$('#tab tr').eq(0).after(emptyTr);
$('#allCheck').attr('checked',false);
}
}
function allCheck(){
if ($('#allCheck').is(':checked')) {
$('input[name=ckb]:checkbox').attr("checked", true );
}else{
$('input[name=ckb]:checkbox').attr("checked", false );
}
}
</script>
</head>
<body>
<button onclick="addTr()">添加</button>
<button onclick="delTr()">删除</button>
<table border="1px" id="tab" cellpadding="2" cellspacing="0" width="90%">
<tr align="center">
<td width="30%"><input id="allCheck" type="checkbox" onclick="allCheck()" /></td>
<td width="30%">科目</td>
<td width="30%">成绩</td>
</tr>
<tr align="center" id="emptyTr">
<td colspan="3" style="color: green;">暂无数据</td>
</tr>
</table>
</body>
</html>