js添加table的行和列具體實現方法

　　這篇文章介紹了js添加table的行和列具體實現方法有需要的朋友可以參考一下

　　 代碼如下
<!DOCTYPE html PUBLIC //WC//DTD XHTML Transitional//EN transitionaldtd>
<html xmlns=>
<head>
    <title></title>
    <script language=javascript type=text/javascript>
        function addRow() {
            var newTR = documentgetElementById(testTable)insertRow(documentgetElementById(testTable)rowslength);
            var newNameTD = newTRinsertCell();
            newNameTDinnerHTML = aa;
            var newNameTD = newTRinsertCell();
            newNameTDinnerHTML = <input name=LastName id=LastName type=text />;
            var newNameTD = newTRinsertCell();
            newNameTDinnerHTML = <input name=BirthDay id=BirthDay type=text   />;
            var newNameTD = newTRinsertCell();
            newNameTDinnerHTML = <input name=age id=age type=text    />;
        }
        function insertRow() {
            var oTable = documentgetElementById(table_info);
            var oTr = oTableinsertRow();
            var oTd = oTrinsertCell();
            oTdinnerHTML = 新添加了一行;
        }
        function insertRow() {
            //獲取table對象
            var table = documentgetElementById(table_info);
            //找到要添加button的td這裡以表格第一行第一列為例子
            var oTd = tablerows[]cells[];
            //添加button到td中添加前吧td內容清空並賦予button的代碼
            oTdinnerHTML = <button onclick=insertRow()>添加收費</button>;
        }
        function insertRow() {
            var oTable = documentgetElementById(table_info);
            var oTr = oTableinsertRow();
            var oTd = oTrinsertCell();
            oTdinnerHTML = 新添加了一行;
        }
        function insertRow() {
            //獲取table對象
            var table = documentgetElementById(table_info);
            //找到要添加button的td這裡以表格第一行第一列為例子
            var oTd = tablerows[]insertCell();
            oTdinnerHTML = &nbps;;
        }
        function tableDiv() {
            var maxRow = ;
            var maxCol = ;
            var strTbody = [<table border=><tbody>];
            for (var i = ; i < maxRow; i++) {
                strTbodypush(<tr>);
                for (var j = ; j < maxCol; j++) {
                    strTbodypush(<td>test</td>);
                }
                strTbodypush(</tr>);
            }
            strTbodypush(</tbody></table>);
            var obj = documentgetElementById(tableDiv);
            objinnerHTML = strTbodyjoin();
        }
        function init() {
            var _table _tbody tr td text maxRow maxCol;
            var docBody = documentbody;
            var _doc = document;
            maxRow = ;
            maxCol = ;
            _table = _doccreateElement(table);
            _tableborder = ;
            _tablestyletableLayout = fixed;
            _tbody = _doccreateElement(tbody);
            _tableinsertBefore(_tbody null);
            docBodyinsertBefore(_table null);
            for (var i = ; i < maxRow; i++) {
                tr = _doccreateElement(tr);
                _tbodyinsertBefore(tr null);
                for (var j = ; j < maxCol; j++) {
                    td = _doccreateElement(td);
                    text = _doccreateTextNode(Text);
                    tdinsertBefore(text null);
                    trinsertBefore(td null);
                }
            }
        }
    </script>
</head>
<body>
    <div>
        <table id=testTable border= cellspacing=>
            <tr>
                <th>
                    FirstName
                </th>
                <th>
                    LastName
                </th>
                <th>
                    BirthDay
                </th>
                <th>
                    age
                </th>
            </tr>
            <tr>
                <td>
                    Jim
                </td>
                <td>
                    Green
                </td>
                <td>
                    LA
                </td>
                <td>

                </td>
            </tr>
            <tr>
                <td>
                    Andrew
                </td>
                <td>
                    Hou
                </td>
                <td>
                    Xian
                </td>
                <td>

                </td>
            </tr>
        </table>
        <input type=button id=aaa value=+add new Row onclick=addRow(); />
    </div>
    <br />
    <hr />
    <br />
    <div>
        <input type=button value=按鈕添加行 onclick=insertRow(); />
        <table id=table_info border=>
            <tr>
                <th>
                    Name
                </th>
                <th>
                    Age
                </th>
            </tr>
        </table>
    </div>
    <br />
    <hr />
    <br />
    <div>
        <input type=button value=按鈕中添加行 onclick=insertRow(); />
        <table id=table_info border=>
            <tr>
                <th>
                    Name
                </th>
                <th>
                    Age
                </th>
            </tr>
        </table>
    </div>
    <br />
    <hr />
    <br />
    <div>
        <input type=button value=連續添加列 onclick=insertRow(); />
        <table id=table_info border=>
            <tr>
                <th>
                    Name
                </th>
                <th>
                    Age
                </th>
            </tr>
        </table>
    </div>
    <br />
    <hr />
    <br />
    <div>
        <input type=button value=添加一個table onclick=tableDiv(); />
        <div id=tableDiv />
    </div>
    <br />
    <hr />
    <br />
    <div>
        <input type=button value=連續添加table onclick=init(); />
    </div>
</body>
</html>

【責編:at】

From:http://tw.wingwit.com/Article/program/Java/JSP/201311/19306.html