1

考虑这张表：

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

请注意每个单元格如何具有像“xy”这样的值对，x 是开始列索引，y 是结束列索引（在这种情况下，列将是列之间的行而不是列本身，从零开始）。希望这是有道理的。

我需要的是一些 javascript，它将采用一个单元格（一个 td 元素）并给我它的开始和结束列索引，就像在我的示例表中一样。所以，假设我有一个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;
}

null如果找不到合适的节点来返回，大多数 DOM 方法都会返回。如果函数返回null，则cell是该行中的最后一个单元格。类似的策略可用于获取前一个单元格，或者上面或下面的一个，例如

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-1 而不是 0-2。

此外，由于rowSpan、rowIndex、cellSpan和cellIndex都是 Number 类型，因此不需要parseInt。我也不明白你为什么在 jsbin 代码中包含 jQuery。

于 2012-10-04T23:10:41.277 回答