<td> 使用任何JavaScript库查找相应单元格的列值

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库的 TD 的列号。

例如， td 包含 a 的列编号为 1 和 b is 3 。

我们也知道， td 的列号 x 是 1 。但是我们怎么能务实地得到这个。

我的情况是我需要将所有行的数据与第一行合并。因此，在通过每个 TD 移动时，我需要知道它属于哪个列，以便我可以将其合并到该列的第一行的 TD 。如果还有其他方法可以解决我的问题。

Answer 1

这是小提琴。

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

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');

Answer 2

此方法基本上将表数据存储到数组中，如果您想展开或修改表 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中，如果您想根据td的内容获得所需的columnIndex，则使用该信息。

用法

// 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];

---