1

この表を検討してください。

http://jsbin.com/esikac/1/edit

各セルに「xy」のような値のペアがあることに注意してください。xは開始列インデックス、yは終了列インデックスです（この場合、列は列自体ではなく列間の行であり、ゼロから始まります）。これが理にかなっていることを願っています。

必要なのは、セル（td要素）を取得し、サンプルテーブルと同じように開始列と終了列のインデックスを取得するJavaScriptです。つまり、要素をパラメーターとして受け取る関数getColumnBoundsがあるとします。tdそれを呼び出してtdテーブルの右上にあるを渡すと、「3-5」が表示されます（もちろん、中のテキストを読むのではなく、理解することによって）。

これは私がこれまでに持っているものですが、マージされた行を追加するとすぐに失敗した場合：

function getColumnBounds(td) {

    function colSpan(col) {
        return parseInt((col && col.nodeType == 1 && element.nodeName.match(/t[dh]/i)) ? (col.getAttribute("colSpan") || 1) : 0);
    }

    function endIndex(element) {
        var colPos = colSpan(element);

        while(element) {
            element = element.previousSibling;
            colPos += colSpan(element);
        }

        return colPos;
    }

    var startIndex = endIndex(td.previousSibling);
    var endIndex = endIndex(td);
    return ("" + startIndex + "-" + endIndex);
}
4

1 に答える 1

0

まずはコメント。

テーブル セルのトラバースについては、兄弟ではなく、rows、rowIndex、cells、およびcellIndexプロパティを利用してナビゲートすることを検討してください (兄弟は要素ではなくテキスト ノードである可能性があるため)。

function getCellNext(cell) {
  return cell.parentNode.cells[cell.cellIndex + 1] || null;
}

ほとんどの DOM メソッドnullは、返す適切なノードが見つからない場合に戻ります。関数が を返す場合、nullcellは行の最後のセルです。同様の戦略を使用して、前のセル、または上または下のセルを取得できます。

function getCellAbove(cell) {
  var row = cell.parentNode;
  var table = row.parentNode.parentNode; // may use tableSection instead
  var rowAbove = table.rows[row.rowIndex - 1];
  return rowAbove? row.cells[cell.cellIndex] : null;
}

テーブルで単一のリスナーを使用すると、特定のセルの列と行の範囲が次のように返されます。

// Get the cell and row range of a particular cell
function getCellRange(cell) {
  var colRange = cell.cellIndex + '-' + (cell.cellIndex + cell.colSpan - 1);
  var row = cell.parentNode;
  var rowRange = row.rowIndex + '-' + (row.rowIndex + cell.rowSpan - 1);
  return [colRange, rowRange];
}

// Helper functions
function upTo(el, tagName) {
  tagName = tagName.toLowerCase();
  while (el && el.nodeName.toLowerCase() != tagName) {
    el = el.parentNode;
  }
  return el || null;
}

// Call getCellRange from an event
function showCellRange(e) {
  var target = e.target || e.srcElement;
  var cell = upTo(target, 'td');
  return cell? getCellRange(cell) : null;
}

そして、リスナー（およびテーブル）は次のとおりです。

  <table onclick="alert(showCellRange(event));">
  <tr>
    <td colspan="2">0-2
    <td rowspan="2">2-3
    <td colspan="2">3-5
  <tr>
    <td>0-1
    <td>1-2
    <td>3-4
    <td>4-5
  <tr>
    <td>0-1
    <td colspan="2">1-3
    <td>3-4
    <td>4-5
  <tr>
    <td>0-1
    <td colspan="3">1-4
    <td>4-5
  <tr>
    <td>0-1
    <td>1-2
    <td colspan="2">2-4
    <td>4-5
</table>

あなたの範囲は間違っていると思います。最初のセルの colspan が 2 の場合、その範囲は 0 ～ 2 ではなく 0 ～ 1 になります。

また、rowSpan、rowIndex、cellSpan、cellIndexはすべて Number 型であるため、 parseIntは必要ありません。また、jsbin コードに jQuery を含めた理由もわかりません。

于 2012-10-04T23:10:41.277 に答える