CODEWITHSUNDEEP
javascripthtmlhtml-table
user3066819
user3066819

Reputation: 359

Dynamically insert table values based upon input?

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.

Upvotes: 1

Views: 2455

Answers (1)

LorenzoR
LorenzoR

Reputation: 421

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";


}

Upvotes: 2

Related Questions