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

【问题标题】：how to get value of first column in a html table on clicking on row如何在单击行时获取html表中第一列的值
【发布时间】：2012-08-21 05:52:10
【问题描述】：

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

【问题讨论】：

你自己研究过吗？
请发布有问题的代码。
有问题的代码太大了..我只需要基本的想法。我将在我的真实代码中应用它
我试过这个：- var data= $('table tr:first td:first').text();但它只给出了第一行第一列的值，它不处理点击事件
看我的回答，你只需要使用 onClick 属性——然后你就可以运行任何你想要的 javascript。

标签： javascript jquery

【解决方案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

    });

【讨论】：

【解决方案2】：

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

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

【讨论】：

【解决方案3】：

如果你的标记是你定义的，那么你最好像这样使用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()，或者对它的完整HTML 内容使用firstTd.html()。

【讨论】：

【解决方案4】：

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

【讨论】：

您的逻辑看起来绝对正确，但仍然无法正常工作。顺便感谢您的帮助
这是.first()方法的写法。
您的代码中有一个小错误...只需使用它即可：-onClick="alert($(this).find('td:first').text())" 谢谢为您提供帮助

【解决方案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());
  });
});

查看Fiddle

【讨论】：