js添加table的行和列

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="https://www.w3.org/1999/xhtml">

<head>

    <title></title>

 

    <script language="javascript" type="text/javascript">

        function addRow() {

            var newTR = document.getElementById("testTable").insertRow(document.getElementById("testTable").rows.length);

 

            var newNameTD = newTR.insertCell(0);

            newNameTD.innerHTML = "aa";

 

            var newNameTD = newTR.insertCell(1);

            newNameTD.innerHTML = "<input name='LastName' id='LastName' type='text' />";

 

            var newNameTD = newTR.insertCell(2);

            newNameTD.innerHTML = "<input name='BirthDay' id='BirthDay' type='text'   />";

 

            var newNameTD = newTR.insertCell(3);

            newNameTD.innerHTML = "<input name='age' id='age' type='text'    />";

        }

 

        function insertRow() {

            var oTable = document.getElementById("table_info");

            var oTr = oTable.insertRow();

            var oTd = oTr.insertCell();

            oTd.innerHTML = "新添加瞭一行";

        }

 

        function insertRow2() {

            //獲取table對象

            var table = document.getElementById("table_info2");

            //找到要添加button的td,這裡以表格第一行第一列為例子

            var oTd = table.rows[0].cells[0];

            //添加button到td中,添加前吧td內容清空並賦予button的代碼

            oTd.innerHTML = "<button onclick='insertRow22()'>添加收費</button>";

        }

 

        function insertRow22() {

            var oTable = document.getElementById("table_info2");

            var oTr = oTable.insertRow();

            var oTd = oTr.insertCell();

            oTd.innerHTML = "新添加瞭一行";

        }

 

        function insertRow3() {

            //獲取table對象

            var table = document.getElementById("table_info3");

            //找到要添加button的td,這裡以表格第一行第一列為例子

            var oTd2 = table.rows[0].insertCell();

            oTd2.innerHTML = "&nbps;";

        }

 

        function tableDiv() {

            var maxRow = 4;

            var maxCol = 8;

            var strTbody = ["<table border='1'><tbody>"];

 

            for (var i = 0; i < maxRow; i++) {

                strTbody.push("<tr>");

                for (var j = 0; j < maxCol; j++) {

                    strTbody.push("<td>test</td>");

                }

                strTbody.push("</tr>");

            }

 

            strTbody.push("</tbody></table>");

 

            var obj = document.getElementById("tableDiv");

            obj.innerHTML = strTbody.join("");

        }

 

        function init() {

            var _table, _tbody, tr, td, text, maxRow, maxCol;

            var docBody = document.body;

            var _doc = document;

            maxRow = 5;

            maxCol = 8;

 

            _table = _doc.createElement("table");

            _table.border = "1";

            _table.style.tableLayout = "fixed";

            _tbody = _doc.createElement("tbody");

            _table.insertBefore(_tbody, null);

            docBody.insertBefore(_table, null);

 

            for (var i = 0; i < maxRow; i++) {

                tr = _doc.createElement("tr");

                _tbody.insertBefore(tr, null);

                for (var j = 0; j < maxCol; j++) {

                    td = _doc.createElement("td");

                    text = _doc.createTextNode("Text");

                    td.insertBefore(text, null);

                    tr.insertBefore(td, null);

                }

            }

        }

 

    </script>

 

</head>

<body>

    <p>

        <table id="testTable" border='1' cellspacing="1">

            <tr>

                <th>

                    FirstName

                </th>

                <th>

                    LastName

                </th>

                <th>

                    BirthDay

                </th>

                <th>

                    age

                </th>

            </tr>

            <tr>

                <td>

                    Jim

                </td>

                <td>

                    Green

                </td>

                <td>

                    L.A

                </td>

                <td>

                    23

                </td>

            </tr>

            <tr>

                <td>

                    Andrew

                </td>

                <td>

                    Hou

                </td>

                <td>

                    Xi'an

                </td>

                <td>

                    25

                </td>

            </tr>

        </table>

        <input type="button" id="aaa" value="+add new Row" onclick="addRow();" />

    </p>

    <br />

    <hr />

    <br />

    <p>

        <input type="button" value="按鈕添加行" onclick="insertRow();" />

        <table id="table_info" border="1">

            <tr>

                <th>

                    Name

                </th>

                <th>

                    Age

                </th>

            </tr>

        </table>

    </p>

    <br />

    <hr />

    <br />

    <p>

        <input type="button" value="按鈕中添加行" onclick="insertRow2();" />

        <table id="table_info2" border="1">

            <tr>

                <th>

                    Name

                </th>

                <th>

                    Age

                </th>

            </tr>

        </table>

    </p>

    <br />

    <hr />

    <br />

    <p>

        <input type="button" value="連續添加列" onclick="insertRow3();" />

        <table id="table_info3" border="1">

            <tr>

                <th>

                    Name

                </th>

                <th>

                    Age

                </th>

            </tr>

        </table>

    </p>

    <br />

    <hr />

    <br />

    <p>

        <input type="button" value="添加一個table" onclick="tableDiv();" />

        <p id="tableDiv" />

    </p>

    <br />

    <hr />

    <br />

    <p>

        <input type="button" value="連續添加table" onclick="init();" />

    </p>

</body>

</html>

You May Also Like