js 动态增加和删除 table 行 .-CSDN博客

html代码：

<table style="width:800px" id="table1" name="table1">
<tr>
<td align="center" style="width:80px">
<span style="white-space:pre"> </span>工作序号
<td align="center" style="width:480px">
<span style="white-space:pre"> </span>工作任务名称及工作内容
</td>
<td align="center" style="width:100px">
完成情况(%)
</td>
<td align="center" style="width:140px">
未完成原因
</td>
</tr>
<tr>
<td align="center" style="width:80px">
<input type="hidden" id="bma005" name="bma005" value="<s:property value="BMA005"/>"/>
<input type="text" id="bma006" name="bma006" value="<s:property value="BMA006"/>" style="width:80px" readonly />
<input type="hidden" id="bma012" name="bma012"/>
<input type="hidden" id="bma013" name="bma013"/>
</td>
<td style="width:480px">
<div>
<font size="2"> 任务名称</font>
<span style="white-space:pre"> </span><input type="text" id="bma007" name="bma007" value="<s:property value="BMA007"/>" style="width:340px"/>
</div>
<div>
<font size="2"> 工作内容</font>
<span style="white-space:pre"> </span><textarea rows="2" cols="40" style="width:340px" id="bma008" name="bma008"><s:property value="BMA008"/></textarea>
</div>
</td>
<td align="center" style="width:100px">
<input type="text" id="bma010" name="bma010" value="<s:property value="BMA010"/>" maxlength="20" style="width:100px"/>
</td>
<td align="center" style="width:140px">
<span style="white-space:pre"> </span> <input type="text" id="bma011" name="bma011" maxlength="8" value="<s:property value="BMA011"/>" maxlength="200" style="width:140px"/>
<td>
</tr>
<tr>
<td align="right" colspan="4">
<span style="white-space:pre"> </span><input type="button" id="btn_add_row" name="btn_add_row" value="添加行" onclick="btnAddRow1()"/>
<input type="button" id="btn_delete_row" name="btn_delete_row" value="删除行" onclick="btnDeleteRow1()"/>
</td>
</tr>
</table>

js代码：

//添加行

function btnAddRow1()
{
var rownum=$("#table1 tr").length-2;
//第一个td
var hidd1="<input type='hidden' id='bma005' name='bma005' value='11'/>";
var text1="<input type='text' id='bma006' name='bma006'value="+(rownum+1)+" style='width:80px;' readonly/>";
var hidd2="<input type='hidden' id='bma012' name='bma012'/>";
var hidd3="<input type='hidden' id='bma013' name='bma013'/>";
//第二个td
var div1="<div><font size='2'> 任务名称</font> <input type='text' id='bma007' name='bma007' style='width:340px'/></div>";
var div2="<div><font size='2'> 工作内容</font> <textarea rows='2' cols='40' style='width:340px' id='bma008' name='bma008'></textarea></div>";
//第三个td
var text2="<input type='text' id='bma010' name='bma010' style='width:100px'/>";
//第四个td
var text3="<input type='text' id='bma011' name='bma011' maxlength='8' style='width:140px'/>";
var row="<tr><td>"+hidd1+text1+hidd2+hidd3+"</td><td>"+div1+div2+"</td><td>"+text2+"</td><td>"+text3+"</td></tr>";
$(row).insertAfter($("#table1 tr:eq("+rownum+")"));
};