如何在模態中追加一行？
[英]How to append a row in modal?
問題描述
我的表格如下。 我想在每次點擊事件處理程序時調用
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script
src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdn.datatables.net/1.10.13/js/jquery.dataTables.min.js"></script>
<script>
$(document).ready(function() {
var t = $('#example').DataTable();
var counter = 1;
t.row.add( [
"<input type='checkbox'>",
"<a href='#'>"+ counter+'.1' +"</a>",
counter +'.3',
counter +'.4',
counter +'.5',
counter +'.6'
]).draw( true );
counter++;
t.row.add( [
"<input type='checkbox'>",
"<a href='#'>"+ counter+'.1' +"</a>",
counter +'.3',
counter +'.4',
counter +'.5',
counter +'.6'
]).draw( false );
counter++;
$("tr").click(function(context) {
var value = context.currentTarget.innerHTML;
$(".modal-body").after(value);
$("#11").prop("hidden",false);
});
$(".btn").click(function() {
$(".modal-body").empty();
$("#11").prop("hidden",true);
});
});
</script>
</head>
<body>
<table id="example" class="display" cellspacing="0" width="100%">
<thead>
<tr>
<th>Sr No.</th>
<th name="aa">Modal View</th>
<th>Label1</th>
<th>Label2</th>
<th>Label3</th>
<th>Label4</th>
</tr>
</thead>
</table>
<div id="11" hidden="true" class="modal-content">
<div class="modal-header">
<h4 class="modal-title"></h4>
</div>
<div class="modal-body">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</body>
</html>
這里當點擊tr我發現模態視圖正在打開但是在點擊該行的任何列時打開。 此外，如果我不關閉該模態，它將所有其他行數據附加到該模態。我也不希望這樣。
1 個解決方案
解決方案1
0 2017-02-22 22:01:51
下面給出的可能是你想要的最接近的答案，也是現代的做法。 您可以參考此鏈接以獲取有關動態創建模態的方式的更多詳細信息。
$(document).ready(function() { var t = $('#example').DataTable(); for (i = 1; i <= 10; i++) { t.row.add([ '<input type="checkbox">', '<a href="javascript:void(0)" onclick="showModal(' + i + ')">' + i + '.1' + '</a>', i + '.3', i + '.4', i + '.5', i + '.6' ]).draw(true); } }); function showModal(rowid) { BootstrapDialog.show({ title: 'Title goes here.', message: function() { var msg = ''; msg += '<table>'; msg += ' <thead>'; msg += ' <tr>' + $('#example thead tr').html() + '</tr>'; msg += ' </thead>'; msg += ' <tbody>'; msg += ' <tr>' + $('#example tbody tr:nth-child(' + rowid + ')').html() + '</tr>'; msg += ' </tbody>'; msg += '</table>'; return msg; }, buttons: [{ label: 'Close', action: function(dialog) { dialog.close(); } }] }); }
<!-- Latest compiled and minified CSS --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap3-dialog/1.34.7/css/bootstrap-dialog.min.css"> <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous"> <!-- jQuery library --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> <!-- Latest compiled JavaScript --> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap3-dialog/1.34.7/js/bootstrap-dialog.min.js"></script> <script src="https://cdn.datatables.net/1.10.13/js/jquery.dataTables.min.js"></script> <table id="example" class="display" cellspacing="0" width="100%"> <thead> <tr> <th>Sr No.</th> <th name="aa">Modal View</th> <th>Label1</th> <th>Label2</th> <th>Label3</th> <th>Label4</th> </tr> </thead> </table>
如何在引導模式中的表中附加行
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.