jQuery如何获取td单元格值

时间:2015-04-03 22:21:05

标签: javascript jquery

我想在用户点击某一行的任何地方时获取发票号的值

以下是我的表

<div class="panel ui-widget-content" id="invoiceList">
<h2 class="ui-widget-header ui-corner-top" style="cursor: pointer; "><span>Invoices</span></h2>
    <table cellspacing='0' id='header' class="ui-widget">
        <tr>
            <th>Invoice Number</th>
             <th>Invoice Total</th>
        </tr>     
        <tr>
            <td><a href="#"  >INV-Error_Test1</a></td>
            <td>22.000000 USD</td>
        </tr>
        <tr>
            <td><a href="#"  >INV-Error_Test2</a></td>
           <td>22.000000 USD</td>
        </tr>
    </table> 
</div>

以下是我所拥有的jQuery,只有点击Invoice Number字段

才能提供发票编号
$("#invoiceList td").click(function (e) {
var result = $(this).text();
console.log('invoice --->'+result);
});

http://jsfiddle.net/5n62md3m/

当用户点击该行的任何位置时,有人可以帮助我获取发票号。

3 个答案:

答案 0 :(得分:2)

检查一下,这可能是一个解决方案:

&#13;
&#13;
$('tbody tr').on('click', function(e){
   var value = $(this).find('td:first-child a').text();
  alert(value);
  e.stopPropagation();
});
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="panel ui-widget-content" id="invoiceList">
<h2 class="ui-widget-header ui-corner-top" style="cursor: pointer; "><span>Invoices</span></h2>
    <table cellspacing='0' id='header' class="ui-widget">
      <thead>
        <tr>
            <th>Invoice Number</th>
             <th>Invoice Total</th>
        </tr>
        </thead>
      <tbody>
        <tr>
            <td><a href="#"  >INV-Error_Test1</a></td>
            <td>22.000000 USD</td>
        </tr>
        <tr>
            <td><a href="#"  >INV-Error_Test2</a></td>
           <td>22.000000 USD</td>
        </tr>
        </tbody>
    </table> 
</div>
&#13;
&#13;
&#13;

答案 1 :(得分:1)

$("#invoiceList tr:not(:first-child)").click(function (e) {
    console.log('invoice ---> '+$(this).children('td:nth-child(1) a').text());
}

这里有一个小小的好处,如果你想获得另一个专栏,你只能更改nth-child中的数字(并删除可能的尾随a。)

答案 2 :(得分:1)

另一种替代解决方案可能是

$('#invoiceList tr:not(:first-child)').click(function(e){
   $tds = $(this).find("td");
   console.log( $tds.eq(0).text());
});