Question

我需要隐藏表格中的列，但是涉及行间隔并且它会使函数混乱。我感谢任何帮助。以下是我的代码的链接：

这是函数（在本例中，我试图隐藏第3列）：

$('#toggle').click(function(){
var lastChilds = $('#tbl td:nth-child(3)');
lastChilds.each(function(i){
    var rowSpan = $(this).attr('rowspan');
    if(rowSpan !== undefined){
      lastChilds.splice(i+1, rowSpan-1);

    }
     $(this).toggle();

  });
    });

Answer 1

我最初对此感兴趣，因为它看似微不足道，但实际上却令人难以置信。我已经尝试了各种方法来解决rowspan以切换正确的单元格。我最初昨天回答，但我很快就把它删了，因为我知道它失败了。

当我们说“第3列”时，并不一定意味着<td>将成为该行的第三个子节点，因为就HTML和rowspan的工作方式而言。

然后是顿悟：表格是完美的网格，例如，所有“视觉感知”作为第3列的单元格都有一个共同点，它们都共享相同的偏移量。

这是我到目前为止最接近的，这可能是一种基于一个重要假设的激进方法：整个表中没有colspan 。（否则，一切都会变成大便）

此演示版允许您切换所需的任何列，希望具有任何行复杂度。

（如果有一个更优雅的解决方案，我当然想知道自己）

DEMO ：http://jsfiddle.net/terryyounghk/nGEHW/

$(document).ready(function () {

    var $table = $('#tbl');

    (function scanTable($table) {

        var $rows = $table.find('tr'),
            $cells = $table.find('td'),
            map = {};

        // the first row will always have all n columns of cells,
        // so this is the safest row to collect each columns offset().left
        $rows.first().find('td').each(function (i, cell) {
            var $cell = $(cell),
                left = Math.floor($cell.offset().left);
            map[left] = i+1;
            $cell.attr({
                'data-nth-col': i+1
            });
        });

        // now for the rest of the rows, 
        $rows.not(':first').each(function (i, row) {
            var $row = $(row),
                $cells = $row.find('td');

            $cells.each(function (j, cell) {
                var $cell = $(cell),
                    left = Math.floor($cell.offset().left);
                $cell.attr({
                    'data-nth-col': map[left]
                });
            });
        });
    })($table); // scan the entire table ONCE. 
                // We don't want to do this on every toggle


    $('button[name=toggle]').on('click', function () {
        var n = +$(this).val();
        $table.find('td[data-nth-col='+n+']').toggle();
    });

});

jquery-隐藏表中有rowpans的列

1 个答案: