如何用Bootstrap或原生HTML实现可选中整行的两列表格并关联展示图片

以下是可直接运行的完整实现，覆盖布局调整、表格样式优化、行选中联动图片三个核心需求：

1. 完整实现代码 #

HTML代码 #

<!-- 项目已引入Bootstrap相关依赖可忽略以下3行 -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.4.1/dist/css/bootstrap.min.css">
<script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@3.4.1/dist/js/bootstrap.min.js"></script>

<div class="container mt-4">
  <div class="row">
    <!-- 左侧表格区域 占6列 -->
    <div class="col-xs-6">
      <table class="data-table">
        <thead>
          <tr>
            <th>日期</th>
            <th>类型</th>
          </tr>
        </thead>
        <tbody>
          <!-- 每个tr的data属性存储对应卡片内容，可根据实际需求修改 -->
          <tr data-img="图片1地址" data-title="Dem partage imputation PES" data-desc="对应内容描述1">
            <td>2020-11-17</td>
            <td>Dem partage imputation PES</td>
          </tr>
          <tr data-img="图片2地址" data-title="Dem exp méd au prof expert" data-desc="对应内容描述2">
            <td>2020-11-17</td>
            <td>Dem exp méd au prof expert</td>
          </tr>
          <tr data-img="图片3地址" data-title="avis désistement IVAC" data-desc="对应内容描述3">
            <td>2020-11-17</td>
            <td>avis désistement IVAC</td>
          </tr>
          <tr data-img="图片4地址" data-title="Curriculum vitae" data-desc="对应内容描述4">
            <td>2020-11-17</td>
            <td>Curriculum vitae</td>
          </tr>
          <tr data-img="图片5地址" data-title="dem inscription dépôt direct" data-desc="对应内容描述5">
            <td>2020-11-17</td>
            <td>dem inscription dépôt direct</td>
          </tr>
          <tr data-img="图片6地址" data-title="impôt" data-desc="对应内容描述6">
            <td>2020-11-17</td>
            <td>impôt</td>
          </tr>
          <tr data-img="图片7地址" data-title="Changement adresse en ligne" data-desc="对应内容描述7">
            <td>2020-11-17</td>
            <td>Changement adresse en ligne</td>
          </tr>
          <tr data-img="图片8地址" data-title="Refus CES 180 jours Réclamation" data-desc="对应内容描述8">
            <td>2020-11-17</td>
            <td>Refus CES 180 jours Réclamation</td>
          </tr>
        </tbody>
      </table>
    </div>
    <!-- 右侧卡片区域 占6列 -->
    <div class="col-xs-6">
      <div class="card">
        <img src="默认预览图地址" class="card-img-top" alt="预览图" id="preview-img">
        <div class="card-body">
          <h5 class="card-title" id="preview-title">请选择左侧列表项</h5>
          <p class="card-text" id="preview-desc"></p>
          <a href="#" class="btn btn-primary">查看详情</a>
        </div>
      </div>
    </div>
  </div>
</div>

CSS代码 #

.data-table {
  width: 100%;
  border-collapse: collapse; /* 合并边框消除列分隔线 */
}
.data-table th, .data-table td {
  padding: 10px 15px;
  text-align: left;
  border: none; /* 清除所有单元格边框 */
  cursor: pointer;
}
/* 行悬停效果 */
.data-table tr:hover {
  background-color: #eee;
}
/* 行选中效果 */
.data-table tr.active {
  background-color: #888888;
  color: #fff;
}

JS代码 #

$(function() {
  // 绑定表格行点击事件
  $('.data-table tbody tr').click(function() {
    // 切换选中状态
    $('.data-table tbody tr').removeClass('active');
    $(this).addClass('active');
    
    // 读取当前行存储的关联内容
    const imgSrc = $(this).data('img');
    const title = $(this).data('title');
    const desc = $(this).data('desc');
    
    // 更新右侧卡片内容
    $('#preview-img').attr('src', imgSrc);
    $('#preview-title').text(title);
    $('#preview-desc').text(desc);
  });
})

2. 核心修改说明 #

• 布局：直接使用Bootstrap原生栅格系统row+col实现左右分栏，不需要自定义display属性，兼容性更强
• 表格优化：修复了原代码混用div与table标签的语法错误，通过边框合并和隐藏实现两列无分隔线效果
• 交互逻辑：通过HTML5的data属性存储每行对应的关联内容，点击行时直接读取属性更新卡片，逻辑简单易维护

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