如何为动态表创建标题

Question

我正在根据用户输入生成动态表。我知道如何创建标头，但我想显示标头。

1. 表头：| Label | Control | Label | Control | Label | Control |

2. 以及如何使单元格可编辑。

有人可以建议我该怎么做吗？

谢谢。

table sample

function CreateTable() {
    var rowCtr;
    var cellCtr;
    var rowCnt;
    var cellCnt;
    var myTableDiv = document.getElementById("myDynamicTable");
    var table = document.createElement('Table');
    table.border = '1';
    table.id = 'myTable';
    var tableBody = document.createElement('Tbody');
    table.appendChild(tableBody);
    rowCnt = document.getElementById('txtrows').value;
    cellCnt = document.getElementById('txtcols').value;
    for (var rowCtr = 0; rowCtr < rowCnt; rowCtr++) {
        var tr = document.createElement('tr');
        tableBody.appendChild(tr);
        for (var cellCtr = 0; cellCtr < cellCnt; cellCtr++) {
            var td = document.createElement('td');
            td.width = '120';
            td.appendChild(document.createTextNode("Click me, Row:" + rowCtr + " Column:" + cellCtr));
            tr.appendChild(td);
        }
    }
    myTableDiv.appendChild(table);
    }

<table>
    <tr>
        <td>Row Count</td>
        <td>Column Count</td>
        <td></td>
    </tr>
    <tr>
        <td><input type="text" id="txtrows" /></td>
        <td><input type="text" id="txtcols"/></td>
        <td><button onclick="CreateTable()">Create Table</button></td>
    </tr>
</table>



<div id="myDynamicTable"></div>

Answer 1

  

table.setAttribute（“ contenteditable”，“ true”）;

将其设为可编辑，请查看

function CreateTable() {
    var rowCtr;
    var cellCtr;
    var rowCnt;
    var cellCnt;
    var myTableDiv = document.getElementById("myDynamicTable");
    var table = document.createElement('Table');
    table.setAttribute("contenteditable", "true");
    table.border = '1';
    table.id = 'myTable';
    var tableBody = document.createElement('Tbody');
    table.appendChild(tableBody);
    rowCnt = document.getElementById('txtrows').value;
    cellCnt = document.getElementById('txtcols').value;
    for (var rowCtr = 0; rowCtr < rowCnt; rowCtr++) {
        var tr = document.createElement('tr');
        tableBody.appendChild(tr);
        for (var cellCtr = 0; cellCtr < cellCnt; cellCtr++) {
            var td = document.createElement('td');
            td.width = '120';
            td.appendChild(document.createTextNode("Click me, Row:" + rowCtr + " Column:" + cellCtr));
            tr.appendChild(td);
        }
    }
    myTableDiv.appendChild(table);
    }

<table contenteditable = "true">
    <tr>
        <td>Row Count</td>
        <td>Column Count</td>
        <td></td>
    </tr>
    <tr>
        <td><input type="text" id="txtrows" /></td>
        <td><input type="text" id="txtcols"/></td>
        <td><button onclick="CreateTable()">Create Table</button></td>
    </tr>
</table>



<div id="myDynamicTable"></div>

  

在如何创建动态表标题上选中此post

Answer 2

Creating repeated headers for dynamic table.

    function CreateTable() {
        var rowCtr;
        var cellCtr;
        var rowCnt;
        var cellCnt;
        var myTableDiv = document.getElementById("myDynamicTable");
        var table = document.createElement('Table');
        table.setAttribute("contenteditable", "true");
        table.border = '1';
        table.id = 'myTable';

    var Header = ["Label", "Control"];
        var thead = document.createElement('thead');
        table.appendChild(thead);
      cellCnt = document.getElementById('txtcols').value;
        for (var i = 0; i < cellCnt; i++) {
            if (i % 2 == 0) {
                thead.appendChild(document.createElement("th")).
                    appendChild(document.createTextNode(Header[0]));
            }
            else {
                thead.appendChild(document.createElement("th")).
                    appendChild(document.createTextNode(Header[1]));
            }
        }

        var tableBody = document.createElement('Tbody');
        table.appendChild(tableBody);
        rowCnt = document.getElementById('txtrows').value;
        cellCnt = document.getElementById('txtcols').value;
        for (var rowCtr = 0; rowCtr < rowCnt; rowCtr++) {
            var tr = document.createElement('tr');
            tableBody.appendChild(tr);
            for (var cellCtr = 0; cellCtr < cellCnt; cellCtr++) {
                var td = document.createElement('td');
                td.width = '120';
                td.appendChild(document.createTextNode("Click me, Row:" + rowCtr + " Column:" + cellCtr));
                tr.appendChild(td);
            }
        }
        myTableDiv.appendChild(table);
        }

    <table contenteditable = "true">
        <tr>
            <td>Row Count</td>
            <td>Column Count</td>
            <td></td>
        </tr>
        <tr>
            <td><input type="text" id="txtrows" /></td>
            <td><input type="text" id="txtcols"/></td>
            <td><button onclick="CreateTable()">Create Table</button></td>
        </tr>
    </table>



    <div id="myDynamicTable"></div>