在引导程序 4 模态框中显示表格行数据

Posted 2023-05-08

【中文标题】在引导程序 4 模态框中显示表格行数据

【英文标题】：display table row data in bootstrap 4 modal box

【发布时间】：2021-07-12 20:48:20

【问题描述】：

点击show data链接后，我需要在bootstrap 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>

当我点击链接时，我在控制台中看到了这个错误：

Uncaught ReferenceError: 结果未定义

我该如何解决这个错误？！

演示here

【问题讨论】：

只是一些错别字。工作代码检查this.

@Swati：哦，你说得对。但我看到undefined 位于modal 或console 之上。

我把var result改成var result="";时出错了，然后再试一次。更新code

感谢您现在可以使用，请在答案中添加您的代码。

您已经有了一个答案，可以告诉您当前代码中存在什么问题，因此您可以接受该答案:)

【参考方案1】：

错误似乎不是发生在您有评论的地方，而是发生在您在循环之外的 console.log 语句上。由于您在该循环中声明结果，因此这是唯一定义它的地方。

如果您希望在每个 td 上连接结果并吐出整个内容，则需要在循环开始之前执行 let result。

【讨论】：

您好，只需在您的答案中添加一些代码即可完成。

【参考方案2】：

Swati 在评论中解决了我的问题：

  $(document).ready(function() 
    $('#detailsModal').on('show.bs.modal', function(e) 
      var _button = $(e.relatedTarget);
      var result="";
      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();
         result += '<div>'+ t + ' : ' + v + '</div>';
      );
      console.log(result);
      $(this).find("#container").html(result);
    );
  );

演示：here