js添加table的行和列

最新推荐文章于 2022-07-22 08:26:59 发布

来杯水

最新推荐文章于 2022-07-22 08:26:59 发布

阅读量3k

点赞数

分类专栏： js的运用文章标签： table button input function border div

本文链接：https://blog.csdn.net/pengshumin89/article/details/6640947

版权

js的运用专栏收录该内容

22 篇文章 0 订阅

订阅专栏

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://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 οnclick='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>
    <div>
        <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" οnclick="addRow();" />
    </div>
    <br />
    <hr />
    <br />
    <div>
        <input type="button" value="按钮添加行" οnclick="insertRow();" />
        <table id="table_info" border="1">
            <tr>
                <th>
                    Name
                </th>
                <th>
                    Age
                </th>
            </tr>
        </table>
    </div>
    <br />
    <hr />
    <br />
    <div>
        <input type="button" value="按钮中添加行" οnclick="insertRow2();" />
        <table id="table_info2" border="1">
            <tr>
                <th>
                    Name
                </th>
                <th>
                    Age
                </th>
            </tr>
        </table>
    </div>
    <br />
    <hr />
    <br />
    <div>
        <input type="button" value="连续添加列" οnclick="insertRow3();" />
        <table id="table_info3" border="1">
            <tr>
                <th>
                    Name
                </th>
                <th>
                    Age
                </th>
            </tr>
        </table>
    </div>
    <br />
    <hr />
    <br />
    <div>
        <input type="button" value="添加一个table" οnclick="tableDiv();" />
        <div id="tableDiv" />
    </div>
    <br />
    <hr />
    <br />
    <div>
        <input type="button" value="连续添加table" οnclick="init();" />
    </div>
</body>
</html>

来杯水

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
js添加table的行和列

function addRow() { var newTR = document.getElementById("testTable").insertRow(document.getElementById("testTable").rows.length
复制链接

扫一扫