Question

我试图通过使用像MS Word中的javascript代码在下拉列表中选择行数和列数来插入多个行和列来动态地在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 new：

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的答案 - How to copy to the clipboard in 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>

您可以使用选择菜单将值传递给变量，而不是按钮。它将根据值创建行，列。

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);

这是JSFiddle using native js。这是JSFiddle using jQuery。

关于字符串重复功能

我从here获得了重复功能：

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);
    }
}

使用javascript代码动态地在html中向表中插入多个行和列

4 个答案:

关于字符串重复功能