Question

142

Populate HTML Table using Javascript

rated 0 times [ 147] [ 5] / answers: 1 / hits: 65134 / 13 Years ago, wed, june 8, 2011, 12:00:00

I want to populate a predefined html table using JavaScript:

<table>

    <tr>

        <th scope=col>ID</th>

        <th scope=col>Name</th>

    </tr>

    <div id='data'/>

</table>

using

document.getElementById('data').innerHTML = ....

But since <div> is not allowed inside of <table> above code doesn't work. What is the correct way to achieve this?

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

lucianod

Add To Favorites

Follow

Total Points: 667

Total Questions: 106

Total Answers: 92

Location: Jordan

Member since Thu, Aug 5, 2021

3 Years ago

answered 13 Years ago zahrafrancisr · Accepted Answer

Instead of Div you can use tr and td.

 <!DOCTYPE HTML PUBLIC -//W3C//DTD HTML 4.01//EN http://www.w3.org/TR/html4/strict.dtd> <html>

<head>

<script type=text/javascript>

function addRow(content,morecontent)

{

         if (!document.getElementsByTagName) return;

         tabBody=document.getElementsByTagName(tbody).item(0);

         row=document.createElement(tr);

         cell1 = document.createElement(td);

         cell2 = document.createElement(td);

         textnode1=document.createTextNode(content);

         textnode2=document.createTextNode(morecontent);

         cell1.appendChild(textnode1);

         cell2.appendChild(textnode2);

         row.appendChild(cell1);

         row.appendChild(cell2);

         tabBody.appendChild(row);





}

</script>

</head>

<body>

<table border='1' id='mytable'>

<tbody>

<tr><td>22</td><td>333</td></tr>

<tr><td>22</td><td>333</td></tr>

</tbody>

</table>

<button onClick='addRow(123,456);return false;'>

Add Row</button>

</body>

</html>