如何隐藏表行中的值并在单击加号时显示它

隐藏表行中的值并在单击加号时显示它，可以通过使用JavaScript和CSS来实现。

首先，我们可以在HTML中创建一个表格，并为每一行添加一个类名，以便我们可以通过类名选择器来控制行的显示和隐藏。

<table>
  <tr class="row">
    <td>行1</td>
    <td>值1</td>
  </tr>
  <tr class="row">
    <td>行2</td>
    <td>值2</td>
  </tr>
  <tr class="row">
    <td>行3</td>
    <td>值3</td>
  </tr>
</table>

接下来，我们可以使用CSS来隐藏行中的值。我们可以将值所在的<td>元素设置为不可见，并为其添加一个类名，以便我们可以通过类名选择器来控制其显示和隐藏。

td.value {
  display: none;
}

然后，我们可以使用JavaScript来添加事件监听器，以便在单击加号时显示对应行的值。我们可以为每一行的第一个单元格添加一个加号图标，并为其添加一个类名，以便我们可以通过类名选择器来控制其样式。

<table>
  <tr class="row">
    <td class="toggle">+</td>
    <td class="value">值1</td>
  </tr>
  <tr class="row">
    <td class="toggle">+</td>
    <td class="value">值2</td>
  </tr>
  <tr class="row">
    <td class="toggle">+</td>
    <td class="value">值3</td>
  </tr>
</table>

// 获取所有的加号元素
var toggles = document.getElementsByClassName('toggle');

// 为每个加号元素添加点击事件监听器
for (var i = 0; i < toggles.length; i++) {
  toggles[i].addEventListener('click', function() {
    // 切换对应行的值的显示状态
    var value = this.parentNode.nextElementSibling;
    if (value.style.display === 'none') {
      value.style.display = 'table-cell';
    } else {
      value.style.display = 'none';
    }
  });
}

现在，当单击加号时，对应行的值将显示或隐藏。

这种方法可以用于隐藏和显示表行中的任何内容，不仅限于值。您可以根据需要进行修改和扩展。

腾讯云相关产品和产品介绍链接地址：