5

と を補償しながら、行と列のインデックスで表のセルを選択できるようにしたいと思いrowspanますcolspan。たとえば、次の表では、

例の表

(1,2) 赤、(2,3) 緑、(3,3) 青を着色すると、次のようになります。

期待される表

「行番号と列番号でテーブル内の任意のセルを選択する」という質問への回答を試みましたが、次の結果が得られました。

実際のテーブル

これが jsFiddle です: http://jsfiddle.net/acheong87/27HuN/

私は何が起こっているのかを理解しており、別の質問"Table cellIndex and rowIndex with colspan/rowspan" を見つけました。ここでは回答がプラグインとして提供されていましたが、もっと簡単な方法がないことは信じられないほどです! 結局のところ、実際の結果の色付けは理解できるように見えますが、直感的ではないように見えますが、期待される結果の色付けははるかに直感的で簡単に把握できるように見えます。

これを実装するための賢くて簡単な方法を考えられる人はいますか?

アップデート

これは、他の人の新しいアイデアを刺激する可能性がある場合に備えて、私の（貧弱な）試みの新しい jsFiddleです。基本的に、row ヘッダーと col ヘッダーがスパンされていないと仮定した場合(もちろん、これは有効な仮定ではありません)、オフセットを使用して正しいセルを「ターゲットにする」ことができます。

function getCell(table, r, c)
{
    var rowHead = $(table.rows[r].cells[0]);
    var colHead = $(table.rows[0].cells[c]);
    var y = rowHead.offset().top + rowHead.outerHeight(true)/2;
    var x = colHead.offset().left + colHead.outerWidth(true)/2;
    return $(document.elementFromPoint(x, y));
}

デモは機能しているように見えますが、いくつかの問題があります。

  1. 行ヘッダーと列ヘッダーがスパンされていないと想定することはできません。
  2. 行または列の中間点がビューポートから外れている場合は機能しません。elementFromPointビューポートに依存するようです。
  3. スクロールやマージンなどが発生すると、確実に機能しません。一般的に薄っぺらです。むしろ座標計算に依存したくありません。
4

3 に答える 3

3

「前処理」を行う別のアプローチを次に示します。

var grid = (function(){

  var table = $("#table")[0], a=[], cell, i, j, k, l, y;

  for (i=0;i<table.rows.length;i++) a[i] = [];

  for (i=0;i<table.rows.length;i++) {
      y = 0;
      for (j=0;j<table.rows[i].cells.length;j++) {
          while (a[i][j + y]) y++;
          cell = $(table.rows[i].cells[j]);
          xspan = parseInt(cell.attr('rowspan') || 1);
          yspan = parseInt(cell.attr('colspan') || 1);
          for (k=0;k<xspan;k++) {
              for (l=0;l<yspan;l++) {
                  if(i + k < table.rows.length) a[i + k][j + y + l] = [i,j];
              }
          }
      }
  }

  return a;

})();

colorCell(1,2,'red');
colorCell(2,3,'green');
colorCell(3,3,'blue');

function colorCell(i,j,s){
    var a = grid[i][j];
    $(table.rows[a[0]].cells[a[1]]).css('background-color', s);
}

jsfiddle

于 2012-12-27T21:26:59.117 に答える
1

私は JSFiddle で試してみました...しかし、しばらく時間がかかりました...

var table = $("#table")[0];

SetColumnColor(1, 2, 'red');
SetColumnColor(2, 3, 'green');
SetColumnColor(3, 3, 'blue');

function SetColumnColor(rowIndex, cellIndex, color){

    var actualRowIndex = GetActualRowIndex(table, rowIndex, cellIndex);
    var actualCellIndex = GetActualCellIndex(table.rows[actualRowIndex], cellIndex);
    $(table.rows[actualRowIndex].cells[actualCellIndex]).css('background-color', color);
}

function GetActualCellIndex(row, cellIndex) {
    var actualCellIndex = cellIndex;
    $(row.cells).each(function(index) {
        var colSpan = parseInt($(this).attr('colspan'));
        if(colSpan != NaN && colSpan > 0)
        {
            //alert(colSpan);
            actualCellIndex = actualCellIndex - colSpan + 1;
        }
    });

    return actualCellIndex;
}

function GetActualRowIndex(table, rowIndex, cellIndex) {
    var actualRowIndex = rowIndex;

    if(table.rows[rowIndex].cells[cellIndex] != null)
        return rowIndex;

    $(table.rows).each(function(index) {
        if(rowIndex <= index)
            return actualRowIndex;
        var realCellIndex = GetActualCellIndex(this, cellIndex);
        //alert("Row:" + index + "(" + realCellIndex + "," + cellIndex+ ")");
        var rowSpan = parseInt($(table.rows[index].cells[realCellIndex]).attr('rowspan'));
        if(rowSpan != NaN && rowSpan > 0)
        {
            //alert(rowSpan + "(" + index + "," + realCellIndex + ")");
            actualRowIndex = actualRowIndex - rowSpan + 1;
        }
    });

    return actualRowIndex;
}

動作するデモはこちらから入手できます

于 2012-12-27T20:10:40.847 に答える