how to Show edit and delete buttons in html dynamic table using java script

Question

function ViewTable(data)
     {

         var html = '<table>';
         html += '<tr>';

         for (var j in data[0]) {
             html += '<th>' + j + '</th>';
         }
         html += '</tr>';
         for (var i = 0; i < data.length; i++) {
             html += '<tr>';
             for (var j in data[i]) {

                 html += '<td>' + data[i][j] + '</td>';
             }

         }
         html += '</table>';
         document.getElementById('divRecords').innerHTML = html;

     }

I want to add edit and delete bottons on end of each row Please someone help me to get out of this.

amdg · Accepted Answer · 2017-09-13 09:04:36Z

1

The following should work.

    var html = '<table>';
     html += '<tr>';

     for (var j in data[0]) {
         html += '<th>' + j + '</th>';
     }
     html += '<th colspan="2">Actions</th>'
     html += '</tr>';
     for (var i = 0; i < data.length; i++) {
         html += '<tr>';
         for (var j in data[i]) {

             html += '<td>' + data[i][j] + '</td>';
         }
        html += '<td><a href="#">edit</td><td> | <a href="#">delete</td></tr>';
     }
     html += '</table>';
     document.getElementById('divRecords').innerHTML = html;

The sample data:

var data = [
  [1, 2],
  [3, 4],
  [5, 6]
];

The table appeared as follows

edited Sep 13, 2017 at 9:04

answered Sep 13, 2017 at 8:57

amdg

2,2392 gold badges17 silver badges27 bronze badges

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

1 Comment

Khayam Khan Over a year ago

Thanks dear its really helpful.

Collectives™ on Stack Overflow

how to Show edit and delete buttons in html dynamic table using java script

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related