点击表格行按钮无法加载对应行图片信息到Bootstrap模态框问题求助

问题排查与修复方案 #

现存问题梳理 #

• 所有行的查看按钮重复使用了相同的id Show，HTML规范中id必须全局唯一，会导致元素识别异常
• 没有实现点击按钮后读取当前行数据、填充到模态框的逻辑，现有模态框内容是静态写死的
• 动态生成表格行后额外拼接了无关的<h4>标签，会破坏表格结构导致布局异常
• 表格表头未使用正确的<thead>+<th>结构，语义和渲染都有问题
• 没有针对动态生成的按钮做事件委托绑定，点击事件无法生效

修复代码 #

HTML部分

修正表格结构，增加tbody容器：

<head>
  <title>Page Title</title>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <meta http-equiv="X-UA-Compatible" content="ie=edge" />

<script type="text/javascript" src='https://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.3.min.js'></script>
  <script type="text/javascript" src='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.3/js/bootstrap.min.js'></script>


<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link href="../webDatabase/css/style.css" rel="stylesheet">
</head>

<body>
  <input type="text" class="form-control pull-center" id="search" placeholder="Type to search table...">
  <div id="container">
    <div id="one_article" style="">
      <table id="article_table" class="table table-bordered ">
        <thead>
          <tr>
            <th>Image_id</th>
            <th>image_file_name</th>
            <th>Image_Text_output</th>
            <th>date</th>
            <th>Show_image</th>
            <th>View</th>
          </tr>
        </thead>
        <tbody></tbody>
      </table>
    </div>
  </div>

  <div class="modal fade" id="myModal" role="dialog">
    <div class="modal-dialog">

      <!-- Modal content-->
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal">&times;</button>
          <h4 class="modal-title"></h4>
        </div>

        <div class="modal-body">
        </div>

        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        </div>
      </div>
    </div>
  </div>
</body>

JS部分

移除多余逻辑，增加事件委托和模态框填充逻辑：

$(document).ready(function() {
  $("#search").keyup(function() {
    _this = this;
    $.each($("#article_table tbody tr"), function() {
      if ($(this).text().toLowerCase().indexOf($(_this).val().toLowerCase()) === -1)
        $(this).hide();
      else
        $(this).show();
    });
  });

  // 事件委托绑定动态生成的按钮点击事件
  $(document).on('click', '.view-btn', function() {
    // 读取当前行对应数据
    const imageId = $(this).data('image_id');
    const fileName = $(this).data('file_name');
    const textOutput = $(this).data('text_output');
    const date = $(this).data('date');
    // 填充模态框
    $('.modal-title').text(imageId);
    $('.modal-body').html(`
      <p>Image_id：${imageId}</p>
      <p>文件名称：${fileName}</p>
      <p>识别结果：${textOutput}</p>
      <p>生成日期：${date}</p>
      <img src="${fileName}" style="max-width:100%" alt="预览图">
    `)
  })

  $.getJSON("../Image_to_text_with_Tesseract/images_content_json.json", function(data) {
    console.log(data) //just to log in console as well
    var article_data = '';

    $.each(data, function(key, value) {
      article_data += '<tr>';
      article_data += '<td>' + value.Image_id + '</td>';
      article_data += '<td>' + value.image_file_name + '</td>';
      article_data += '<td>' + value.Image_Text_output + '</td>';
      article_data += '<td>' + value.date + '</td>';
      article_data += '<td><img src="' + value.image_file_name + '" style="width:80px;height:auto"></td>';
      // 移除重复id，增加自定义属性存数据
      article_data += '<td><button  type="button" class="btn btn-info btn-lg view-btn" data-toggle="modal" data-target="#myModal" data-image_id="'+value.Image_id+'" data-file_name="'+value.image_file_name+'" data-text_output="'+value.Image_Text_output+'" data-date="'+value.date+'" >' + value.button + '</button></td>';
      article_data += '</tr>';
    });

    $('#article_table tbody').append(article_data);
  });
});

CSS部分

调整宽度避免内容挤压：

table {
  border: 2px solid #666;
  width: 100%;
}

th {
  background: #f8f8f8;
  font-weight: bold;
  padding: 8px;
}

td {
  padding: 8px;
}

内容的提问来源于stack exchange，提问作者davaid