使用JavaScript代碼將多行和多列動態插入html表中

Question

我試圖插入多個行和列，以通過使用javascript代碼（如MS Word）在下拉列表中選擇行和列數，來在html中動態創建表格。 例如，如果我從數字的下拉列表中選擇行數為5，列數為5。 應該顯示5行5列。

我的問題是如何通過從下拉列表中選擇行數和列數來動態添加多個行和列以創建表。

Answer 1

由於<table>元素是HTML中最復雜的結構之一，因此HTML DOM提供了具有特殊屬性和方法的新接口HTMLTableElement ，用於處理HTML文檔中表的布局和表示。

因此，如果您想使用DOM標准來達到預期的結果，則可以使用以下方法：

• 演示老
• 演示新

---

HTML：

<ul>
    <li>
        <label for="column">Add a Column</label>
        <input type="number" id="column" />
    </li>
    <li>
        <label for="row">Add a Row</label>
        <input type="number" id="row" />
    </li>
    <li>
        <input type="button" value="Generate" id="btnGen" />
        <input type="button" value="Copy to Clipboard" id="copy" />
    </li>
</ul>
<div id="wrap"></div> 

JS新：

JavaScript進行了改進。

(function (window, document, undefined) {
    "use strict";

    var wrap = document.getElementById("wrap"),
        setColumn = document.getElementById("column"),
        setRow = document.getElementById("row"),
        btnGen = document.getElementById("btnGen"),
        btnCopy = document.getElementById("btnCopy");

    btnGen.addEventListener("click", generateTable);
    btnCopy.addEventListener("click", copyTo);

    function generateTable(e) {
        var newTable = document.createElement("table"),
            tBody = newTable.createTBody(),
            nOfColumns = parseInt(setColumn.value, 10),
            nOfRows = parseInt(setRow.value, 10),
            row = generateRow(nOfColumns);

        newTable.createCaption().appendChild(document.createTextNode("Generated Table"));

        for (var i = 0; i < nOfRows; i++) {
            tBody.appendChild(row.cloneNode(true));
        }

        (wrap.hasChildNodes() ? wrap.replaceChild : wrap.appendChild).call(wrap, newTable, wrap.children[0]);
    }

    function generateRow(n) {
        var row = document.createElement("tr"),
            text = document.createTextNode("cell");

        for (var i = 0; i < n; i++) {
            row.insertCell().appendChild(text.cloneNode(true));
        }

        return row.cloneNode(true);
    }

    function copyTo(e) {
        prompt("Copy to clipboard: Ctrl+C, Enter", wrap.innerHTML);
    }
}(window, window.document));

---

JS老：

(function () {
    "use strict";

    var wrap = document.getElementById("wrap"),
        setColumn = document.getElementById("column"),
        setRow = document.getElementById("row"),
        btnGen = document.getElementById("btnGen"),
        copy = document.getElementById("copy"),
        nOfColumns = -1,
        nOfRows = -1;

    btnGen.addEventListener("click", generateTable);
    copy.addEventListener("click", copyTo);

    function generateTable(e) {
        var newTable = document.createElement("table"),
            caption = newTable.createCaption(),
            //tHead = newTable.createTHead(),
            //tFoot = newTable.createTFoot(),
            tBody = newTable.createTBody();

        nOfColumns = parseInt(setColumn.value, 10);
        nOfRows = parseInt(setRow.value, 10);

        caption.appendChild(document.createTextNode("Generated Table"));

        // appendRows(tHead, 1);
        // appendRows(tFoot, 1);
        appendRows(tBody);

        (wrap.hasChildNodes() ? wrap.replaceChild : wrap.appendChild).call(wrap, newTable, wrap.firstElementChild);
    }

    function appendColumns(tElement, count) {
        var cell = null,
            indexOfRow = [].indexOf.call(tElement.parentNode.rows, tElement) + 1,
            indexOfColumn = -1;

        count = count || nOfColumns;

        for (var i = 0; i < count; i++) {
            cell = tElement.insertCell(i);
            indexOfColumn = [].indexOf.call(tElement.cells, cell) + 1;
            cell.appendChild(document.createTextNode("Cell " + indexOfColumn + "," + indexOfRow));
        }
    }

    function appendRows(tElement, count) {
        var row = null;
        count = count || nOfRows;
        for (var i = 0; i < count; i++) {
            row = tElement.insertRow(i);
            appendColumns(row);
        }
    }

    function copyTo(e) {
        prompt("Copy to clipboard: Ctrl+C, Enter", wrap.innerHTML);
    }
}());  

如果要將生成的結果復制到剪貼板，則可以查看Jarek Milewski的答案- 如何在JavaScript中復制到剪貼板？

Answer 2

我有一個示例代碼...嘗試一下並根據您的要求進行修改。 希望它可以幫助您。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"  "http://www.w3.org/TR/html4/loose.dtd">
<html>
    <head>
        <title>Untitled Document</title>
        <style type="text/css">
            #mytab td{
                width:100px;
                height:20px;
                background:#cccccc;
            }
        </style>
        <script type="text/javascript">
            function addRow(){
                var root=document.getElementById('mytab').getElementsByTagName('tbody')[0];
                var rows=root.getElementsByTagName('tr');
                var clone=cloneEl(rows[rows.length-1]);
                root.appendChild(clone);
            }
            function addColumn(){
                var rows=document.getElementById('mytab').getElementsByTagName('tr'), i=0, r, c, clone;
                while(r=rows[i++]){
                    c=r.getElementsByTagName('td');
                    clone=cloneEl(c[c.length-1]);
                    c[0].parentNode.appendChild(clone);
                }
            }
            function cloneEl(el){
                var clo=el.cloneNode(true);
                return clo;
            }
        </script>

    </head>
    <body>
        <form action="">
            <input type="button" value="Add a Row" onclick="addRow()">
            <input type="button" value="Add a Column" onclick="addColumn()">
        </form>
        <br>

        <table id="mytab" border="1" cellspacing="0" cellpadding="0">
            <tr>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
            </tr>
            <tr>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
            </tr>
            <tr>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
            </tr>
            <tr>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
            </tr>
        </table>
    </body>
</html>

可以使用select菜單代替button，並將值傳遞給變量。 它將根據值創建行，列。

Answer 3

嘗試這樣的事情：

var
    tds = '<td>Data'.repeat(col_cnt),
    trs = ('<tr>'+tds).repeat(row_cnt),
    table = '<table>' + trs + '</table>;

然后將表格放在您的容器中：

document.getElementById('tablePreviewArea').innerHTML = table;

或使用JQuery：

$('#tablePreviewArea').html(table);

這是使用本機js的JSFiddle 。 這是使用jQuery的JSFiddle 。

關於字符串重復功能

我從這里得到了重復功能：

String.prototype.repeat = function( num )
{
    return new Array( num + 1 ).join( this );
}

Answer 4

您可以使用此函數來生成不包含所需行和列的動態表：

function createTable() {
    var a, b, tableEle, rowEle, colEle;
    var myTableDiv = document.getElementById("DynamicTable");
    a = document.getElementById('txtRows').value; //No of rows you want
    b = document.getElementById('txtColumns').value; //No of column you want

    if (a == "" || b == "") {
        alert("Please enter some numeric value");
    } else {
        tableEle = document.createElement('table');
        for (var i = 0; i < a; i++) {
            rowEle = document.createElement('tr');

            for (var j = 0; j < b; j++) {
                colEle = document.createElement('td');
                rowEle.appendChild(colEle);
            }
            tableEle.appendChild(rowEle);
        }
        $(myTableDiv).html(tableEle);
    }
}