javascript - 如何在单击按钮时向表格列添加标题

Question

我正在根据用户输入生成一个带有标题的动态表，并在单击按钮时添加列。在单击添加列时，我也想向该列添加标题。如果我单击 AppendColumns 按钮，它应该添加带标题的列。

演示:

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);
        }
     function AppendColumns() {
                var tableCell = document.getElementById('myTable');
                for (var i = 0; i < tableCell.rows.length; i++) {
                    var colCell = tableCell.rows[i].insertCell(tableCell.rows[i].cells.length);
                    colCell.width = '120';
                    var insertCell = (colCell, i, 'col');
                }
             }

<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>
            <td><button onclick="AppendColumns()">AppendColumn</button></td>
        </tr>
    </table>
    <div id="myDynamicTable"></div>

Answer 1

试试这个我认为您错过了在 CreateTable() 方法中为变量 cellCnt 分配值。

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);
                thead.id = '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);
        }
     var Header = ["Label", "Control"];     
     function AppendColumns() { 
                var tableCell = document.getElementById('myTable');
                var lastIndex = tableCell.rows[0].cells.length-1;
                var theader = document.getElementById('tHead');
                if(lastIndex % 2 ==1){
            theader.appendChild(document.createElement("th")).
                        appendChild(document.createTextNode(Header[0]));
                        }else{                            theader.appendChild(document.createElement("th")).
                        appendChild(document.createTextNode(Header[1]));

                        }
                for (var i = 0; i < tableCell.rows.length; i++) {
                    var colCell = tableCell.rows[i].insertCell(tableCell.rows[i].cells.length);
                    colCell.width = '120';
                    var insertCell = (colCell, i, 'col');
                }
             }

<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>
            <td><button onclick="AppendColumns()">AppendColumn</button></td>
        </tr>
    </table>
    <div id="myDynamicTable"></div>