时间戳

首页 > 解决方案 > 为什么使用 jquery 后 Colspan 不起作用？

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

问题描述

我一直在尝试创建一个可折叠的表格，它有几行一直可见，几行在点击时展开。可展开的行应该有一个 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 我的问题有什么解决办法吗？

标签： javascripthtmljquerycss

解决方案

colspan仅适用于像表格行一样的元素。

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

推荐阅读