在bootstrap 4模式框中显示表格行数据

Question

在单击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：未定义结果

我怎样才能修复这个错误？！

此处演示

Answer 1

错误看起来不是发生在注释所在的位置，而是发生在循环外的console.log语句上。由于要在该循环中声明结果，所以只有在该循环中才会定义结果。

如果您希望将每个TD上的结果串联起来，并将整个结果吐出，则需要在循环开始之前执行let result。