用隐藏单元格补充 colspanned table 不好吗？

Question

我一直在 table 上开发一些排序和选择功能，但我发现很难在具有 colspanned 单元格的 table 中定位。我只是添加了跨越的单元格并隐藏了它们。它看起来不错，它适用于我的 js，非常适合索引，但我想知道这是否是一种合法的方法。

.stuffing {
    display: none;
}

<table>
    <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
        <td>4</td>
    </tr>
    <tr>
        <td colspan="3">1</td>
        <td class="stuffing"></td>
        <td class="stuffing"></td>
        <td>4</td>
    </tr>
</table>

document.querySelectorAll('table tr:nth-child(1) td')[3].innerHTML // "4"
document.querySelectorAll('table tr:nth-child(2) td')[3].innerHTML // "4"

如果不是隐藏单元格，我将不得不通过 [1] 访问该值。

jQuery tablesorter iteself 在 tables 上使用 colspan 无法正确排序。

一些标签可以帮助人们找到这个问题。
检索受 colspan 或 rowspan 影响的 table 的“正确”索引。
找到每个 table 单元格的“视觉位置”。

Answer 1

如果它工作正常，则意味着解决方案是好的。当然它不是很好，但有时你必须做那样的事情，一些变通办法......但是你应该在不同的浏览器和不同版本的浏览器上检查它以确保它适用于大多数用户。如果网站应该在移动设备上运行，您也应该检查一下。

你也应该考虑一件事。更聪明的用户将能够在代码中删除这个 class 所以你应该考虑一下并检查它是否对你有危险...

也许更好的方法是给您 "tds"、一些 ID 或 classes。你可以通过 last() 函数获取 Jquery 中的 Tds。也许你可以用不同的方式来做。我需要更少的信息才能考虑不同的适当解决方案。

Answer 2

您的技术肯定会提高对具有 colspan 的 table 的编程访问。

如果您的 colspan 长度有限，您可以避免像这样使用 hidden 类：

td[colspan="2"]+td,
td[colspan="3"]+td, td[colspan="3"]+td+td,
td[colspan="4"]+td, td[colspan="4"]+td+td, td[colspan="4"]+td+td+td {
  display: none;
}

这会在 Safari 中引发错误：

document.querySelectorAll('table tr:nth-child(2) td')[3].innerHTML

这通过使用 rows 和 cells 集合（均基于 0）直接索引到 table 来解决：

var tb= document.querySelector('table');
tb.rows[0].cells[3].innerHTML;  //4
tb.rows[1].cells[3].innerHTML;  //4

用隐藏单元格补充 colspanned table 不好吗？

Is it bad to supplement colspanned table with hidden cells?

html

javascript

tablesorter