Syf AK Ответов: 2

Как я могу создавать повторяющиеся заголовки?

Я знаю, как создавать заголовки для динамической таблицы, но я хочу создать заголовки типа(если я даю ввод как 6*6, то заголовки должны быть (|Label| control||Label| control||Label| control|) отображаться следующим образом. Как я могу повторить заголовки?

Спасибо.

Что я уже пробовал:

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);
    var orderArrayHeader = ["Label", "Control"];
    var thead = document.createElement('thead');
    table.appendChild(thead);
    for (var i = 0; i < orderArrayHeader.length; i++) {
    thead.appendChild(document.createElement("th")).
    appendChild(document.createTextNode(orderArrayHeader[i]));
}
    rowCnt = document.getElementById('txtrows').value;
    cellCnt = document.getElementById('txtcols').value;
    for (rowCtr = 0; rowCtr < rowCnt; rowCtr++) {
        var thead = document.createElement("thead");
        thead.innerHTML = "Header";
        var tr = document.createElement('TR');
        tableBody.appendChild(tr);
        for (cellCtr = 0; cellCtr < cellCnt; cellCtr++) {
            tr.appendChild(thead);
            var td = document.createElement('TD');
            td.width = '120';
            td.appendChild(document.createTextNode("Row" + rowCtr + " Column" + cellCtr));
            tr.appendChild(td);
        }
    }
    myTableDiv.appendChild(table);
  }

2 Ответов

Рейтинг:
7

Syf AK

На случай, если кому-то понадобится:


function CreateTable() {

            var rowCtr;
            var cellCtr;
            var rowCnt = getValue;
            var cellCnt = getValue;
            var myTableDiv = document.getElementById('myDynamicTable');
            var table = document.createElement('TABLE');
            myDynamicTable.setAttribute("contenteditable", "true");
            table.border = '1';
            table.id = 'myTable';
            var tableBody = document.createElement('TBODY');
            table.appendChild(tableBody);

            var orderArrayHeader = ["Label", "Control"];
            var thead = document.createElement('thead');
            table.appendChild(thead);
            for (var i = 0; i < cellCnt; i++) {
                if (i % 2 == 0) {
                    thead.appendChild(document.createElement("th")).
                appendChild(document.createTextNode(orderArrayHeader[0]));
                }
                else {
                    thead.appendChild(document.createElement("th")).
                appendChild(document.createTextNode(orderArrayHeader[1]));
                }
            }
            for (rowCtr = 0; rowCtr < rowCnt; rowCtr++) {
                var tr = document.createElement('TR');
                tableBody.appendChild(tr);

                for (cellCtr = 0; cellCtr < cellCnt; cellCtr++) {
                    var td = document.createElement('TD');
                    td.width = '120';
                    td.height = '50';
                    td.appendChild(document.createTextNode(""));
                    tr.appendChild(td);
                }
            }
            myTableDiv.appendChild(table);
        }

Рейтинг:
20

summiya1

попробовать это

results = {
  weak_sent: [
    "row 1 data",
    "row 2 data"
  ],
  weak_sent_num: [1,2]
}
function generate_table() {
    // get the reference for the body
    var body = document.getElementsByTagName("body")[0];

    // creates a <table> element and a <tbody> element
    var tbl = document.createElement("table");
    //var header = document.createElement("header");
    // var header = '<tr><th>Country</th><th>City</th></tr>';
    var header=  document.createElement('thead')
    var headingRow = document.createElement('tr')

    var headingCell1 = document.createElement('td')
    var headingText1 = document.createTextNode('country')
    headingCell1.appendChild(headingText1)
    headingRow.appendChild(headingCell1)
    
    var headingCell2 = document.createElement('td')
    var headingText2 = document.createTextNode('City')
    headingCell2.appendChild(headingText2)
    headingRow.appendChild(headingCell2)

    header.appendChild(headingRow)
    tbl.appendChild(header)
    //var header = "<th>Header</th>";
    var tblBody = document.createElement("tbody");


    // creating all cells
    for (var i = 0; i < results.weak_sent.length; i++) {
        // creates a table row
        var row = document.createElement("tr");

        for (var j = 0; j < 2; j++) {
            // Create a <td> element and a text node, make the text
            // node the contents of the <td>, and put the <td> at
            // the end of the table row
            var cell = document.createElement("td");
            if (j == 0) {
                var cellText = document.createTextNode(results.weak_sent_num[i]);
            } else {
                var cellText = document.createTextNode(results.weak_sent[i]);
            }


            cell.appendChild(cellText);
            row.appendChild(cell);
        }

        // add the row to the end of the table body
        tblBody.appendChild(row);
    }
    // This is for the quick solution
    // tbl.innerHTML = header

    // put the <tbody> in the <table>
    tbl.appendChild(tblBody);



    // appends <table> into <body>
    body.appendChild(tbl);
    // sets the border attribute of tbl to 2;
    tbl.setAttribute("border", "2");
}

generate_table()

Syf AK

Большое спасибо