熱點推薦:
您现在的位置: 電腦知識網 >> 編程 >> Java編程 >> JSP教程 >> 正文

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

2022-06-13   來源: JSP教程 
這篇文章介紹了js添加table的行和列 具體實現方法有需要的朋友可以參考一下   復制代碼 代碼如下:

  
<!DOCTYPE html PUBLIC "//WC//DTD XHTML Transitional//EN" "
<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>


From:http://tw.wingwit.com/Article/program/Java/JSP/201311/20169.html
    推薦文章
    Copyright © 2005-2022 電腦知識網 Computer Knowledge   All rights reserved.