Bootstrap table-通过单击获取TD值的条带化

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap-table@1.18.5/dist/bootstrap-table.min.js"></script>

<table id="myTable" class="table">
  <thead>
    <tr>
      <th>列1</th>
      <th>列2</th>
      <th>列3</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td onclick="getTDValue(this)">值1</td>
      <td onclick="getTDValue(this)">值2</td>
      <td onclick="getTDValue(this)">值3</td>
    </tr>
    <tr>
      <td onclick="getTDValue(this)">值4</td>
      <td onclick="getTDValue(this)">值5</td>
      <td onclick="getTDValue(this)">值6</td>
    </tr>
  </tbody>
</table>

function getTDValue(td) {
  var value = td.innerHTML;
  // 添加条带化效果，例如改变背景色
  td.style.backgroundColor = "yellow";
  // 其他操作，例如将值显示在其他位置
  console.log(value);
}