Question

我正在处理一个表格，我正在尝试这样做，如果您单击行上的任意位置（包括空格），则会选中相应的复选框。我尝试在 <label> 标签之前/之后放置一个 <tr>，但这似乎根本不起作用。接下来，我尝试将每个 <td> 的内容作为标签，效果很好，除非您单击文本之间行上的空白区域，然后什么也没有发生。

如何使整行可选？

body {margin: 0; background-color: #F2F2F2;}

.topbar {
  z-index: 10;
  position: fixed;
  top: 0; left: 0;
  width: 100vw; height: 56px;
  font-size: x-large;
  background-color: #5B7042;
  border-bottom: 4px solid #3F5328}

#bottombar {
  position: fixed;
  width: 100vw; height: 60px;
  bottom: 0; left: 0;
  padding: 4px;
  box-sizing: border-box;
  border-top: 2px solid darkgray;
  background-color: white;}


#list {
  padding: 20px;
  margin-top: 60px;
  margin-bottom: 60px;
  min-height: calc(100vh - 120px);
}

table {border-spacing: 0}

th{
  padding: 16px;
  color: #5B7042;
  border-bottom: 2px solid #5B7042}

td {
  padding-top: 6px;
  padding-bottom: 6px;
  border-bottom: 1px solid lightgray;}

td:not(.name) {text-align: center}

tbody tr:hover{
  transform: scale(1.01);
  background-color: #E3E3E3}

.pic{
  display: inline-block;
  width: 25px;
  clip-path: circle();
  margin-right: 10px;}

<link rel='stylesheet' href='https://classcolonies.com/resources/style.css'>

<div class='topbar'></div>

<form id='list'>
  <table>
    <colgroup>
      <col width='1%'>
      <col width='6%'>
      <col width='3%'>
      <col width='3%'>
      <col width='3%'>
      <col width='3%'>
      <col width='3%'>
    </colgroup>
    <thead>
      <tr>
        <th><input type='checkbox'></th>
        <th>Student</th>
        <th>Seen</th>
        <th>Lvl</th>
        <th>Pay</th>
        <th>Money</th>
        <th>Streak</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td><input type='checkbox' id='1'></td>
        <td class='name'>
          <label for="1">
            <img class='pic' src='https://mrdansby.com/resources/pics/1.png'>
            <span>John Doe</span>
          </label>
        </td>
        <td><label for="1">1d ago</label></td>
        <td><label for="1">15</label></td>
        <td><label for="1">$10/hr</label></td>
        <td><label for="1">$1300</label></td>
        <td><label for="1">?32</label></td>
      </tr>
      <tr>
        <td><input type='checkbox' id='2'></td>
        <td class='name'>
          <label for="2">
            <img class='pic' src='https://mrdansby.com/resources/pics/1.png'>
            <span>Jane Doe</span>
          </label>
        </td>
        <td><label for="2">3m ago</label></td>
        <td><label for="2">21</label></td>
        <td><label for="2">$11/hr</label></td>
        <td><label for="2">$2560</label></td>
        <td><label for="2">?15</label></td>
      </tr>
    </tbody>
  </table>
</form>

<div id='bottombar'></div>

Answer 1

我能够让它工作的方法是我在 tr 标签中添加了一个类名，然后使用了一些 JavaScript。我正在使用的 JavaScript 将单击事件侦听器添加到整行，然后从单击事件侦听器中检查是否选中了复选框。我为此创建了一个 CodeSandbox：https://codesandbox.io/s/trusting-architecture-8s13o?file=/src/index.js

Answer 2

无法使用 <label> 标记将整个表格行转换为标签。为此，您需要使用 JavaScript。

在下面的代码中，点击事件附加到表格的 <tr> 元素。如果单击其中之一，则切换其中的复选框。即使您单击单元格之间的空格，也会发生这种情况。

另外，请注意每个复选框都有一个 aria-labelledBy 属性，该属性指向用户名表格单元格，从而保持可访问性。您可以将相同的概念应用到您的表格中。

document.querySelector('table').addEventListener('click', (e) => {
    if (e.target.tagName === 'INPUT') return;
    const row = e.target.tagName === 'TR' ? e.target : e.target.parentNode;
    const childCheckbox = row.querySelector('input[type="checkbox"]');
    childCheckbox.checked = !childCheckbox.checked;
});

td {
  padding: 1rem;
  border: 1px solid black;
}

<table>
  <tr>
    <td>
      <input type="checkbox" aria-labelledBy="user1">
    </td>
    <td id="user1">User 1</td>
    <td>Info A</td>
    <td>Info B</td>
  </tr>
  <tr>
    <td>
      <input type="checkbox" aria-labelledBy="user2">
    </td>
    <td id="user2">User 2</td>
    <td>Info A</td>
    <td>Info B</td>
  </tr>
<table>

HTML 整个表格行作为复选框标签

2 个答案: