HTML: Table and Scripts

Question

I want to write script like this once click on a button it has to add a new row to the existing table

  <!DOCTYPE html> 
    <html> 
    <head> 
     <script>
      function myFunction() { 
       <tr><td></td></tr>
      }
     </script> 
    </head> 
    <body> 
     <table border="1" id="mytable"> 
      <tr> <td>row 1, cell 1</td> <td>row 1, cell 2</td> </tr> 
      <tr> <td>row 2, cell 1</td> <td>row 2, cell 2</td> </tr> 
     </table> 
     <button onclick="myFunction()">Try it</button> 
    </body
    </html>

Plesae help how i can do it?

Please check this one http://stackoverflow.com/questions/171027/add-table-row-in-jquery — Varada, Mar 25 '13 at 07:31

score 1 · Answer 1 · answered Mar 25 '13 at 07:30

1

Try using the javascript insertRow() method.

Reference: http://www.w3schools.com/jsref/met_table_insertrow.asp

Working example: http://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_table_insertrow

answered Mar 25 '13 at 07:30

Mal

580
4
13

Thank you so much i got it. Is samething possible in ASP.net – Rajiv Mar 25 '13 at 08:27
Thank you guys i want know one more things how can insert Combo in in myFunction() sothing like this function myFunction() { str=document.getElementById('mytable').innerHTML; newstr=' row n cell 2'; document.getElementById('mytable').innerHTML=str+newstr; } – Rajiv Mar 25 '13 at 14:18
`code`function myFunction() { str=document.getElementById('mytable').innerHTML; newstr=' row n cell 2'; document.getElementById('mytable').innerHTML=str+newstr; } – Rajiv Mar 25 '13 at 14:20

score 1 · Answer 2 · edited Feb 18 '19 at 02:05

1

Try the function like:

    function myFunction() { 
        str=document.getElementById('mytable').innerHTML;
        newstr='<tr><td><select><option value="ACT">ACT</option> <option value="NSW">NSW</option> <option value="NT">NT</option> <option value="QLD">QLD</option> <option value="SA">SA</option> <option value="TAS">TAS</option> <option value="VIC">VIC</option></select></td><td>row n cell 2</td></tr>';
        document.getElementById('mytable').innerHTML=str+newstr;
    }

    <table border="1" id="mytable"> 
        <tr> <td>row 1, cell 1</td> <td>row 1, cell 2</td> </tr> 
        <tr> <td>row 2, cell 1</td> <td>row 2, cell 2</td> </tr> 
    </table> 
    <button onclick="myFunction()">Try it</button>

Fiddle: http://jsfiddle.net/QYg5a/1

You can also try it like http://viralpatel.net/blogs/dynamically-add-remove-rows-in-html-table-using-javascript/

edited Feb 18 '19 at 02:05

Dhana

1,618
4
23
39

answered Mar 25 '13 at 07:33

Rohan Kumar

40,431
11
76
106

Thank you so much i got it. Is samething possible in ASP.net – Rajiv Mar 25 '13 at 08:28
Thank you guys i want know one more things how can insert Combo in in myFunction() sothing like this – Rajiv Mar 25 '13 at 14:18
@Rajiv Test the above changes in my answer. – Rohan Kumar Mar 25 '13 at 16:17
Can i insert this combo box dynamically means once double click on dynamically added cell(td) it will show the combo box is this possible? – Rajiv Mar 27 '13 at 05:05

score 0 · Answer 3 · edited Feb 17 '19 at 19:00

   function addRow(tableID) { 
  
            var table = document.getElementById(tableID); 
  
            var rowCount = table.rows.length; 
            var row = table.insertRow(rowCount); 
  
            var cell1 = row.insertCell(0); 
            var element1 = document.createElement("input"); 
            element1.type = "checkbox"; 
            element1.name="chkbox[]"; 
            cell1.appendChild(element1); 
  
            var cell2 = row.insertCell(1); 
            cell2.innerHTML = rowCount + 1; 
  
            var cell3 = row.insertCell(2); 
            var element2 = document.createElement("input"); 
            element2.type = "text"; 
            element2.name = "txtbox[]"; 
            cell3.appendChild(element2); 
  
  
        }

    <BODY> 
  
    <INPUT type="button" value="Add Row" onclick="addRow('dataTable')" /> 
  
    <TABLE id="dataTable" width="350px" border="1"> 
        <TR> 
            <TD><INPUT type="checkbox" name="chk"/></TD> 
            <TD> 1 </TD> 
            <TD> <INPUT type="text" /> </TD> 
        </TR> 
    </TABLE> 
  
    </BODY>

Try this if it fulfill's your requirement

score 0 · Answer 4 · answered Mar 25 '13 at 07:48

0

try this:here tbl is the id of your table to which you want to insert the new row.

 $("#add_row").click(function () {
   var new_row = "<tr><td>Test1</td><td>Test2</td></tr>";
   $("#tbl").append(new_row);
 });

answered Mar 25 '13 at 07:48

Gurmeet

3,094
4
19
43

HTML: Table and Scripts

4 Answers4