Question

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

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

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

HTML code：

    <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。你不能在{> 1}内嵌Name="General"。

其次，元素<tr>应该是唯一的。如果您想多次使用ids，请将其设为非ID和<。p>

第三，@ Aurel指出使用togglee上的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;
}

Answer 2

您需要为var res = "[2017,7,18,9,0]".match(/\d+/g).map(Number)指定列范围：

<td>

这意味着<td colspan="4">File 1</td>应该跨越4列而不是1.您当然可以拥有其他<td>元素，例如与<td>等配对

用表中的按钮切换不工作

2 个答案: