我一直在尝试将从表中获取的值传递给模式。
我做的第一件事是在特定行上单击按钮时，该行中的<td>值显示为alert。效果很好，但是我想进一步删除alert并在单击该特定按钮时使<td>的值以模式出现。我打算使用引导程序模式。
代码的第一部分工作完美：
$(document).ready(function() {
// code to read selected table row cell data (values).
$("#dtBasicExample").on('click', '.btn-outline-warning', function() {
// get the current row
var currentRow = $(this).closest("tr");
var col1 = currentRow.find("td:eq(0)").text(); // get current row 1st TD value
var col2 = currentRow.find("td:eq(2)").text(); // get current row 2nd TD
var col3 = currentRow.find("td:eq(3)").text();
var col4 = currentRow.find("td:eq(4)").text(); // get current row 3rd TD
var data = "The requisition with number " +
col1 + " initiated by " + col2 + " of " + col4 + " " + col3 + " has been queried";
alert(data);
});
})
这就是我想要做的：
$(document).ready(function() {
// code to read selected table row cell data (values).
$("#dtBasicExample").on('click', '.btn-outline-warning', function() {
// get the current row
var currentRow = $(this).closest("tr");
var col1 = currentRow.find("td:eq(0)").text(); // get current row 1st TD value
var col2 = currentRow.find("td:eq(2)").text(); // get current row 2nd TD
var col3 = currentRow.find("td:eq(3)").text();
var col4 = currentRow.find("td:eq(4)").text(); // get current row 3rd TD
var data = "The requisition with number " +
col1 + " initiated by " + col2 + " of " + col4 + " " + col3 + " has been queried";
document.getElementsByClassName('modal-body').innerHTML = data;
});
})
这是我的模态：
<!-- Modal -->
<div class="modal fade" id="basicExampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
<tr>
<td>
<input type="checkbox" name="" value="">
</td>
<td>PO13238</td>
<td>Ibese</td>
<td>Yusuf Jimoh</td>
<td>Naira</td>
<td>150,00</td>
<td>
<p><a class="btn btn-outline-success btn-sm m-0 waves-effect" href="#ex1" rel="modal:open"><i class="fa fa-check"></i></a></p>
<button type="button" class="btn btn-outline-success btn-sm m-0 waves-effect" href="#ex1" rel="modal:open"><i class="fa fa-check"></i></button>
<button type="button" class="btn btn-outline-warning btn-sm m-0 waves-effect"><i class="fa fa-question"></i></button>
<button type="button" class="btn btn-outline-danger btn-sm m-0 waves-effect" href="#ex1" rel="modal:open" onclick="remove()"><i class="fa fa-times"></i></button>
</td>
</tr>
答案 0 :(得分：0)
它不起作用的原因是因为getElementsByClassName()返回了HTMLCollection，而不是单个节点，所以document.getElementsByClassName('modal-body').innerHTML无法起作用。
相反，您需要从集合中选择所需的节点，然后在该元素上设置innerHTML。
代替
document.getElementsByClassName('modal-body').innerHTML = data;
使用
document.getElementsByClassName('modal-body')[0].innerHTML = data;
注意：我使用的是0，因为只有一个模态，如果您有多个模态/模体，则可能需要更改该索引。
答案 1 :(得分：0)
对代码进行一些更改以使其起作用。此外，问题线似乎是
document.getElementsByClassName('modal-body').innerHTML = data;
document.getElementsByClassName（）返回数组，因此获取数组的第一个元素以设置数据
$(document).ready(function() {
// code to read selected table row cell data (values).
$(document).on('click', '.btn-outline-warning', function() {
// get the current row
var currentRow = $(this).closest("tr");
var col1 = currentRow.find("td:eq(0)").text(); // get current row 1st TD value
var col2 = currentRow.find("td:eq(2)").text(); // get current row 2nd TD
var col3 = currentRow.find("td:eq(3)").text();
var col4 = currentRow.find("td:eq(4)").text(); // get current row 3rd TD
var data = "The requisition with number " +
col1 + " initiated by " + col2 + " of " + col4 + " " + col3 + " has been queried";
alert(data);
document.getElementsByClassName('modal-body')[0].innerHTML = data;
$('#exampleModal').modal('show');
});
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.2/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css" rel="stylesheet" />
<div class="container" style="border:solid 1px;">
<table class="table table-hover">
<thead>
<tr>
<th>#</th>
<th>First Name</th>
<th>Last Name</th>
<th>Username</th>
<th>4</th>
<th>5</th>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td>
<input type="checkbox" name="" value="" id="dtBasicExample">
</td>
<td>PO13238</td>
<td>Ibese</td>
<td>Yusuf Jimoh</td>
<td>Naira</td>
<td>150,00</td>
<td>
<p><a class="btn btn-outline-success btn-sm m-0 waves-effect" href="#ex1" rel="modal:open"><i class="fa fa-check"></i></a></p>
<button type="button" class="btn btn-outline-success btn-sm m-0 waves-effect" href="#ex1" rel="modal:open"><i class="fa fa-check"></i></button>
<button type="button" class="btn btn-outline-warning btn-sm m-0 waves-effect"><i class="fa fa-question"></i></button>
<button type="button" class="btn btn-outline-danger btn-sm m-0 waves-effect" href="#ex1" rel="modal:open" onclick="remove()"><i class="fa fa-times"></i></button>
</td>
</tr>
</tbody>
</table>
<!-- Modal -->
<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
</div>
答案 2 :(得分：-1)
您正在绑定网页中的表格元素，例如tr，td。但是您的tr和td没有父表标记，这可能是一个问题。您可以使用ID制作空表，也可以使用开始和结束表标签从jquery获取整个表数据