how to get innerHTML value in javascript code

Question

I want to change table <td> data by using innerHTML property. But after applying innerHTML property those values set in <td> are not accessible in Javascript code.

So is there any alternative to innerHTML property so that value can be set in <td> and it can also be accessed in Javascript Code.

Javascript code

<script>
    var row=0,col=0,i=1;//can be used in loop

    document.getElementById("tableID").rows[row].cells[col].innerHTML=i;
</script>

Please specify your problem. At the moment it is not very clear what you want to achive. You got the Java and tha JavaSCRIPT tag. So do you want to edit something in java or in javascript? — Luftbaum, Jul 05 '17 at 13:50
`Javascript` is not `Java`! Also, you have to assign a unique ID to every cell, and use that ID in `getElementById()`. — Usagi Miyamoto, Jul 05 '17 at 13:51
Maybe you want to generate a table using javascript, get it's html afterwards and use it to parse some information in a java application. If that is right, you need a browser library that can execute js without any visual output. But I think thats not what you ment, is it? — Luftbaum, Jul 05 '17 at 14:02

score 0 · Answer 1 · answered Jul 05 '17 at 14:04

Look at this small sample, innerHTML works. Walk with cursor keys through the Table. Show us more Code

  <!doctype html>
  <html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Table key´s</title>
    <style>
      td{width:40px;height:40px;background:#ddd;}
    </style>
  </head>
  <body>
    <div id="tableContainer">
    </div>
    <script>    
      var aktRow=aktCol=4,max=9;
      tableContainer.innerHTML = '<table id="mt">'+('<tr>'+'<td></td>'.repeat(max+1)+'</tr>').repeat(max+1)+'</table>';
      mt.rows[aktRow].cells[aktCol].style.background='#f00';
      window.addEventListener("keyup", function(e){
        var colDiff, rowDiff;
        var keyMap = new Map([[37,[-1,0]],[38,[0,-1]],[39,[1,0]],[40,[0,1]]]);
        if (keyMap.has(e.keyCode)){
          mt.rows[aktRow].cells[aktCol].style.background='#ddd';
          mt.rows[aktRow].cells[aktCol].innerHTML=aktRow+'-'+aktCol;
          console.log(mt.rows[aktRow].cells[aktCol].innerHTML);
          [colDiff,rowDiff]=keyMap.get(e.keyCode);
          aktRow+=rowDiff;
          aktCol+=colDiff;
          aktRow = (aktRow>max) ? max : (aktRow < 0) ? 0 : aktRow;
          aktCol = (aktCol>max) ? max : (aktCol < 0) ? 0 : aktCol;
          mt.rows[aktRow].cells[aktCol].style.background='#f00';
        }
      }) 
    </script>
  </body>
  </html>

Max Alexander Hanna · Answer 2 · 2017-07-05T15:17:41.040

0

your code is wrong here

.rows[row].cells[col]

This is what i suggest: set an id for each cell, something like col1row1 as id, then access the cell by id:

document.getElementById("col1row1").innerHTML = i

or have a for loop go through each row and cell with getElementsByType('td').innerHTML = i for example

take a look at this : Iterating through a table with JS

edited Jul 05 '17 at 15:17

answered Jul 05 '17 at 15:11

Max Alexander Hanna

3,388
1
25
35

how to get innerHTML value in javascript code

2 Answers2