我正在使用 bootstrap 制作表格，在表格顶部我想保留行编辑按钮。当我选择一行然后单击编辑按钮时，应该会出现一个对话框，我们用它来编辑该行中的内容。我正在使用 Java 脚本函数而不是使用任何 php 代码。请帮我给出一些提示。
<!DOCTYPE html>
<html lang="en">
<head>
<link href="css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class ="container">
<table class="table table-hover table-bordered">
<thead>
<tr>
<th>Parameter Names</th>
<th>Parameter Values</th>
<th>Remarks</th>
</tr>
</thead>
<tbody>
<tr>
<td>johncarter@mail.com</td>
<td>John</td>
<td>Carter</td>
</tr>
<tr>
<td>peterparker@mail.com</td>
<td>Peter</td>
<td>Parker</td>
</tr>
<tr>
<td>johnrambo@mail.com</td>
<td>John</td>
<td>Rambo</td>
</tr>
<tr>
<td>johnrambo@mail.com</td>
<td>John</td>
<td>Rambo</td>
</tr>
</tbody>
</table>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>
提前致谢。
最佳答案
这是我在 bootsnipp 上找到的示例.它应该为您指明正确的方向
$(document).ready(function(){
var i=1;
$("#add_row").click(function(){
$('#addr'+i).html("<td>"+ (i+1) +"</td><td><input name='name"+i+"' type='text' placeholder='Name' class='form-control input-md' /> </td><td><input name='mail"+i+"' type='text' placeholder='Mail' class='form-control input-md'></td><td><input name='mobile"+i+"' type='text' placeholder='Mobile' class='form-control input-md'></td>");
$('#tab_logic').append('<tr id="addr'+(i+1)+'"></tr>');
i++;
});
$("#delete_row").click(function(){
if(i>1){
$("#addr"+(i-1)).html('');
i--;
}
});
});
关于jquery - Bootstrap : add row edit button at the top of table，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/26863298/