如何在單擊行時獲取html表中第一列的值

Question

我有一個簡單的HTML表。 我想獲得我點擊的行的第一列的值。 如果我點擊第一行的任何地方它應該獲得第一行的第一列的值，如果我點擊第二行任何地方，它應該給第二列的第一列的值..這是我的表：

<table style="border:1px solid black" id="tab">
    <tr>
        <td style="border-right:1px solid black">Sachin</td>
        <td>Yuvraj</td> 
    </tr>
    <tr>
        <td style="border-right:1px solid black">Virat</td>
        <td>Gautam</td>              
    </tr>
</table>

Answer 1

    $(document).ready(function(){

    //use this if you have jquery version 1.7+
      $('table#tab tr').on('click',function(){
          alert($(this).find('td:first').text());

    });
    //normal way
  $('table#tab tr').click(function(){
          alert($(this).find('td:first').text());

    });
//delegation

$('body').delegate('table#tab tr','click',function(){
          alert($(this).find('td:first').text());

    });

//use any of these three methods

    });

Answer 2

<tr onClick="alert($(this).find('td:first').text())">
  ...
</tr>

基本上，onClick在單擊行時運行javascript。

---

或者在頁面加載后使jQuery附加事件：

$(document).ready(function(){
  $('table#tab tr').on('click',function() {
    alert($(this).find('td:first').text());
  });
});

Answer 3

這對你有用。 嘗試這個..

<tr onClick="alert($(this).find('td:first').text())">
  ...
</tr>

Answer 4

如果你按照你的定義進行標記，那么你最好使用這樣的jQuery：

$(function() {
    $('table#tab tr').click(function() {
        var firstTd = $(this).find("td:first");
        console.log(firstTd); // log it so you can see it.
    });
);

然后，使用firstTd變量，你可以做firstTd.text()的文本值，或firstTd.html()為它的完整的HTML內容。

Answer 5

這是你的HTML

<table id="tab">
    <tr>
        <td>Sachin</td>
        <td>Yuvraj</td>
    </tr>
    <tr>
        <td>Virat</td>
        <td>Gautam</td>              
    </tr>
</table>

以下腳本將為您提供單擊時每個單元格的值

$(document).ready(function(){
  $('#tab').click(function (event) {
    alert($(event.target).html());
   });
});

以下腳本將在單擊行（您的問題）上給出第一列值

$(document).ready(function(){
  $('#tab tr').on('click',function() {
    alert($(this).find('td:first').text());
  });
});

看看小提琴