时间戳

首页 > 解决方案 > 动态插入引导按钮

javascript - 动态插入引导按钮

问题描述

如何在“Azioni”列的每个单元格的此表上动态插入、编辑和删除引导按钮？

然后按钮应该打开一个模式来编辑或删除选定行上的一个或多个单元格。

我已经尝试了很多次，但我失败了。

我的代码

   <!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/bootstrap-table@1.18.3/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/popper.js@1.16.0/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/bootstrap-table@1.18.3/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>

标签： javascripthtmljquerybootstrap-modalbootstrap-table

解决方案

使用 AJAX 从您使用的 JSON 文件中获取数据。帮助链接 在每个循环中尝试 jQuery

$('#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
}

推荐阅读