<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<script type="text/javascript" src="../../../jquery-1.7.js"></script>
</head>
<body>
<table border="1" id="tableAdd">
<tr align="center">
<td width="100px;">展馆</td>
<td width="100px;">展位类型</td>
<td width="100px;">数量</td>
<td width="100px;">
<input type="button" value="新增" id="addRow"/>
</td>
</tr>
</table>
</body>
</html>
<script type="text/javascript">
$(document).ready(function(){
var rowNum=0;
//新增行
$("#addRow").bind("click",function(){
rowNum +=1;
var rowHtml="";
rowHtml +="<tr id='"+rowNum+"'>";
rowHtml +="<td>"+rowNum+"</td>";
rowHtml +="<td></td>";
rowHtml +="<td></td>";
rowHtml +="<td>";
rowHtml +="<input type=\"button\" value=\"删除\" name=\"deleteRow\" οnclick=\"deleteRow("+rowNum+")\" />";
rowHtml +="</td>";
rowHtml +="</tr>";
//alert(rowHtml)
$("#tableAdd").append(rowHtml);
})
})
//删除行
function deleteRow(num){
$("#addRow").parent().parent().parent().find("#"+num).remove();
}
</script>
table表的行的增加和删除
最新推荐文章于 2024-09-06 11:26:45 发布