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

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

萨钦
尤夫拉吉
维拉特
乔达姆

这对您很有用。试试这个

...

如果您按照定义进行标记，那么最好使用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（）

。

这是您的html

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

以下脚本将在单击行（您的问题）时给出第一列值。

---

查看

你有自己的研究吗？请发布有问题的代码。有问题的代码太大了。我只需要一些基本的想法。我将在我的实际代码中应用它，我已经尝试过：-var data=$（'table tr:first td:first'）.text（）；但是它给出了第一行第1列的值，只是它不处理单击事件。请看我的答案，您只需使用onClick属性，然后您就可以运行您想要的任何javascript。您的逻辑看起来绝对正确，但仍然不起作用。顺便说一句，非常感谢您的帮助这是编写.first（）方法的方法。您的代码中有一个小错误…请改用它：-onClick=“alert（$（this）.find（'td:first'）.text（））”谢谢您的帮助

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

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

    });

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

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