<html>
<head runat="server">
<title>javascript如何动态添加附带移除功能的行</title>
</head>
<body>
<form id="form1" runat="server">
<div style="text-align:center; padding:100px; border:solid 1px yellow;">
<table id="tb_ThreeKingdom" border="1" style="border: solid 1px blue;">
<caption>三国群英传</caption>
<thead>
<tr>
<td style="width: 37px">
姓名</td>
<td style="width: 37px">
统率</td>
<td style="width: 37px">
操作</td>
</tr></thead>
<tbody>
<tr>
</tbody>
</table>
<table>
<tbody>
<tr>
<td>
姓名</td>
<td>
<select id="selName">
<option>周瑜</option>
<option>孙策</option>
<option>吕蒙</option>
<option>陆逊</option>
</select>
</td>
<td>
统率</td>
<td>
<input type="text" id="txtInput" style="width: 41px" value="97" /></td>
<td>
<input type="button" id="btnInsert" value="添加" οnclick="insertItem()" /></td>
</tr>
</tbody>
</table>
</div>
</form>
</body>
</html>
<script language="JavaScript" type="text/javascript">
//向表格插入行
function insertItem()
{
var objTable = document.all["tb_ThreeKingdom"];
var newRow = document.createElement("tr"); //新建一个row
for(var i=0;i<3;i++)
{
var newCell = document.createElement("td"); //新建一个cell
if (i == 0) //第一格
{
var selectedName = document.getElementById("selName").options[document.getElementById("selName").selectedIndex].text;
var newText = document.createTextNode(selectedName);
newCell.appendChild(newText);
}
else if (i==1) //第二格
{
var txtInput = document.getElementById("txtInput").value;
var newText = document.createTextNode(txtInput);
newCell.appendChild(newText);
}
else
{
//创建第三个CELL的innerHTML
var innerHTML = "<input type='button' value='移除' οnclick='removeItem(this,/"tb_ThreeKingdom/")' />";
newCell.innerHTML = innerHTML;
}
newRow.appendChild(newCell); //把新建的一个cell附加到row
}
objTable.getElementsByTagName("tbody")[0].appendChild(newRow); //把新建的row附加到table
}
//删除表格中的行
function removeItem(obj,id)
{
var currentRow = obj.parentNode.parentNode; //获取当前行
eval("document.all['"+id+"']").deleteRow(currentRow.rowIndex); //删除当前行
}
</script>
809
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
