用隐藏的单元格补充表格是否不好？ [英] Is it bad to supplement colspanned table with hidden cells?

问题描述

我一直在桌子上开发一些排序和选择功能，我发现很难在带有放大细胞的桌子上定位。我只是添加了跨越的细胞并将它们隐藏起来。它看起来不错，它适用于我的js，非常适合索引，但我想知道这是否合法。

> .stuffing {
display：none;



  <表> 
< 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无法在包含colspan的表上正确排序。

---

帮助人们发现此问题的一些标签。

检索受colspan或rowspan影响的表的正确索引。

查找每个表格单元格的可视位置。

解决方案

如果您的 colspan >长度有限，你可以避免使用隐藏这样的类：

  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 
  pre> 
 
 
这可以通过使用行和单元格集合（都是从0开始的）：
 
 
  var tb = document.querySelector（'table'）; 
 tb.rows [0] .cells [3] .innerHTML; // 4 
 tb.rows [1] .cells [3] .innerHTML; // 4 
  
 
I have been developing some sorting and selecting functions on a table and I found it very difficult to orient in a table with colspanned cells. I simply added the spanned cells and hid them. It looks good, it works with my js, great for indexing, but I would like to know if that is a legit approach.
.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"
If it wasn't for the hidden cells, I would have to access the value by [1].


The jQuery tablesorter iteself doesn't sort properly on tables with colspan.

Some tags to help people find this issue.

Retrieve "correct" index of table affected by colspan or rowspan.

Find each table cell's "visual location".
解决方案
Your technique certainly improves programmatic access to tables having colspans.

If your colspan length is limited, you could avoid using hidden classes like this:
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;
}
This throws an error in Safari:
document.querySelectorAll('table tr:nth-child(2) td')[3].innerHTML
This is resolved by indexing directly into the table using the rows and cells collections (both 0-based):
var tb= document.querySelector('table');
tb.rows[0].cells[3].innerHTML;  //4
tb.rows[1].cells[3].innerHTML;  //4


                        
这篇关于用隐藏的单元格补充表格是否不好？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！