0

テーブルの列を非表示にする必要がありますが、関連する行スパンがあり、機能が台無しになります。助けていただければ幸いです。以下は私のコードのリンクです：

http://jsfiddle.net/SEwVP/73/

関数は次のとおりです (例では、列 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();

  });
    });
4

1 に答える 1

3

些細なことのように思えますが、実際には非常に気が遠くなるようなものなので、最初はこれに興味をそそられました。rowspans を回避して正しいセルを切り替えるために、さまざまなアプローチを試しました。昨日最初に回答しましたが、惨めに失敗したことを知っているので、すぐに削除しました。

<td>「3 番目の列」と言うとき、HTML と がどのように機能するかという観点から、行の 3 番目の子になるとは限りませんrowspan。

次にひらめきがあります: テーブルは完全なグリッドです。たとえば、3 番目の列として「視覚的に認識される」すべてのセルは、1 つの共通点を共有し、すべて同じオフセット left を共有します。

これは私がこれまでに得た中で最も近いものであり、これはおそらく1 つの重要な仮定に基づいたやや急進的なアプローチです:colspanテーブル全体に s が関与していないということです。（さもなければ、すべてうんちに変わります）

このデモでは、必要な列を切り替えることができます。

(よりエレガントな解決策があれば、私は確かに自分自身を知りたいと思います)

デモ: 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();
    });

});
于 2013-04-22T23:05:07.087 に答える