在单击show data
链接后,我需要在引导4模式中显示表行td
数据。
HTML:
<table class="table table-bordered">
<tbody>
<tr>
<td data-title="title">test</td>
<td data-title="size">14</td>
<td data-title="attribute">-</td>
<td data-title="height">120</td>
<td data-title="price">4000</td>
<td data-title="action"><a data-toggle="modal" data-target="#detailsModal" href="javascript:void(0);">show data</a></td>
</tr>
<tr>
<td data-title="title">test1</td>
<td data-title="size">12</td>
<td data-title="attribute">-</td>
<td data-title="height">150</td>
<td data-title="price">6000</td>
<td data-title="action"><a data-toggle="modal" data-target="#detailsModal" href="javascript:void(0);">show data</a></td>
</tr>
</tbody>
</table>
JS:
$(document).ready(function() {
$('#detailsModal').on('show.bs.modal', function(e) {
var _button = $(e.relatedTarget);
var $row = $(_button).closest("tr"); // Find the row
var $tds = $row.find("td");
$.each($tds, function() {
var t = $(this).attr('data-title');
var v = $(this).text();
var result = ('<div>'+ t + ' : ' + v + '</div>'); // error
});
console.log(result);
$(this).find(".container").html(result);
});
});
莫代尔:
<div class="modal fade" id="detailsModal" tabindex="-1" role="dialog" aria-labelledby="detailsModal" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered modal-lg" role="document">
<div class="modal-content">
<div class="modal-body">
<div id="container"></div>
</div>
</div>
</div>
</div>
在操作中,当我单击链接时,在控制台中看到以下错误:
未捕获的ReferenceError:未定义结果
我怎样才能修复这个错误?!
此处演示
错误看起来不是发生在注释所在的位置,而是发生在循环外的console.log
语句上。由于要在该循环中声明结果,所以只有在该循环中才会定义结果。
如果您希望将每个TD
上的结果串联起来,并将整个结果吐出,则需要在循环开始之前执行let result
。