HTML表格动态添加行
本文介绍了一个简单的HTML页面，该页面使用JavaScript实现了一个功能，即允许用户通过点击按钮来动态地向表格中添加新行。表格包含ID、用户名、用户类型和其他信息等字段。
<!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=utf-8" />
<style type="text/css">
body{background:#FFFFFF;}
</style>
<script type="text/javascript">
function add(){
var oTr = document.getElementById("addtr").rows[1];
var newTr = oTr.cloneNode(true);
document.getElementById("addtr").getElementsByTagName("tbody")[0].appendChild(newTr);
newTr.cells[0].firstChild.value = newTr.rowIndex;
document.getElementById("b1").disabled = newTr.rowIndex ==5 ;
}
</script>
</head>
<body>
<input type="button" id="b1" value="添加一行" onclick="add()" />
<table width="700" border="0" cellspacing="0" cellpadding="0" id="addtr">
<tr>
<td height="30" align="center" bgcolor="#CCCCCC">ID</td>
<td align="center" bgcolor="#CCCCCC">Username</td>
<td align="center" bgcolor="#CCCCCC">Usertype</td>
<td align="center" bgcolor="#CCCCCC">Other</td>
</tr>
<tr>
<td height="30" align="center"><input type="text" size="2" value="1" /></td>
<td align="center"><input type="text" name="username" /></td>
<td align="center">
<select name="type">
<option value="1">Administrator</option>
<option value="2">Guest</option>
</select>
</td>
<td align="center"><input type="text" name="username2" /></td>
</tr>
</table>
</body>
</html>
扫一扫
230
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
