增加删除行

最新推荐文章于 2023-05-30 19:39:52 发布

原创最新推荐文章于 2023-05-30 19:39:52 发布 · 234 阅读

0 ·

CC 4.0 BY-SA版权

知识点积累专栏收录该内容

16 篇文章

订阅专栏

本文介绍了一种使用JavaScript进行表格操作的方法，包括增加和删除行的功能。通过克隆隐藏的表格模板并将其添加到显示的表格中来实现行的增加，而删除操作则是找到指定的行并从表格中移除。

//被操作模板
<table id="hiddenYSOtherFeeDiv">
<tr>
<td height="21" align="center" bgcolor="#FFFFFF" class="Text12Blue">
<span>0</span>
</td>
<td align="center" bgcolor="#FFFFFF">
<input type="text" name="otherSum" class="Input80_18" value="" style="text-align:right"/>
</td>
<td align="center" bgcolor="#FFFFFF">
<input type="text" name="otherMemo" class="Input350_18" value=""/>
</td>
<td align="center" bgcolor="#FFFFFF" width="90">
<input type="button" class="common_btn" value="删除" onclick="commonDelete();"/>
</td>
</tr>
</table>
//显示块
<table width="100%" border="0" cellpadding="0" cellspacing="1" bgcolor="#BDD9FF" id="hotelYSOtherFeeTable">
<tr>
<td width="200" height="24" align="center" bgcolor="#E0ECFA" class="Text12Blue">应收序号</td>
<td width="100" align="center" bgcolor="#E0ECFA" class="Text12Blue">应收金额</td>
<td width="350" align="center" bgcolor="#E0ECFA" class="Text12Blue">备注</td>
<td width="90" align="center" bgcolor="#E0ECFA" class="Text12Blue">
<input type="button" value="增加" class="common_btn" onclick="addOrderYSOtherFeeTR();"/>
</td>
</tr>
</table>

//增加操作
//增加应收附加费条
function addOrderYSOtherFeeTR(){
var template = document.getElementById("hiddenYSOtherFeeDiv");
var copyTable = template.cloneNode(true);
var templateTR = copyTable.children(0).children(0);
var aimObj = document.getElementById("hotelYSOtherFeeTable");
aimObj.children(0).appendChild(templateTR);

}

//删除操作
//删除方法提取
function commonDelete(){
var Elm = event.srcElement;
while (Elm && Elm.tagName != "TR") {
Elm = Elm.parentElement;
}
var intThisIndex = Elm.rowIndex;
Elm.parentElement.deleteRow(intThisIndex);
}