Java Script : Add text field and button dynamically in table

Question

I have a button as well as in a table row.When I click on button new row should be added in the table and button should be present in newly added row .refer the picture enter image description here

http://viralpatel.net/blogs/dynamically-add-remove-rows-in-html-table-using-javascript/ — vrajesh, Jun 12 '15 at 13:41
please provide a piece of code, SO is not a code-writing service. — n00dl3, Jun 12 '15 at 13:42
You could just place the button below the table, so would get rid off dealing with the button and just deal with inserting rows to the table wich is easy following this: https://developer.mozilla.org/en-US/docs/Web/API/HTMLTableElement/insertRow — Allende, Jun 12 '15 at 13:56
i have already tried the same vrajesh but my problem is different.when you add new row button should go with that and i can not use jquery.I have to do the same only using javascript. — Rajeev Akotkar, Jun 12 '15 at 13:59

score 0 · Answer 1 · answered Jun 12 '15 at 13:46

Here's a quick solution to adding new rows with buttons that will also add new rows.

You didn't add any code, but this works.

https://jsfiddle.net/scheda/Lhsvmqoy/

var b = document.querySelector('.clicky')
var table = document.querySelector('table');
var insert_this = '<tr><td><input type="text" placeholder="Look ma!"/><button class="clicky">Add more stuff</button></td></tr>';

document.querySelector('body').addEventListener('click', function(e) {
    if (e.target.className === 'clicky') {
        table.innerHTML += insert_this;
    }
});

score 0 · Answer 2 · edited May 23 '17 at 12:01

This should work as you expect:

<!DOCTYPE html>
<head>
    <style>
        td,table{border:solid 1px;}
    </style>
    <title>Table sample </title>    
</head> 
<body>
<table id="myTable">
    <tr>
        <td>Row 1</td><td></td>
    </tr>
    <tr>
        <td>Row 2</td><td><button  id="newRow">New Row (original button)</button></td>
    </tr>
</table>        
</body>

<script>
    function addRow() {
    // Get a reference to the table
    var tableRef = document.getElementById('myTable');

   // Insert a row in the table at the end 
   var newRow   = tableRef.insertRow(tableRef.rows.length);

   // Insert a cell in the row at index 0
   var newCell  = newRow.insertCell(0);
   newCell.innerHTML="Row " + tableRef.rows.length;
   var newCell  = newRow.insertCell(1);

   // Append button node to the cell
   var newButton  = document.getElementById('newRow');  
   newCell.appendChild(newButton);
}

function addEvent(elem, event, fn) {
    if (elem.addEventListener) {
        elem.addEventListener(event, fn, false);
    }else {
        elem.attachEvent("on" + event, function() {
        // set the this pointer same as addEventListener when fn is called
             return(fn.call(elem, window.event));   
        });
    }
}
var mybutton = document.getElementById("newRow");
addEvent(mybutton,"click",addRow);
</script>
</html>

Source/Credits: The addEventListener function: adding event listener cross browser

Add row function (modified from): https://developer.mozilla.org/en-US/docs/Web/API/HTMLTableElement/insertRow

Java Script : Add text field and button dynamically in table

2 Answers2