下面给出了我的表格。 我想知道何时单击事件处理程序调用
<!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 时，我发现模态视图正在打开，但它是在单击该行的任何列时打开的。 另外，如果我不关闭该模式，它会将所有其他行数据附加到该模式。我也不希望这样。
最佳答案
下面给出的可能是您想要的最接近的答案，也是现代的实现方式。您可以引用this link有关动态创建模态方式的更多详细信息。
$(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>关于javascript - 如何在模态中追加一行？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/42389848/