CODEWITHSUNDEEP
javascripthtmljquerybootstrap-modalbootstrap-table
Kageyama
Kageyama

Reputation: 1

Insert bootstrap buttons dynamically

How can I insert, edit and delete bootstrap buttons dynamically on this table in each cell of "Azioni" column?

Then the buttons should open a modal to edit or delete one or more cell on a selected row.

I have tried many times but I failed.

MY CODE

   <!doctype html>

<head>
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
   <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
   <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">
   <link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/bootstrap-table.min.css">
   <link rel="stylesheet" href="style.css">
   <script src="https://cdn.jsdelivr.net/npm/jquery/dist/jquery.min.js ">
   </script>
   <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js "></script>
   <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js " integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM " crossorigin="anonymous "></script>
   <script src="https://unpkg.com/[email protected]/dist/bootstrap-table.min.js "></script>
   <script src="prova.js " script></script>

</head>

<body>
   <div id="tabella-utenti">
       <table data-toggle="table" data-url="employee_data.json" data-pagination="true" data-search="true" class="table table-borderless table-dark">
           <thead>
               <tr>
                   <th data-field="state" data-checkbox="true"></th>
                   <th data-sortable="true " data-field="idUser">Id User</th>
                   <th data-sortable="true " data-field="email">Email</th>
                   <th data-sortable="true" data-field="name">Name</th>
                   <th data-sortable="true " data-field="surname">Cognome</th>
                   <th data-sortable="true " data-field="is_deleted">Is Deleted</th>
                   <th data-sortable="true"> Azioni</th>
               </tr>
           </thead>
       </table>
   </div>
</body>

<html>

Upvotes: 0

Views: 586

Answers (2)

iDome89
iDome89

Reputation: 41

here you are showing us just the head of the table and not the body.Probably for the body you are taking data from somewhere. So If you have an array of data, you could loop through it and document. createElement('button').className(Your bootstrap classname')

Upvotes: 0

raihancse0908
raihancse0908

Reputation: 11

Use AJAX to get data from JSON file you used. help link Try jQuery each loop

$('#table_id tr').each(function(){
   var tr_object = this;
   $(this +' td:last').html('<button type="button" onclick="delete_action('+tr_object+')">Delete</button>');
});

function delete_action(tr_object){
     //perform delete task
}

Upvotes: 1

Related Questions