如何在单击行时获取html表中第一列的值

时间:2012-08-21 05:52:11

标签: javascript jquery

我有一个简单的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>

5 个答案:

答案 0 :(得分:6)

    $(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

    });

答案 1 :(得分:1)

<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());
  });
});

答案 2 :(得分:1)

这对你有用。试试这个..

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

答案 3 :(得分:1)

如果你按照你的定义进行标记,那么你最好使用这样的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内容。

答案 4 :(得分:0)

这是您的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());
  });
});

查看Fiddle