您的位置：首页 > Web前端 > JQuery

Jquery实现表格行的添加、删除

2014-01-15 13:32 429 查看

<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<script type="text/javascript">
var rowCount=1;  //行数默认4行

//添加行
function addRow(){
rowCount++;
var newRow='<tr id="option'+rowCount+'"><td>选项'+rowCount+'：</td><td><input type="text"></td><td><a href="#" onclick=addRow()>添加一行</a></td><td><a href="#" onclick=delRow('+rowCount+')>删除</a></td></tr>';
$('#tableID').append(newRow);
}

//删除行
function delRow(rowIndex){
$("#option"+rowIndex).remove();
rowCount--;
}

</script>
</head>
<body>
<div>
<table cellpadding="0" cellspacing="0" style="width:450px;" id="tableID">

<tr id="option1">
<td>选项1:</td>
<td>
<input type="text">
</td>
<td><a href="#" onclick=addRow()>添加一行</a></td>
<td><a href="#" onclick=delRow(1)>删除</a></td>
</tr>

</table>
<div style="text-align: center;">
<a href="#" onclick="addRow()">添加一行</a>
</div>
</div>
</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航