js-表格(table)添加列、删除列
功能图片截图如下:
一、Js代码如下:
<script language= "javascript" type= "text/javascript" > function findObj(theObj, theDoc) { var p, i, foundObj; if (!theDoc) theDoc = document; if ((p = theObj.indexOf( "?" )) > 0 && parent.frames.length) { theDoc = parent.frames[theObj.substring(p + 1)].document; theObj = theObj.substring(0, p); } if (!(foundObj = theDoc[theObj]) && theDoc.all) foundObj = theDoc.all[theObj]; for (i = 0; !foundObj && i < theDoc.forms.length; i++) foundObj = theDoc.forms[i][theObj]; for (i = 0; !foundObj && theDoc.layers && i < theDoc.layers.length; i++) foundObj = findObj(theObj, theDoc.layers[i].document); if (!foundObj && document.getElementById) foundObj = document.getElementById(theObj); return foundObj; } //添加一个列 count = 1; function AddNewColumn() { var txtTDLastIndex = findObj( "txtTDLastIndex" , document); var columnID = parseInt(txtTDLastIndex.value); var tab = document.getElementById( "tab" ); var rowLength = tab.rows.length; var columnLength = tab.rows[1].cells.length; for ( var i = 0; i < rowLength; i++) { if (i == 0) { var oTd = tab.rows[0].insertCell(columnLength); oTd.innerHTML = "<div align='center' style='width:40px'><a href='javascript:' onclick=\"DeleteSignColumn(" + (++columnID) + ")\">删除</a></div>" ; } else if (i == 1) { //第一列:序号 var oTd = tab.rows[1].insertCell(columnLength); oTd.innerHTML = "<div style='background: #D3E6FE;width=100%;'>" + (++count) + "</div>" ; } else if (i > 1) { var oTd = tab.rows[i].insertCell(columnLength); oTd.id = "column" + columnID; oTd.innerHTML = "<textarea id='' rows='4' style='width:150; height:40px;'></textarea>" ; } } } //添加一个行 var index = 1; function AddNewRow() { var txtTRLastIndex = findObj( "txtTRLastIndex" , document); var rowID = parseInt(txtTRLastIndex.value); var tab = findObj( "tab" , document); var columnLength = tab.rows[0].cells.length; //添加行 var newTR = tab.insertRow(tab.rows.length); newTR.id = "SignItem" + rowID; for ( var i = 0; i < columnLength; i++) { if (i == 0) { //第一列:序号 newTR.insertCell(0).innerHTML = ++index; } else if (i > 0 && i < 4) { newTR.insertCell(i).innerHTML = "<input id='textItem0' type='text' style='border: 0px' size='12' />" ; } else if (i >= 4) { newTR.insertCell(i).innerHTML = "<textarea id='' rows='4' style='width:150; height:40px;'></textarea>" ; } } //添加列:删除按钮 var lastTd = newTR.insertCell(columnLength); lastTd.innerHTML = "<div align='center' style='width:40px'><a href='javascript:' onclick=\"DeleteSignRow('SignItem" + rowID + "')\">删除</a></div>" ; //将行号推进下一行 txtTRLastIndex.value = (rowID + 1).toString(); } //删除指定行 function DeleteSignRow(rowid) { var tab = findObj( "tab" , document); var signItem = findObj(rowid, document); //获取将要删除的行的Index var rowIndex = signItem.rowIndex; //删除指定Index的行 tab.deleteRow(rowIndex); //重新排列序号,如果没有序号,这一步省略 for (i = 2; i < tab.rows.length; i++) { tab.rows[i].cells[0].innerHTML = i - 1; } --index } //删除指定列 function DeleteSignColumn(columnId) { var tab = document.getElementById( "tab" ); var columnLength = tab.rows[1].cells.length; //删除指定单元格 for ( var i = 0; i < tab.rows.length; i++) { tab.rows[i].deleteCell(columnId); } //重新排列序号,如果没有序号,这一步省略 var column = columnLength - 4; for ( var j = 1; j < column; j++) { tab.rows[1].cells[j + 3].innerHTML = "<div style='background: #D3E6FE;width=100%;'>" + j + "</div>" ; } --count; } //清空列表 function ClearAllSign() { //if (confirm('确定要清空所有吗?')) { index = 0; var tab = findObj( "tab" , document); var rowscount = tab.rows.length; //循环删除行,从最后一行往前删除 for (i = rowscount - 1; i > 1; i--) { tab.deleteRow(i); } //重置最后行号为1 var txtTRLastIndex = findObj( "txtTRLastIndex" , document); txtTRLastIndex.value = "1" ; //预添加一行 AddNewRow(); //} } </script> |
二、HTML部分:
<div style= "overflow: auto; height: 350px; width: 860px; padding: 10px;" > <table cellpadding= "1" id= "tab" cellspacing= "0" bordercolor= "#A3C0E8" border= "1" style= "text-align: center" > <tr id= "tr1" > <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> </tr> <tr id= "trHeader" > <td style= "background: #D3E6FE" > NO </td> <td style= "background: #D3E6FE" > 试验项目 </td> <td style= "background: #D3E6FE" > 检验项目 </td> <td style= "background: #D3E6FE" > 标准 </td> <td style= "background: #D3E6FE" > 1 </td> </tr> <tr> <td> 1 </td> <td> <input id= 'textItem0' type= 'text' style= "border: 0px" size= '12' /> </td> <td> <input id= 'checkItem0' type= 'text' style= "border: 0px" size= '12' /> </td> <td> <input id= 'stand0' type= 'text' style= "border: 0px" size= '12' /> </td> <td> <textarea rows= "4" id= "" style= "width: 150px; height: 40px;" ></textarea> </td> </tr> </table> <table cellpadding= "1" cellspacing= "0" bordercolor= "#A3C0E8" border= "1" style= "text-align: center" > <tr> <td style= "background: #D3E6FE" > </td> <td style= "background: #D3E6FE" > <input type= "button" name= "Submit" value= "新增行" onclick= "AddNewRow()" /> </td> <td style= "background: #D3E6FE" > <input type= "button" name= "Submit" value= "新增列" onclick= "AddNewColumn()" /> </td> <td style= "background: #D3E6FE" > <input type= "button" name= "Submit2" value= "全部清空" onclick= "ClearAllSign()" /> </td> <td style= "background: #D3E6FE" > <input name= 'txtTRLastIndex' type= 'hidden' id= 'txtTRLastIndex' value= "1" /> <input name= 'txtTDLastIndex' type= 'hidden' id= 'txtTDLastIndex' value= "4" /> </td> </tr> </table> </div> |
三、说明:js代码目前还不是最优的写法,希望您提出高见。
+
(^_^)打个赏喝个咖啡(^_^)

【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· .NET Core 托管堆内存泄露/CPU异常的常见思路
· PostgreSQL 和 SQL Server 在统计信息维护中的关键差异
· C++代码改造为UTF-8编码问题的总结
· DeepSeek 解答了困扰我五年的技术问题
· 为什么说在企业级应用开发中,后端往往是效率杀手?
· Deepseek官网太卡,教你白嫖阿里云的Deepseek-R1满血版
· 2分钟学会 DeepSeek API,竟然比官方更好用!
· .NET 使用 DeepSeek R1 开发智能 AI 客户端
· DeepSeek本地性能调优
· autohue.js:让你的图片和背景融为一体,绝了!