如何獲得使用jQuery選擇表格單元格的值

Question

我有下面的表格，我需要獲取選定單元格旁邊的單元格的文本值，基本上如果點擊了2它需要向我顯示單元格旁邊的值它是eric等。下面的表格是一個示例數據動態填充，我不認爲我可以給特定<td> ID。

$('#inputTable').on('click', 'tbody tr', function (e) { 
 
    e.preventDefault(); 
 
    var rowIndex = $(this).find('span').text(); 
 
    alert(rowIndex); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script> 
 

 
<table class="ui compact celled definition table" id="inputTable"> 
 
    <thead> 
 
    <tr> 
 
     <th>Id</th> 
 
     <th>Name</th> 
 
    </tr> 
 
    </thead> 
 
    <tbody> 
 
    <tr> 
 
     <td>1</td> 
 
     <td><span>Mike</span></td> 
 
    </tr> 
 
    <tr> 
 
     <td>2</td> 
 
     <td><span>eric</span></td> 
 
    </tr> 
 
    <tr> 
 
     <td>3</td> 
 
     <td><span>jonas</span></td> 
 
    </tr> 
 
    </tbody> 
 
</table>

因爲我不知道怎麼找旁邊的我用<span>查找的文本的價值點擊區域的細胞。

Answer 1

您需要使用更具體的選擇器（例如body tbody td:first-child）。這將選擇每個<tr>中的第一個<td>元素，並使用siblings()我們可以選擇該行中的下一個元素。

下面的工作：

$('#inputTable').on('click', 'tbody tr td:first-child', function(e) { 
 
    var text = $(this).siblings('td').find('span').text(); 
 
    alert(text); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table class="ui compact celled definition table" id="inputTable"> 
 
    <thead> 
 
    <tr> 
 
     <th>Id</th> 
 
     <th>Name</th> 
 
    </tr> 
 
    </thead> 
 
    <tbody> 
 
    <tr> 
 
     <td>1</td> 
 
     <td><span>Mike</span></td> 
 
    </tr> 
 
    <tr> 
 
     <td>2</td> 
 
     <td><span>eric</span></td> 
 
    </tr> 
 
    <tr> 
 
     <td>3</td> 
 
     <td><span>jonas</span></td> 
 
    </tr> 
 
    </tbody> 
 
</table>

請注意，您還需要關閉<span>元素，即：<span>jonas</span>

Answer 2

tbody tr變得tbody td:first-child：如果您要附加點擊事件僅限於第一列。 tr可以省略，因爲您已經有tbody將它從表頭行中區分開來。

$(this).next().find('span').text()：從該行的第一列開始，找到下一列，然後獲取其元素的內容<span>。

$('#inputTable').on('click', 'tbody td:first-child', function (e) { 
 
    e.preventDefault(); 
 
    var rowIndex = $(this).next().find('span').text(); 
 
    alert(rowIndex); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script> 
 

 
<table class="ui compact celled definition table" id="inputTable"> 
 
    <thead> 
 
    <tr> 
 
     <th>Id</th> 
 
     <th>Name</th> 
 
    </tr> 
 
    </thead> 
 
    <tbody> 
 
    <tr> 
 
     <td>1</td> 
 
     <td><span>Mike</span></td> 
 
    </tr> 
 
    <tr> 
 
     <td>2</td> 
 
     <td><span>eric</span></td> 
 
    </tr> 
 
    <tr> 
 
     <td>3</td> 
 
     <td><span>jonas</span></td> 
 
    </tr> 
 
    </tbody> 
 
</table>

Answer 3

試試下面的代碼：

$(document).ready(function() { 
 
    $('#inputTable tr').on('click', function(e) { 
 
    e.preventDefault(); 
 
    var rowIndex = $(this).find('span').text(); 
 
    alert(rowIndex); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<table class="ui compact celled definition table" id="inputTable"> 
 
    <thead> 
 
    <tr> 
 
     <th>Id</th> 
 
     <th>Name</th> 
 
    </tr> 
 
    </thead> 
 
    <tbody> 
 
    <tr> 
 
     <td>1</td> 
 
     <td><span>Mike<span></td> 
 
    </tr> 
 
    <tr> 
 
     <td>2</td> 
 
     <td><span>eric<span></td> 
 
    </tr> 
 
    <tr> 
 
     <td>3</td> 
 
     <td><span>jonas<span></td> 
 
    </tr> 
 
    </tbody> 
 
</table>