Question

<table border="1">
  <tr>
    <td rowspan="3">0</td>
    <td>1</td>
    <td rowspan="3">2</td>
    <td>3</td>
  </tr>
  <tr>
    <td>A</td>
    <td>B</td>
  </tr>
  <tr>
    <td>X</td>
    <td>Y</td>
  </tr>
</table>

我想使用jQuery或其他一些JavaScript库找到包含X的 td 的列号。

例如，包含 A 的 td 的列号 1 且 B 3

我们也知道包含 X 的 td 的列数 1 。但是我们怎样才能实现这一目标。

我的情况是我需要将所有行的数据与第一行合并。因此，在浏览每个 td 时，我需要知道它属于哪个列，以便我可以将其合并到该列第一行的 td 。如果有任何其他方法可以解决我的问题，请帮助我。

Answer 1

这种方法基本上是将表数据存储到数组中，如果您想扩展或修改表 rowspan 的结构，则可以使用此方法。 （这不支持colspan）

$(function() {
  var tableArr = [],
    totalRow = $('table tr').length,
    totalCol = 0;

  $('table tr').each(function() {
    var colLength = $(this).children('td').length;
    totalCol = colLength > totalCol ? colLength : totalCol;
  });

  for (var r = 0; r < totalRow; r++) {
    var row = [];
    for (var c = 0; c < totalCol; c++) {
      row.push(null);
    }
    tableArr.push(row);
  }

  $('td').each(function() {
    var rowspan = $(this).attr('rowspan');
    var rowIndex = $(this).parent('tr').index();
    var colIndex = $(this).index();
    var text = $(this).html();

    if (rowspan && rowspan > 0) {
      for (var i = 0; i < rowspan; i++) {
        tableArr[i][colIndex] = text;
      }
    } else {
      var lastNull = tableArr[rowIndex].indexOf(null);
      tableArr[rowIndex][lastNull] = text;
    }
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table border="1">
  <tr>
    <td rowspan="3">0</td>
    <td>1</td>
    <td rowspan="3">2</td>
    <td>3</td>
  </tr>
  <tr>
    <td>A</td>
    <td>B</td>
  </tr>
  <tr>
    <td>X</td>
    <td>Y</td>
  </tr>
</table>

您的表信息存储在tableArr中，您可以根据columnIndex的内容查询是否希望获得所需的td。

<强>用法

// This returns an array containing [row, column];
function getPositionByText(str) {
  for (var r = 0; r < tableArr.length; r++) {
    for (var c = 0; c < tableArr[r].length; c++) {
      if (tableArr[r][c] === str) {
        return [r, c]
      }
    }
  }
  return null;
}

var position = getPositionByText('X');
var xRow = position[0];
var xCol = position[1];

Answer 2

这是Fiddle。

获取索引并查找rowspan并计算可见索引。

function getColumnNumber(text) {
    var $table = $("table").eq(0);
    $("td:contains(" + text + ")").css("color", "red");
    var $td = $("td:contains(" + text + ")"),
        $tr = $td.parent(),
        tdPosition = $td.index(),
        trPosition = $tr.index(),
        position = parseInt(tdPosition);
    for (i = 0; i < trPosition; i++) {
        for (j = 0; j <= tdPosition; j++) {
            var rowSpan = parseInt($table.find('tr').eq(i).find('td').eq(j).attr("rowspan"));
            if (typeof rowSpan !== "number") {
                rowSpan = 0;
            }
            if (rowSpan > trPosition) {
                position++;
                tdPosition++;
            }
        }
    }
    console.log(text + " pos: " + position);
    return position;
};
getColumnNumber('A');
getColumnNumber('B');
getColumnNumber('1');
getColumnNumber('Y');

使用任何javascript库查找相应单元格的列值

2 个答案: