使用jQuery獲取列中的第一個表格單元格值

Question

我有一些值的表。 第一行和第一列分別包含所謂的垂直和水平大小的值。 我需要做的是單擊一個表格單元格並獲取該單擊的表格單元格的水平和垂直值。 它的基本含義-獲取被單擊的表格單元格所在行中第一個表格單元格的值，並獲取被單擊的表格單元格所在列中的第一個表格單元格值。 我通過以下代碼獲取水平值：

var horizSize = $('th:first', $(this).parents('tr')).text();

但是我不確定如何為垂直線做到這一點。 如何獲取列的第一個表格單元格值？

感謝您的幫助。

Answer 1

我認為以下應該起作用：

var verticSize = $('tr:first td').eq($(this).index()).text();

JS小提琴演示 。

請注意，在演示中，我還將horizSize選擇器修改為：

horizSize = $(this).closest('tr').find('td:first').text();

然后精煉為：

horizSize = $(this).prevAll('td:last').text();

上面假設您要從:first tr元素獲取單元格的值，無論它是在thead還是tbody 。 如果您將標題單元格標記為th則需要將選擇器的td修改為th 。

---

根據Felix Kling的評論進行編輯 ：

代替$('tr:first td') ， $(this).closest('table').find('tr:first td')可能更好（取決於其他標記）。

我本人確實應該想到這一點。 而且，如果文檔中有多個table ，那么此更改對於演示以下內容將是必不可少的：

var verticSize = $(this).closest('table').find('tr:first td').eq($(this).index()).text();

JS小提琴演示 。

參考文獻：

• closest() 。
• eq() 。
• find() 。
• :first選擇器 。
• index() 。
• :last選擇器 。
• prevAll() 。

Answer 2

您可以使用索引導航到右側的單元格：

$('table tr:gt(0)').each(function() {

    var $valRow = $('table tr:eq(0)');

    $(this).find('td:gt(0)').css( { background: "red" } ).click(function() {

        var x = $valRow.find('td:eq(' + $(this).index() + ')').text(); // top row
        var y = $(this).closest('tr').find('td:eq(0)').text(); // first cell of your row will be your first column cell

        alert('x=' + x + '; y=' + y);
    });;
});

代碼： http ： //jsfiddle.net/uKhwq/1/