How to convert HTML table to Javascript

Question

So as a beginner, I have no idea how to create a table using Javascript. I can make a table using a simple html file but not in Javascript.

The output should have 2 columns and 4 rows. I also need to use the prompt tag in order to insert data for the second column. Not to mention that I need to average the total number in the 2nd column.

I tried searching but I got mixed results and its confusing me.so please help me

this is the html file

<html>
    <body>

    <table border="1" style="width:30%">
        <tr>
            <td>Rose</td>

            <td>40</td>
        </tr>
        <tr>
            <td>Daisy</td>

            <td>50</td>
        </tr>
        <tr>
            <td>Orchids</td>

            <td>60</td>
        </tr>
        <tr>
            <td>Flowers</td>
            <td>150</td>
        </tr>
    </table>

    </body>
</html>

You can refer http://stackoverflow.com/questions/13775519/html-draw-table-using-innerhtml OR http://stackoverflow.com/questions/14643617/create-table-using-javascript — DimoMohit, Sep 30 '14 at 05:52

score 0 · Answer 1 · answered Sep 30 '14 at 06:00

Try this - >

var Rose = prompt("Enter price for Rose?");
var Daisy = prompt("Enter price for Daisy?");
var Orchids = prompt("Enter price for Orchids?");

var flowers = Number(Rose) + Number(Daisy) + Number(Orchids);

var table = document.createElement("table");

createTable();

function createTable(){
    createTrTds("Rose",Rose);
    createTrTds("Daisy",Daisy);
    createTrTds("Orchids",Orchids);
    createTrTds("Total",flowers);
  document.getElementById("table").appendChild(table);
}


function createTrTds(text,value){
    var tr = document.createElement("tr");   
    
    var td1 = document.createElement("td");
    var td2 = document.createElement("td");
    
    var txt1 = document.createTextNode(text);
    var txt2 = document.createTextNode(value);
    
    td1.appendChild(txt1);
    td2.appendChild(txt2);
    
    tr.appendChild(td1);
    tr.appendChild(td2);
    
    table.appendChild(tr);
    
}

td
{
    border: 1px solid black;
}

<div id="table">
</div>

Rickard Staaf · Answer 2 · 2014-09-30T06:33:56.883

You will be helped by using a framework for this, jquery or angularjs comes to mind to solve it. However the pure JavaScript way looks like this:

This will create a table with inputs for the number of flowers and sum them up at the bottom when numbers change, you can also add more flower types in the JavaScript file.

var tabledef = [];
tabledef['Rose'] = 40;
tabledef['Daisy'] = 50;
tabledef['Orchids'] = 60;

writeTable();

function writeTable() {
  var table = '<table border="1" style="width:30%">';
  var sum = 0;
  for (var i in tabledef) {
    sum = sum + tabledef[i];
    table = table + '<tr><td>' + i + '</td><td><input id="' + i + '" onchange="recalculate(this)" type="number" value="' + tabledef[i] + '"></td></tr>';
  }
  table = table + '<tr><td>Flowers</td><td>' + sum + '</td></tr></table>';
  document.getElementById('myTable').innerHTML = table;
}

function recalculate(box) {
  tabledef[box.id] = box.valueAsNumber;
  writeTable();
}

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <title></title>
</head>

<body>
  <div id="myTable"></div>
  <script src="createTable.js"></script>
</body>

</html>

score -1 · Answer 3 · answered Sep 30 '14 at 05:50

You just need array with data and then fill table as thought it was an html document

var table = '<table border="1">',
    data = [['Rose','Daisy','Orchids','Flowers'],[40,50,60,150]];

for (var i = 0; i < data[0].length; i++) {
    table += '<tr>';
    for (var j = 0; j < data.length; j++) {
        table += '<td>' + data[j][i] + '</td>';
    }
    table += '</tr>';
}
table += '</table>';
document.getElementById('container').innerHTML = table;

http://jsfiddle.net/5pdac6sb/

How to convert HTML table to Javascript

3 Answers3