javascript - 使用表中的按钮切换不起作用

Question

我有一个看起来像这样的表:

我想单击按钮并切换横跨 4 列的行。但是，我得到一个横跨一列的小框:

如您所见，第二张图片显示有一个框会切换并导致现有表格失真。我只想在下面弹出一行。

HTML代码:

    <table class="table table-striped table-hover">
      <tbody>
        <tr >
          <tr>
            <td class="client-avatar"><img alt="image" src="img/a2.jpg" </td>
            <td >Anthony Jackson</td>
            <td> Tellus Institute</td>
            <td><button class="btn btn-outline btn-info  dim" type="button" onclick="myFunction()"><i class="fa fa-paste"></i> </button> </td>
         </tr>
         </tr>
         <tr id="togglee">
            <td > File 1 </td>
         </tr>
         <tr id="togglee">
            <td > File 2 </td>
         </tr>

Javascript:

    <script>
    function myFunction() {
        var x = document.getElementById('togglee');
        if (x.style.display === 'none') {
            x.style.display = 'table';
        } else {
            x.style.display = 'none';
        }
    }
</script>                           

Answer 1

首先，您有一些无效的 HTML。你不能嵌套 <tr>在 tr>`.

内

第二个元素ids应该是独一无二的。如果你想使用 togglee多次使它成为一个类而不是 id。

@Aurel 指出的第三个使用 colspan在 td 上指定它应该跨越多少列。

第四，如果您希望每次单击按钮时显示多个文件，请将它们分组到一行中。

第五，你应该使用display: table-row在你的行上不是 display: block

最后，您应该找到与您的按钮相关的行:

button {
  min-height: 20px;
  min-width: 50px;
}

.togglee {
  display: none;
}

.togglee td {
  width: 500px;
}

table,
td {
  border: 1px solid black;
}

<table class="table table-striped table-hover">
  <col width=100><col width=100><col width=100><col width=100>
  <tbody>
    <tr>
      <td class="client-avatar"><img alt="image" src="img/a2.jpg"> </td>
      <td> Anthony Jackson</td>
      <td> Tellus Institute</td>
      <td><button class="btn btn-outline btn-info  dim" type="button" onclick="myFunction(this)"><i class="fa fa-paste"></i> </button> </td>
    </tr>
    <tr class="togglee" >
      <td colspan="4">
        <div>File 1</div>
        <div>File 1</div>
      </td>
    </tr>
    <tr>
      <td class="client-avatar"><img alt="image" src="img/a2.jpg"> </td>
      <td> Roon Lindsay</td>
      <td> Prion Limitied</td>
      <td><button class="btn btn-outline btn-info  dim" type="button" onclick="myFunction(this)"><i class="fa fa-paste"></i> </button> </td>
    </tr>
    <tr class="togglee">
      <td colspan="4" >
        <div>File 1</div>
        <div>File 2</div>
      </td>
    </tr>
  </tbody>
</table>

<script>
  function myFunction(el) {

    var parent = el.parentNode;
    var grandParent = parent.parentNode;
    var x = grandParent.nextElementSibling;
    //console.log(sib);

    if (!x.style.display || x.style.display === 'none') {
      x.style.display = 'table-row';
    } else {
      x.style.display = 'none';
    }
  }
</script>