用数组项填充表的第一列 - JavaScript

Question

I am new to coding and trying to write a function that would generate a table with 3 columns and with the number of rows equal to the number of indexes in an array. This is the array and the code I'm using to generate the table

var msg1Arr = ['loginCommand', 'version', 'xID', 'passcode', 'machineID', 'equipSN', 'userSlot', 'clubID', 'loginType'];

function generateTable(){
    var body = document.getElementsByTagName("body")[0];
    var tbl = document.createElement("table");
    var tblBody = document.createElement("tbody");

    for(var i=0; i<realArray.length; i++){ //columns
        var row=document.createElement("tr");

        for (var j=0; j < 3; j++){  //rows
            var cell = document.createElement("td");
            var cellText = document.createTextNode("t");
            cell.appendChild(cellText);
            row.appendChild(cell);
        }
    tblBody.appendChild(row);
    }
    tbl.appendChild(tblBody);
    body.appendChild(tbl); 
    tbl.setAttribute("border", "2");
};

However, this code fills in all cells with "t" string. I need the array to populate the first column, one index per row. Please help!

Answer 1

用realArray[i]替换"t"

Answer 2

In order the first column to be populated with the arrays elements. Modify the code to be

var msg1Arr = ['loginCommand', 'version', 'xID', 'passcode', 'machineID', 'equipSN', 'userSlot', 'clubID', 'loginType'];
    
    function generateTable(){
        var body = document.getElementsByTagName("body")[0];
        var tbl = document.createElement("table");
        var tblBody = document.createElement("tbody");
    
        for(var i=0; i<msg1Arr.length; i++){ //columns
            var row=document.createElement("tr");
    
            for (var j=0; j < 3; j++){  //rows
                var cell = document.createElement("td");
                var cellText = document.createTextNode("t");
                if(j == 0){
                   cellText = document.createTextNode(msg1Arr[i]);
                }
                cell.appendChild(cellText);
                row.appendChild(cell);
            }
        tblBody.appendChild(row);
        }
        tbl.appendChild(tblBody);
        body.appendChild(tbl); 
        tbl.setAttribute("border", "2");
     };

Answer 3

You could use a forEach loop on the array which will iterate with each value within the array. Set your value and index in the forEach function v , i ... Insert the row with each iteration of the forEach loop, then set a for loop to create your table data columns that will reside within the rows. You said three, so the for loop can be hard coded to create a TD each time you loop through the for loop. Lastly to set the first column tot he value within the array, use a conditional that checks if the iterator is set to 1 , if it is then set the textContent of that TD to the value with in the array...

See the comments in the code for further explanation.

 var msg1Arr = ['loginCommand', 'version', 'xID', 'passcode', 'machineID', 'equipSN', 'userSlot', 'clubID', 'loginType']; function generateTable() { // get the parent element here i used a div 'container' let cont = document.getElementById("container"); // create the table element let table = document.createElement("TABLE"); // use forEach on the array to loop through each iteration of values in the array msg1Arr.forEach(function(v, i) { // append the parent element (display) element with the table cont.append(table); // each iteration through the array, insert a table row into the table element // we use the index of the foreach loop to insert a table row let tr = table.insertRow(i); // iterate through the desired amount of columns using a for loop for (let j = 1; j <= 3; j++) { // each iteration of the for loop, create a table data let td = document.createElement('TD'); // append the row with the newly created TD tr.append(td); // conditional to see if the index of the td's is the first iteration of the TD's // if it is, then we insert the value within the array into that table data column if (j === 1) { td.textContent = v; } } // set your attributed for the border in the table table.setAttribute("border", "2"); // append the table row to the table table.append(tr); }) }; // run the function generateTable();

 <div id="container"> <!--write a function that would generate a table with 3 columns and with the number of rows equal to the number of indexes in an array.--> </div>