javascript 单击元素调用方法以检索值时,如何通过 jQuery 获取选定行的列值

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/22665880/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-10-27 23:32:39  来源:igfitidea点击:

how to get values of columns for a selected row through jQuery on click of element calling method to retrieve value

javascriptjquery

提问by b22

here i am trying to fetch values of a particular column for a selected row via jquery.In Following code i have two rows which do not have any id.I tried following way and getting both rows value for that column appending each other.how to get value for that row only using jquery only.I want to call test function on click of that element, dont want to use http://jsfiddle.net/SSS83/

在这里,我试图通过 jquery 获取选定行的特定列的值。在以下代码中,我有两行没有任何 id。我尝试按照以下方式获取该列的两行值,并相互附加。如何仅使用 jquery 获取该行的值。我想在单击该元素时调用测试函数,不想使用http://jsfiddle.net/SSS83/

<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
<script type="text/javascript">

function test(){
var id = $(".use-address").closest("tr").find('td:eq(2)').text();
  alert(id);
}
    </script>

</head>
<body>
<table id="choose-address-table" class="ui-widget ui-widget-content">
  <thead>
    <tr class="ui-widget-header ">
      <th>Name/Nr.</th>
      <th>Street</th>
      <th>Town</th>
      <th>Postcode</th>
      <th>Country</th>
      <th>Options</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td class="nr"><span>50</span>

      </td>
      <td>Some Street 1</td>
      <td>Glas</td>
      <td>G0 0XX</td>
      <td>United Kingdom</td>
      <td>
        <button type="button" class="use-address" onclick="test();">Use</button>
      </td>
    </tr>
    <tr>
      <td class="nr"><span>30</span>
      </td>
      <td>Some Street 2</td>
      <td>Glasgow</td>
      <td>G0 0XX</td>
      <td>United Kingdom</td>
      <td>
          <button type="button" class="use-address" onclick="test();">Use</button>
      </td>
    </tr>
  </tbody>
</table>
</body>
</html>

回答by xiidea

Not sure why you don't want to use jQuery Click event!!

不知道为什么你不想使用 jQuery Click 事件!!

Any way, if you want to stick with your test function, you need to tell the function from where it got called.

无论如何,如果你想坚持你的测试函数,你需要告诉函数从哪里被调用。

so change the

所以改变

<button type="button" class="use-address" onclick="test();">Use</button>

to

<button type="button" class="use-address" onclick="test(this);">Use</button>

And update your testfunction as

并将您的测试功能更新为

function test(el) {
    var id = $(el).closest("tr").find('td:eq(2)').text();
    alert(id);
}

Enjoy!!

享受!!



If you change your mind you can use the following code

如果您改变主意,可以使用以下代码

jQuery('document').ready(function() {
        jQuery('.use-address').on('click',function() {
            var id = $(this).closest("tr").find('td:eq(2)').text();
            alert(id);
      })
 });

回答by Diodeus - James MacFarlane

Based on a click of a TD:

基于 TD 的点击:

$('td').on('click',function() {
      //get the column of the TD
      var myCol = $(this).index();

      //loop through the rows of this table, get the TD in the same column
      $(this).parent('table').find('tr').each(function() {
         var colValue = $(this).find('td').eq(myIndex).html()
      }
})

"colValue" in the loop will grab the contents of the TD at that position.

循环中的“colValue”将在该位置获取 TD 的内容。