如下所示，我想要实现的是当用户点击特定行时，将每个td值的数据显示到模态窗口中。目前我已经堆叠而且不知道如何实现这一点 - 我试图将数据ID和模态类添加到每个td，但是这个没有用，也不知道放在里面的内容JS和模态。放下你的帮助。
JS：
$('#myModal').on('show.bs.modal', function (event) {
var getIdFromRow = $(event.relatedTarget).attr('data-id');
$(this).find('#orderDetails').html($('<b> Information for LP: ' + getIdFromRow + '</b>'))
});
模态：
@<div id="myModal" class="modal fade" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Modal Header</h4>
</div>
<div class="modal-body" id="orderDetails">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
每个循环数据都有razor :(我为每个td添加了数据ID和类模态，但它不好，你可以帮我解决）吗？ ：
...
@For Each item In Model.Transports
Dim currentItem = item
@<tr>
<td class="col-lg-1" data-toggle="modal" data-target="#myModal" data-id="1">@item.Lp</td>
<td class="col-lg-1 data-toggle="modal" data-target="#myModal" data-id="2">@item.Name</td>
<td class="col-lg-1 data-toggle="modal" data-target="#myModal" data-id="3">@item.Surname</td
....
编辑进一步讨论：
...
@For Each item In Model.Transports
Dim currentItem = item
@<tr data-toggle="modal" data-target="#editinvModal">
<td class="col-lg-1" data-id="lp">@item.Lp</td>
<td class="col-lg-1" data-id="DataPrzyjazdu">@item.DataPrzyjazdu</td>
....
模态：
@<div class="modal fade" id="editinvModal" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">
<span class="glyphicon glyphicon-remove" aria-hidden="true"></span>
</button>
<h4 class="modal-title custom_align" id="Heading">Selected row information</h4>
</div>
<div class="modal-body">
<!-- Lp -->
<div class="form-group">
<p class="form-control" title="Selected row's lp'" id="lp1" name="lp"></p>
</div>
<!-- Date -->
<div class="form-group input-group">
<span class="input-group-addon"><i class="fa fa-calendar fa-fw"></i></span>
<input readonly class="form-control form_datetime" name="date" id="date1" type="text">
</div>
</div>
<div class="modal-footer ">
<div class="row-fluid">
<button name="cancel" data-dismiss="modal" class="btn btn-warning btn-lg">
<span class="glyphicon glyphicon-ok-sign"></span> Ok
</button>
</div>
</div>
</div>
</div>
</div>
JS：
$(document).ready(function () {
$('#editinvModal').on('shown.bs.modal', function (event) {
var button = $(event.relatedTarget); //button that triggered the modal
var lp = button.data('lp');
var date = button.data('DataPrzyjazdu');
var modal = $(this);
modal.find('.modal-body #lp1').val(lp);
modal.find('.modal-body #date1').val(date);
});
$(".form_datetime").datetimepicker({
format: 'dd-mm-yyyy',
minView: 2,
pickTime: false,
autoclose: true,
todayBtn: true
});
});
答案 0 :(得分：0)
编辑基于OP的评论
我真正想要的是用户点击某个特定的tr，然后modal将以模态显示所有td's数据
在HTML中
使用data属性将一个或多个值（个人测试最多15个值）传递给模态，
data-id="item.Lp1"
data-name="item.Name1"
data-surname="item.Surname1"
可以添加更多内容，但请确保每个data属性名称都是唯一的
<table>
<tr data-id="item.Lp1" data-name="item.Name1" data-surname="item.Surname1" data-toggle="modal" data-target="#myModal">
<td class="col-lg-1">item.Lp1</td>
<td class="col-lg-1">item.Name1</td>
<td class="col-lg-1">item.Surname1</td>
</tr>
<tr data-id="item.Lp2" data-name="item.Name2" data-surname="item.Surname2" data-toggle="modal" data-target="#myModal">
<td class="col-lg-1">item.Lp2</td>
<td class="col-lg-1">item.Name2</td>
<td class="col-lg-1">item.Surname2</td>
</tr>
<tr data-id="item.Lp3" data-name="item.Name3" data-surname="item.Surname3" data-toggle="modal" data-target="#myModal">
<td class="col-lg-1">item.Lp3</td>
<td class="col-lg-1">item.Name3</td>
<td class="col-lg-1">item.Surname3</td>
</tr>
</table>
在JS（模态事件监听器）
中$('#myModal').on('shown.bs.modal', function (e) {
var id = $(e.relatedTarget).data('id'); //<- It's data-id value
var name = $(e.relatedTarget).data('name'); //<- It's data-name value
});
现在，如果要将变量var值传递给输入，可以执行
$("#selector1").val(id);
$("#selector2").val(name);
或者，如果要将变量var值传递给HTML，则可以执行
$("#selector1").html(id);
$("#selector2").html(name);
最终的JS将是
$(document).ready(function() {
$('#myModal').on('shown.bs.modal', function (e) {
var id = $(e.relatedTarget).data('id'); //<- It's data-id value
var name = $(e.relatedTarget).data('name'); //<- It's data-name value
var surname = $(e.relatedTarget).data('surname'); //<- It's data-surname value
$("#selector1").val(id); //<- Passing to input only
$("#selector2").html(name); //Passing to HTML only
$("#selector3").val(surname); //Passing to Input only
});
});
现在使用模态，添加selectors
<div id="myModal" class="modal fade" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Modal Header</h4>
</div>
<div class="modal-body">
To pass value to input
<input type="text" id="selector1" name="selector1" value="">
<br> To pas value to HTML
<div id="selector2"></div>
<br> To pass value to input
<input type="text" id="selector3" name="selector3" value="">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
SideNote：请记住# Ids在整个文档中必须是唯一的
根据以上代码
提示example