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); returnfoundObj;
        }
 
        //添加一个列
        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:' 


οnclick=\"DeleteSignColumn("+ (++columnID) + ")\">删除</a></div>";
                }elseif (i == 1) {//第一列:序号
                    var oTd = tab.rows[1].insertCell(columnLength);
                    oTd.innerHTML = "<div style='background: #D3E6FE;width=100%;'>" + (++count) + 


"</div>";
                }elseif (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;
                }elseif (i > 0 && i < 4) {
                    newTR.insertCell(i).innerHTML = "<input id='textItem0' type='text' 


style='border: 0px' size='12' />";
                }
                elseif (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:' 


οnclick=\"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="新增行"οnclick="AddNewRow()"/>
                </td>
                <td style="background: #D3E6FE">
                    <input type="button"name="Submit"value="新增列"οnclick="AddNewColumn()"/>
                </td>
                <td style="background: #D3E6FE">
                    <input type="button"name="Submit2"value="全部清空"οnclick="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代码目前还不是最优的写法，希望您提出高见。