table用JQuery插入行、刪除行

插入行、刪除行的 JavaScript代碼

function insertRow(tableid,first,last){<br />var rowNum=$("#"+tableid+" tr").length;<br />var tr1=$("#"+tableid+" tr:eq("+first+")").html();<br />alert("tr1:"+tr1);<br />$("#"+tableid+" tr:eq("+(rowNum-1-last*1)+")").after("<tr>"+tr1+"</tr>");</p><p>$("#"+tableid+" tr:eq("+(rowNum-last*1)+") input").each(function(){<br />if($(this).attr("data")=="number"){<br />$(this).val("0");<br />}else{<br />$(this).val("");<br />}<br />});<br />$("#"+tableid+" tr:eq("+(rowNum-last*1)+") select").each(function(){<br />$(this).val("");<br />});</p><p>$("#"+tableid+" tr:eq("+(rowNum-last*1)+") span").each(function(){<br />$(this).html("0");<br />});<br />$("#"+tableid+" tr:eq("+(rowNum-last*1)+") div").each(function(){<br />$(this).html("0");<br />});<br />}<br />function removeRow(tableid,obj,first,last){<br />var rowsindex=obj.parentNode.parentNode.rowIndex;<br />var rowsnum=$("#"+tableid+" tr").length;<br />var trobj=obj.parentNode.parentNode;<br />if(rowsnum*1>(first*1+last*1+1)){<br />$(trobj).remove();<br />}else{<br />alert("表格只剩最後一行不能刪除！");<br />}<br />}

以下是要插入行、刪除行的表 table

 

<table cellspacing="1" class="grayTable" id="datas" style="width:85%;"></p><p> <tr id="qcmc"><br /> <th> <!-- <input type="button" value="加" onclick="insertRow('datas',1,1)" class="addBtn" /> --></th><br /> <th width="120">品名</th><br /> <th width="60">規格</th><br /> <th width="100">單位</th><br /> <th>本單採購數</th><br /> <th>本次到貨數</th><br /> <th>已到貨數</th><br /> <th>單價(元)</th><br /> <th>總價(元)</th><br /> </tr><br /> <#assign jhze=0><br /> <#if (cgxxlist?exists) && (cgxxlist?size>0)><br /> <#list cgxxlist as c><br /> <#if !(c.shouhsl>=c.dinghsl)><br /> <#assign jhze=(jhze+c.dinghsl?default(0))*c.danjia?default(0)><br /> <tr class="dynRow" id="qcmx"><br /> <td> <input type="button" value="減" onclick="removeRow('datas',this,1,1)" class="delBtn" /></td><br /> <td><br /> ${c.fenleiByPmflid?if_exists.flname?if_exists}<br /> <input type="hidden" name="pinming" id="pinming" title="品名" data="string" bool="true" value="${c.fenleiByPmflid?if_exists.flid?if_exists}"><br /> <!--<br /> <select name="pinming" id="pinming" title="品名" data="string" bool="true" onchange="jiliankm('datas',this,'xinghao',null);setdanwei('datas',this);"><br /> <option value="">==請選擇==</option><br /> ${qcStr?if_exists}</p><p> </select><br /> --><br /> </td><br /> <td><br /> ${c.fenleiByXhflid?if_exists.flname?if_exists}<br /> <input type="hidden" name="xinghao" id="xinghao" title="型號" data="string" value="${c.fenleiByXhflid?if_exists.flid?if_exists}"><br /> <!--<br /> <select name="xinghao" id="xinghao" title="型號" data="string" onchange="setdanwei('datas',this);"><br /> <option value="${c.fenleiByXhflid?if_exists.flid?if_exists}">${c.fenleiByXhflid?if_exists.flname?if_exists}</option><br /> </select><br /> --><br /> </td><br /> <td><input type="text" name="danwei" id="danwei" title="單位" data="string" readonly="readonly" style="width:60px;border: 0;" value="${c.danwei?if_exists}"/></td><br /> <td><input type="hidden" name="dinghsl" id="dinghsl" data="number" style="width:60px;" value="#{c.dinghsl?default(0)}"/><span>${c.dinghsl?default(0)}</span></td><br /> <td><input type="text" name="bcdaohs" id="bcdaohs" data="number" onblur="retableJe(this);" max="<#if c.dinghsl?exists && c.shouhsl?exists>#{c.dinghsl-c.shouhsl}<#else>0</#if>" style="width:60px;" value="<#if c.dinghsl?exists && c.shouhsl?exists>#{c.dinghsl-c.shouhsl}<#else>0</#if>"/></td><br /> <td><input type="hidden" name="shouhsl" id="shouhsl" data="number" style="width:60px;" value="#{c.shouhsl?default(0)}"/><div id="shouhsl_div" style="display: none;" mce_style="display: none;">${c.shouhsl?default(0)}</div><span id="shouhsl_span">${c.shouhsl?default(0)}</span></td><br /> <td><input type="text" name="danjia" id="danjia" data="number" readonly="readonly" style="width:60px;border: 0;" value="<#if c.danjia?exists>${c.danjia?c}</#if>"/></td><br /> <td><input type="text" name="zongjia" id="zongjia" data="number" readonly="readonly" style="width:60px;border: 0;" style="width:60px;" /></td><br /> </tr><br /> </#if><br /> </#list><br /> <#else><br /> <!--<br /> <tr class="dynRow" id="qcmx"><br /> <td>&nbsp;<input type="button" value="減" onclick="removeRow('datas',this,1,1)" class="delBtn" /></td><br /> <td><select name="pinming" id="pinming" title="品名" data="string" bool="true" onchange="jiliankm('datas',this,'xinghao',null);setdanwei('datas',this);"><br /> <option value="">==請選擇==</option><br /> ${qcStr?if_exists}<br /> </select><br /></td><br /> <td><select name="xinghao" id="xinghao" title="型號" data="string" onchange="setdanwei('datas',this);"><br /> <option value="">==請選擇==</option><br /> </select></td><br /> <td><input type="text" name="danwei" id="danwei" title="單位" data="string" style="width:60px;" /></td><br /> <td><input type="hidden" name="dinghsl" id="dinghsl" data="number" style="width:60px;" value="0"/><span>0</span></td><br /> <td><input type="text" name="bcdaohs" id="bcdaohs" data="number" onblur="changeZj(this);" style="width:60px;" value="0"/></td><br /> <td><input type="hidden" name="shouhsl" id="shouhsl" data="number" style="width:60px;" value="0"/><div id="shouhsl_div" style="display: none;" mce_style="display: none;">0</div><span>0</span></td><br /> <td><input type="text" name="danjia" id="danjia" data="number" onblur="changeZj(this);" readonly="readonly" style="width:60px;border: 0;" value="0"/></td><br /> <td><input type="text" name="zongjia" id="zongjia" data="number" readonly="readonly" style="width:60px;border: 0;" value="0"/></td><br /> </tr><br /> --><br /> </#if></p><p> <tr id="hj"><br /> <td class="yellowBg">計劃總額</td><br /> <td>${jhze}</td><br /> <td class="yellowBg">已入庫總額</td><br /> <td id="ydhze">0</td><br /> <td class="yellowBg">本次入庫總額</td><br /> <td colspan="4" id="bdcgze">0</td><br /> </tr><br /> </table>