切換與表按鈕不工作

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"等