【转】js table 添加行删除行复制行

最新推荐文章于 2021-08-21 16:43:24 发布

转载最新推荐文章于 2021-08-21 16:43:24 发布 · 3.4k 阅读

文章标签：

#table #input #class #button #delete #border

JavaScript 专栏收录该内容

4 篇文章

订阅专栏

本文介绍了一个详细的订单表单设计，包括商品类别、编号、昵称等字段，并提供了添加、复制和删除行的功能。通过JavaScript实现了动态操作表格，方便用户进行订单管理。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <title>无标题文档</title> </head> <body> <table cellspacing="1" cellpadding="1" border="0" width="100%" id="detailItem"> <tbody id="detailItemBody"> <tr> <td nowrap="" width="8%" class="td1">Item</td> <td nowrap="" width="8%" class="td1">Item No</td> <td nowrap="" width="10%" class="td1">Nickname</td> <td nowrap="" width="10%" class="td1">Cleats / Flat</td> <td nowrap="" width="18%" class="td1">Upper / Out</td> <td nowrap="" width="8%" class="td1">Size</td> <td nowrap="" width="8%" class="td1">Qty</td> <td nowrap="" width="10%" class="td1">Net Price</td> <td nowrap="" width="10%" class="td1">Actual Price</td> <td nowrap="" width="10%" class="td1">Amount Price</td> <td width="10%" class="td1">Action</td> </tr> <tr id="tr1"> <td width="8%" id="td1"> <input type="hidden" name="SampleOrderContentID"/> <select name="Category" id="Category1"> <option value=""/> <option value="GOLF">GOLF</option> <option value="RUNNING">RUNNING</option> <option value="RACING">RACING</option> <option value="BASEBALL">BASEBALL</option> <option value="INDOOR">INDOOR</option> <option value="VOLLEYBALL">VOLLEYBALL</option> <option value="TABLE TENNIS">TABLE TENNIS</option> <option value="SOCCER">SOCCER</option> <option value="FUTSAL">FUTSAL</option> <option value="RUGBY">RUGBY</option> <option value="BASKETBALL">BASKETBALL</option> <option value="BADMINTON">BADMINTON</option> <option value="T&F">T&F</option> <option value="TENNIS">TENNIS</option> <option value="HANDBALL">HANDBALL</option> <option value="WALKING">WALKING</option> <option value="EXPERT">EXPERT</option> <option value="TRAINIG">TRAINIG</option> <option value="OTHER">OTHER</option> <option value="SCHOOL">SCHOOL</option> <option value="SPORTS CASUAL">SPORTS CASUAL</option> <option value="MATERIAL">MATERIAL</option> </select> </td> <td nowrap="" width="8%"><input type="text" size="8" name="ItemNo" id="ItemNo1"/></td> <td nowrap="" width="10%"><input type="text" size="10" name="Nickname" id="Nickname1"/></td> <td nowrap="" width="10%"><input type="text" size="8" name="Cleats" id="cleats1"/></td> <td nowrap="" width="18%"> <select name="Upper" id="Upper1"> <option value=""/> <option value="UTL">UTL</option> <option value="UTH">UTH</option> <option value="UPL">UPL</option> <option value="UPH">UPH</option> <option value="URL">URL</option> <option value="URH">URH</option> <option value="ULL">ULL</option> <option value="ULH">ULH</option> <option value="TEXTILE">TEXTILE</option> <option value="PLASTIC">PLASTIC</option> <option value="RUBBER">RUBBER</option> <option value="LEATHER">LEATHER</option> <option value="Syn.Leather">Syn.Leather</option> </select> / <select name="Sole" id="Sole1"> <option value=""/> <option value="SPF">SPF</option> <option value="SPC">SPC</option> <option value="SRF">SRF</option> <option value="SRC">SRC</option> <option value="SLF">SLF</option> <option value="SLC">SLC</option> <option value="RUBBER">RUBBER</option> <option value="P.U.">P.U.</option> <option value="NYLON">NYLON</option> <option value="LEATHER">LEATHER</option> <option value="EVA">EVA</option> </select> </td> <td nowrap="" width="8%"><input type="text" onkeyup="value=value.replace(/[^/d/.]/g,'')" size="4" name="Size" id="Size1"/></td> <td nowrap="" width="8%"><input type="text" onkeyup="value=value.replace(/[^/d/.]/g,'')" onblur="CalculateTotal()" size="4" name="Qty" id="Qty1"/></td> <td nowrap="" width="10%"><input type="text" onkeyup="value=value.replace(/[^/d/.]/g,'')" size="4" name="NetPrice" id="NetPrice1"/></td> <td nowrap="" width="10%"><input type="text" onkeyup="value=value.replace(/[^/d/.]/g,'')" onblur="CalculateTotal()" size="4" name="ActualPrice" id="ActualPrice1"/></td> <td nowrap="" width="10%"><input type="text" size="4" name="AmountPrice" id="AmountPrice1"/></td> <td nowrap="" width="10%">  <input type="button" onclick="addOrderRow('detailItemBody',2,11,this,'add')" value="Add" id="btnAdd1" name="btnAdd"/> <input type="button" onclick="addOrderRow('detailItemBody',2,11,this,'copy')" value="Copy" id="btnCopy" name="btnCopy"/> <input type="button" onclick="addOrderRow('detailItemBody',2,11,this,'delete')" value="Delete" id="btnDelete" name="btnDelete" style="visibility:hidden "/></td> </tr> </tbody> </table> <table cellspacing="1" cellpadding="1" width="100%" border="0"> <tbody> <tr> <td width="8%"/> <td width="8%"/> <td width="10%"/> <td width="10%"/> <td width="18%"/> <td width="8%" class="td1">Total</td> <td width="8%"><input type="text" size="4" name="TotalQty"/></td> <td width="10%"/> <td width="10%"/> <td width="10%"><input type="text" size="4" name="TotalAmountPrice"/></td> <td width="10%"/> </tr> <tr> <td class="td1" colspan="11"> Remark </td> </tr> <tr> <td colspan="11"> <textarea id="Remark" rows="4" cols="100" name="Remark"></textarea> </td> </tr> </tbody> </table> <script type="text/javascript"> function addOrderRow(tab,rowNum,colNum,obj,addType) { var detailbody=document.getElementById(tab); var row = document.createElement("tr"); var newrow=obj.parentNode.parentNode.innerHTML; if(addType=='add'){ var row = detailbody.insertRow(); for(var i=0;i<obj.parentNode.parentNode.childNodes.length;i++){ var cell=row.insertCell(); cell.innerHTML=obj.parentNode.parentNode.childNodes[i].innerHTML; //如果表单中有值就清空 for(var k=0;k<cell.childNodes.length;k++){ if (cell.childNodes[k].type == 'text') { cell.childNodes[k].value = ''; } if (cell.childNodes[k].type == 'textarea') { cell.childNodes[k].value = ''; } if (cell.childNodes[k].type == 'checkbox') { cell.childNodes[k].checked = false; } if (cell.childNodes[k].type == 'radio') { cell.childNodes[k].checked = false; } if (cell.childNodes[k].type == 'select-multiple') { cell.childNodes[k].selectedIndex = -1; } if (cell.childNodes[k].type == 'select-one') { cell.childNodes[k].selectedIndex = -1; } } //cell.innerHTML=arr[i]; } }else if(addType=='copy'){ //copy //detailbody.insertRow().insertCell().innerHTML = newrow; ok var row = detailbody.insertRow(); for(var i=0;i<obj.parentNode.parentNode.childNodes.length;i++){ var cell=row.insertCell(); cell.innerHTML=obj.parentNode.parentNode.childNodes[i].innerHTML; } }else{ //delete if(confirm("Are you sure to delete this record?")){ obj.parentNode.parentNode.parentNode.removeChild(obj.parentNode.parentNode); }else{ return false; } } //只显示最后一个add按钮 var leg = detailbody.childNodes.length; if(leg>1){ for(var j=0;j<leg-2;j++){ document.getElementsByName("btnAdd")[j].style.visibility="hidden"; } document.getElementsByName("btnAdd")[leg-2].style.visibility="visible"; //document.getElementsByName("btnDelete")[0].style.visibility="hidden"; } //显示除第一个外所有delete按钮 if(leg>1){ for(var j=1;j<leg-1;j++){ document.getElementsByName("btnDelete")[j].style.visibility="visible"; } } } </script> </body> </html>

原文地址：http://helloxuweifu.javaeye.com/blog/421955