如何使用 getElementByID 迭代并制作表格

Question

function myFunction() {
  var table = document.getElementById("myTable");
  var row = table.insertRow(0);
  var cell1 = row.insertCell(0);
  var cell2 = row.insertCell(1);
  cell1.innerHTML = "NEW CELL1";
  cell2.innerHTML = "NEWCELL2";
  for (i = 0; i < 5; i++) {
     row.insertCell(i);
     row.insertRow(0)
     i.innerHTML = "Proof this is Working"
   }
}

I apologize, as I am very new to Javascript and it's my second language.

So I have this function, and using a variable works for inserting the cell/row into an HTML Table. However, I am trying to make a grid from a table, so I need to have a for loop that inserts cells and rows, as I will need a lot of them. So the first few lines, var cell1 and var cell2 work perfectly, and make cells and rows. However the for loop is not working correctly at all.

I checked syntax, and it appears to look fine. the code looks like it should be working, but this is my first time writing a for loop in javascript.

Another thing I have to ask, does a for loop have to have three conditions? In python you can just do a for line in x, and you should be fine. But it looks like in javascript you need three different conditions.

Thank you!

Answer 1

You made a couple major errors in this block of code:

  for (i = 0; i < 5; i++) {
     row.insertCell(i); 
     row.insertRow(0); 
     i.innerHTML = "Proof this is Working";
   }

Line by line:

row.insertCell(i);

This insert a new cell to the row you had defined before the for loop. It will overwrite the first two cells you defined before the for loop.

     row.insertRow(0); 

I am not sure what this does, but it should either throw an error or produced malformed html. You want to insert a new row to the table not to the already existing row. table.insertRow(0) will overwrite the first row you defined before the for loop.

 i.innerHTML = "Proof this is Working";

i is an integer it should not have the property .innerHTML and will probably throw an error.

It is a bit hard to understand exactly your intent. If your intent is to add 5 additional rows with 5 cells you can do that like this:

function myFunction() {
      var table = document.getElementById("myTable");
      var row = table.insertRow(0);
      var cell1 = row.insertCell(0);
      var cell2 = row.insertCell(1);
      cell1.innerHTML = "NEW CELL1";
      cell2.innerHTML = "NEWCELL2";
      for (let i = 0; i < 5; i++) {
         let newRow = table.insertRow(-1)
         for(let j = 0; j < 5; j++) {
             newRow.insertCell(-1)
         }
       }
    }

newRow.insertCell(-1) the -1 adds the new cell to the end of the row https://www.w3schools.com/jsref/met_tablerow_insertcell.asp

And finally yes the syntax for the for loop looks fine, there are other ways of iterating in javascript: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Loops_and_iteration

Answer 2

There are a few thing wrong with your current code.

1. row.insertRow(0) You can't insert rows into rows.
2. i.innerHTML = "Proof this is Working" i is the variable that holds the current index of the loop. An integer doesn't have the property innerHTML . You probably want to set the contents of the cell. In which case you first have to save the cell into a variable. const cell = row.insertCell(i) then cell.innerHTML = "Proof thiis is working" .

Here is an example of how things might look:

 function myFunction() { const table = document.getElementById("myTable"); for (let rowNr = 0; rowNr < 7; ++rowNr) { const row = table.insertRow(); for (let colNr = 0; colNr < 3; ++colNr) { const cell = row.insertCell(); cell.innerHTML = `row ${rowNr} - column ${colNr}`; } } } myFunction();

 td { border: 1px solid black; }

 <table id="myTable"></table>

Another thing I have to ask, does a for loop have to have three conditions? In python you can just do a for line in x, and you should be fine. But it looks like in JavaScript you need three different conditions.

A for-loop does not have to have three conditions. Here are the different types of for-loops:

1. for The is the version you where currently using. This is a general purpose for-loop with 3 sections: initialisation, condition and finalisation.

2. for...in This version is mainly used to loop over properties of an object.

3. for...of This version is mainly used to loop over the elements of iterable objects like arrays, sets, maps. This loop comes the closest to the one used in Python.

   An example might be:

    for (const line of lines) console.log(line);

4. for await...of Similar to for...of but relevant for asynchronous programming. Don't worry about this one for the moment.

Answer 3

The question I have is are you trying to insert 5 rows or 5 cells? Here's what I'd do:

// insert a single row given the cells as an array
function insertRow( table, cells ) {
    const row = table.insertRow(-1); // append a row at the bottom of the table
    for( var i = 0; i < cells.length; i++ ) {
        const cell = row.insertCell( i );
        cell.innerHtml = cells[i];
    }
}

// insert a series of rows given the input array
function insertRows( table, rows ) {
    for( var i = 0; i < rows.length; i++ ) {
        insertRow( table, rows[i] );
    }
}

function main() {
    const table = document.getElmentById('#someTable');

    insertRows( table, [
       [ 'Moon Landing', 'July 20, 1969', 'Neil Armstrong' ],
       [ 'Hoover Dam', 'Sept 30, 1935', 'Franklin D. Roosevelt' ],
       [ 'ARPANET First Packet', 'Oct 29, 1969', 'UCLA,UC Berkley' ]
    ] );
}