切换与表按钮不工作

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指出的第三种方法是使用（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>

Answer 2

你需要指定列跨度为<td>：

<td colspan="4">File 1</td> 

这意味着<td>应跨越4列，而不是你当然可以有其他的<td> el例如一对colspan="2"等