如何仅使用 JS 或 CSS 在页面上动态更改 colspan。答案

【问题标题】：How do I change the colspan dynamically on page using only JS or CSS.如何仅使用 JS 或 CSS 在页面上动态更改 colspan。
【发布时间】：2017-06-23 22:14:58
【问题描述】：

我有一个第 3 方应用程序服务页面，我需要隐藏/显示一些内容。我有一系列格式化这些部分的 CSS 样式（以“_”为前缀，例如 _budget、_runrates、_forecast 等）。

影响整个部分的类按需要工作，但我还需要隐藏每个部分中的列，即。隐藏/显示预算、预测等

例如，将 __budget 更改为 _budget 将“隐藏”列。将 __runrates 更改为 _runrate 将隐藏 runrate 部分。

我希望能够通过 JS（或 JQuery）来做到这一点，或者也许有一个我没有尝试过的 CSS 组合。

我已经在下面的 JSFiddle 中隔离了动态创建页面的部分。

      <td class="mPTHCT PTRHCT0" id="htl_saw_15433_7_1_0" e="1" l="0" s="-1" cid="saw_15433_7"></td>
      <td class="mPTHCT PTRHCT1 _month _spacer" id="htl_saw_15433_7_1_1" e="1" l="1" s="-1" cid="saw_15433_7"> </td>
      <td class="mPTHCT PTRHCT2 _month" id="htl_saw_15433_7_1_2" e="1" l="2" s="-1" cid="saw_15433_7" colspan="7">May 2016</td>
      <td class="mPTHCT PTRHCT9 _quarter _spacer" id="htl_saw_15433_7_1_9" e="1" l="9" s="-1" cid="saw_15433_7"> </td>
      <td class="mPTHCT PTRHCT10 _quarter" id="htl_saw_15433_7_1_10" e="1" l="10" s="-1" cid="saw_15433_7" colspan="7">May QTD 2016</td>
      <td class="mPTHCT PTRHCT6 _year _spacer" id="htl_saw_15433_7_1_17" e="1" l="17" s="-1" cid="saw_15433_7"> </td>
      <td class="mPTHCT PTRHCT7 _yearly" id="htl_saw_15433_7_1_18" e="1" l="18" s="-1" cid="saw_15433_7" colspan="7">May YTD 2016</td>
      <td class="mPTHCT PTRHCT3 _spacer _year" id="htl_saw_15433_7_1_25" e="1" l="25" s="-1" cid="saw_15433_7"> </td>
      <td class="mPTHCT PTRHCT4 _year  _fullyearcol" id="htl_saw_15433_7_1_26" e="1" l="26" s="-1" cid="saw_15433_7" colspan="5">2016</td>
      <td class="mPTHCT PTRHCT9 _spacer _runrates" id="htl_saw_15433_7_1_31" e="1" l="31" s="-1" cid="saw_15433_7"> </td>
      <td class="mPTHCT PTRHCT10 mPTLC PTLC _runrates _runratescol" id="htl_saw_15433_7_1_32" e="1" l="32" s="-1" cid="saw_15433_7" colspan="5">Run Rates</td>

https://jsfiddle.net/damiani8/88xn4tpz/9/

提前致谢！

【问题讨论】：

您是要更改 colspan 还是隐藏单元格并更改 colspan？我不确定您是否可以使用 display=none 设置一个单元格并让 colspan 覆盖它。对我来说听起来有点乱。你可以删除一个单元格并调整 colspan，我肯定知道。

标签： javascript html css html-table

【解决方案1】：

这里是 jQuery 的例子

$("#htl_saw_15433_7_1_2").attr('colspan',3);

我还没有听说过 CSS 方法。

您还可以为不想显示的项目设置“display:none”（使用.css("display","none")）。

【讨论】：

那个id是动态的，colspan需要用下半部分的可见列数来更新。
@DamianArnold 遍历所有孩子，检查无显示，对于那些有 attr colspan 并显示非无更新 colspan...对我来说这是一个有点丑陋的方法，虽然
我知道@laser，但由于页面是由第 3 方应用程序创建的，因此我受到了限制。每次都是动态的。我在想按部分计算部分 css 类名称 - 那些标记为“隐藏”的 CSS 类。