javascript - 为什么使用jquery后colspan不起作用？

Question

我一直在尝试创建一个可折叠表，其中有几行始终可见，并且有几行在单击时展开。可展开行应该有单列 colspan 4 ，但这并没有不起作用，并且该行的唯一列将其自身限制为 colspan 1。 这是我使用过的代码:

var coll = document.getElementsByClassName("breakrow");
var i;
for (i = 0; i < coll.length; i++) {
  coll[i].addEventListener("click", function() {
    this.classList.toggle("active");
    var content = this.nextElementSibling;
    if (content.style.display === "block") {
      content.style.display = "none";
    } else {
      content.style.display = "block";
    }
  });
}

<table>
  <tr class="breakrow">
    <td>one</td>
    <td>4324</td>
    <td>&nbsp;&nbsp;<img src="green.png" style="width: 30.5%;height: 2.5%;"></td>
    <td><img class="down" src="down.png" style="width: 5vh;height: 1.5%;"></td>
  </tr> 
  <tr class="datarow" style="display: none;">
    <td  colspan="4">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</td>
  </tr>
</table>

您可以看一下问题:https://drive.google.com/drive/folders/1rd77LXNPc_Gd_cHfyL74oyga9H7y-qGO?usp=sharing 我的问题有解决办法吗？

Answer 1

colspan 仅适用于行为类似于表格行的元素。

您已将 display 属性设置为 block，而不是 table-row。