Dynamically insert table values based upon input?

Question

Based upon user-input I want to generate a matrix / table for display. Here is the html

html

    <meta http-equiv="Content-Type" content="text/html; charset=windows-1252"/>  
    <title>lostBondUserPmtEntry</title>      


<body> 


   <form name="test" ><font face="Verdana"  size = "2">  
      <input name="Text1" type="text" /> score <br>
   <input type="submit" Name ="test" id="gp"/>  
   <input type="hidden" name="dateFactor">

       <table border="1">
<tr>
<td>sensitivity level</td>
    <td>criticality level</td>
    <td>priority level</td>
<td>Response time</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
    <td>high</td>
    <td>2 hours</td>
</tr>
</table>
</form>   
</body>

DEMO

The brief algo is

if score is 10 (certain value) populate the table as with predefined values (those values with column names are shown in DEMO). I want the table to be generated on particular button. I can call function, but I want to know how to append the html code for table on function call.

Thanks.

@Joke_Sense10 you really awesome with the for loops:) but hey is it not the more easy way if i go with just append inner html code as explained below in answers? — user3066819
– user3066819, Commented Dec 9, 2013 at 18:39
My solution is just hardcoded..you can go with below answer..it's simple and neat..:) — Joke_Sense10
– Joke_Sense10, Commented Dec 9, 2013 at 19:03

LorenzoR · Accepted Answer · 2013-12-09 18:35:36Z

2

To append a row to the table you can try something like this:

function addRow(tableID) {

        var table = document.getElementById(tableID);

        var rowCount = table.rows.length;
        var row = table.insertRow(rowCount);

        var cell1 = row.insertCell(0);
        cell1.innerHTML = "cell 1 text";

        var cell2 = row.insertCell(1);
        cell2.innerHTML = "cell 2 text";

        var cell3 = row.insertCell(2);
        cell3.innerHTML = "cell 3 text";


}

edited Dec 9, 2013 at 18:35

answered Dec 9, 2013 at 18:29

LorenzoR

4212 silver badges14 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

user3066819 Over a year ago

the tableID is it necessary i pass it in function, i can get it using getelementByID as well using quotes?

LorenzoR Over a year ago

No, tableID is not necessary.

Collectives™ on Stack Overflow

Dynamically insert table values based upon input?

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related