找出 <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庫找到包含X的td的列號。

例如，包含A的td的列號為1 ， B為3 。

我們也知道包含X的td的列號是1 。 但是我們怎樣才能實現這一目標。

我的情況是我需要將所有行的數據與第一行合並。 因此，當移動每個td時，我需要知道它屬於哪個列，以便我可以將它合並到該列的第一行的td 。 如果有任何其他方法可以解決我的問題，請幫助我。

Answer 1

這種方法基本上是將表數據存儲到數組中，如果您想擴展或修改表行跨的結構，則可以使用此方法。 （這不支持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];

---

Answer 2

這是小提琴 。

它獲取索引並查找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');