-2

How can I write in a table <td> using Javascript with document.getElementById("Table").rows[i].cells[j]? Or any other possible ways?

I want to write stuff into the <td></td> with javascript. I used this code for the first part, but when I reused it, it didn't work. If it helps, the table was generated with javascript:

var cell = document.createElement("td");
var cellText = document.createTextNode(i+j);
cell.appendChild(cellText);
trincot
  • 317,000
  • 35
  • 244
  • 286
Bamboozler
  • 17
  • 4

2 Answers2

0

See create table using JavaScript:

 var td = document.createElement('td');
    td.appendChild(document.createTextNode('text'))
hc_dev
  • 8,389
  • 1
  • 26
  • 38
0

Here is a working example, with a basic table created in the markup.

// save the table to a var
var table = document.getElementById('my_table');
// save table body to a var. select the first occurrence of tbody element with [0]
var tableRef = table.getElementsByTagName('tbody')[0];
// save new row tr to a variable. this generates a tr
var newRow = tableRef.insertRow(tableRef.rows.length);
// insert a cell into newRow at index 0, 1, and 2, the td's for this row
var newTD1 = newRow.insertCell(0);
var newTD2 = newRow.insertCell(1);
var newTD3 = newRow.insertCell(2);
// create a text node for the TD 
var tdText1 = document.createTextNode('cell text 1');
// add the text to the newly generated newTD1
newTD1.appendChild(tdText1);
// create a text node for the TD 
var tdText2 = document.createTextNode('cell text 2');
// add the text to the newly generated newTD2
newTD2.appendChild(tdText2);
// create a text node for the TD 
var tdText3 = document.createTextNode('cell text 3');
// add the text to the newly generated newTD3
newTD3.appendChild(tdText3);
/* table styles */
#my_table {
  border-collapse: collapse;
  border: 4px solid black;
  margin: 0 auto;
  text-align: center;
}

/* table tr, td styles */
#my_table th,
#my_table td {
  border: 2px solid black;
}

/* table header styles */
#my_table th {
  background-color: #33c6ff;
  color: #000;
  width: 33%;
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title></title>
</head>
<body>
  <table id='my_table'>
    <thead>
      <tr>
        <th id='table_header' colspan='3'>Table Title</th>
      </tr>
      <tr>
        <th>Header Row 1</th>
        <th>Header Row 2</th>
        <th>Header Row 3</th>
      </tr>
    </thead>
    <tbody id='table_body'>
    </tbody>
  </table> <!-- ends table -->
</body>
</html>
CJD
  • 28
  • 5