从表TR ID和TD ID获取值 [英] Getting Value From Table TR id and TD id

查看:642
本文介绍了从表TR ID和TD ID获取值的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述



假设我有这样一个表:

 < table class =table table-hoverid =table_tingkat_jual> 
< thead>
< tr>
Tingkat Penjualan< / th>
< th> SA< / th>
Kode SA< / th>
Kuantiti Terendah(lusin)< / th>
Kuantiti Tertinggi(lusin)< / th>
< / tr>
< / thead>
< tbody>
< tr id ='0'>
< td> Diatas Rata-Rata< / td>
< td id ='1'> 1< / td>
< td> AG< / td>
< td> 3870< / td>
< td> 5782< / td>
< / tr>
< tr id ='0'>
< td> Diatas Rata-Rata< / td>
< td id ='3'> 3< / td>
< td> CA< / td>
< td> 1080< / td>
< td> 3780< / td>
< / tr>
< / tbody>
< / table>

我想从TR获得id,并从id td获取特定表中单击的每个tr(table_tingkat_jual) 。

这是我在jQuery中的语法:

  $(' ()函数(){
this.stopPropagation();
});
$ b $('#table_tingkat_jual tr')。click(function(){
var trid = $(this).closest('tr')。attr('id');
alert(TR ID+ trid);
var tdid = $(this).closest('td')。attr('id');
alert(TD ID+ tdid);
});

但是当我点击表格中的行时,什么都没有发生。我想要的是提醒我身份证。 (请参阅警报功能)。



有什么不对?

解决方案

从聊天更新:



事实证明,问题在于表通过ajax动态加载,因此需要一个委托事件(除了其他修补程序):

  $(document).on('click','#table_tingkat_jual tr',function(e){
e .stopPropagation();
var $ this = $(this);
var trid = $ this.closest('tr')。data('id');
alert(TR ID+ trid);
var tdid = $ this.find('td [data-id]')。data('id');
alert(TD ID+ tdid);
});



以前的资料:



问题,其中最重要的是在HTML中使用重复的ID(这是无效的)。



您也不需要单独的,相同的选择器来处理 stopPropogation (假设你实际上需要 stopPropogation )(例如,为了避免在父对象中点击)。
$ b

看起来您还需要深入了解TD值,因此请尝试以下操作:

JSFiddle: http://jsfiddle.net/TrueBlueAussie/fw5ty/



  $('#table_tingkat_jual tr')。click(function(e){
e.stopPropagation();
var $ this = $(this);
var trid = $ this.closest('tr')。data('id');
alert(TR ID+ trid);
var tdid = $ this.find('td [data ('ID');
alert(TD ID+ tdid);
});

data('id') attr('data-id')



注意我已经将HTML改为使用 data-id 属性而不是 id



 < table class =table table-hover ID = table_tingkat_jual > 
< thead>
< tr>
Tingkat Penjualan< / th>
< th> SA< / th>
Kode SA< / th>
Kuantiti Terendah(lusin)< / th>
Kuantiti Tertinggi(lusin)< / th>
< / tr>
< / thead>
< tbody>
< tr data-id ='0'>
< td> Diatas Rata-Rata< / td>
< td data-id ='1'> 1< / td>
< td> AG< / td>
< td> 3870< / td>
< td> 5782< / td>
< / tr>
< tr data-id ='0'>
< td> Diatas Rata-Rata< / td>
< td data-id ='3'> 3< / td>
< td> CA< / td>
< td> 1080< / td>
< td> 3780< / td>
< / tr>
< / tbody>
< / table>

如果您确实必须使用重复ID(我强烈建议您修正),请改用此代码:



http://jsfiddle.net/TrueBlueAussie/ fw5ty / 1 /



  $('#table_tingkat_jual tr')。click(function(e){
e.stopPropagation();
var $ this = $(this);
var trid = $ this.closest('tr')。attr('id');
alert (TR ID+ trid);
var tdid = $ this.find('td [id]')。attr('id');
alert(TD ID+ tdid);
});


I have problems getting id from tr and td in my table.

Let's say I have a table like this:

<table class="table table-hover" id="table_tingkat_jual">
<thead>
 <tr>
   <th>Tingkat Penjualan</th>
   <th>SA</th>
   <th>Kode SA</th>
   <th>Kuantiti Terendah (lusin)</th>
   <th>Kuantiti Tertinggi (lusin)</th>
</tr>
</thead>
<tbody>
 <tr id='0'>
  <td>Diatas Rata-Rata</td>
  <td id='1'>1 </td>
  <td>AG</td>
  <td>3870</td>
  <td>5782</td>
 </tr>
 <tr id='0'>
  <td>Diatas Rata-Rata</td>
  <td id='3'>3 </td>
  <td>CA</td>
  <td>1080</td>
  <td>3780</td>
 </tr>
</tbody>
</table>

I want to getting id from TR and id FROM td for each tr clicked in specific table (table_tingkat_jual).

This is my syntax in jQuery:

$('#table_tingkat_jual tr').click(function(){
    this.stopPropagation();
});

$('#table_tingkat_jual tr').click(function() {
    var trid = $(this).closest('tr').attr('id');
    alert("TR ID " + trid);
    var tdid = $(this).closest('td').attr('id');
    alert("TD ID " + tdid);
});

But when I clicked the row in that table, nothing happened. What I want is alert me the id. (See the alert function).

What's wrong?

解决方案

Update from chat:

It turns out the problem is that the table is loaded dynamically via ajax, so a delegated event is needed (in addition to the other fixes):

$(document).on('click', '#table_tingkat_jual tr', function (e) {
    e.stopPropagation();
    var $this = $(this);
    var trid = $this.closest('tr').data('id');
    alert("TR ID " + trid);
    var tdid = $this.find('td[data-id]').data('id');
    alert("TD ID " + tdid);
});

Previous details:

There are several issues, not the least of which is the use of duplicate ID's in the HTML (which is invalid).

You also do not need separate, identical, selectors to handle stopPropogation (assuming you actually need stopPropogation at all (e.g. to avoid clicks in parent objects).

It appears you also want to drill down for the TD values, so try this:

JSFiddle: http://jsfiddle.net/TrueBlueAussie/fw5ty/

$('#table_tingkat_jual tr').click(function(e) {
    e.stopPropagation();
    var $this = $(this);
    var trid = $this.closest('tr').data('id');
    alert("TR ID " + trid);
    var tdid = $this.find('td[data-id]').data('id');
    alert("TD ID " + tdid);
});

data('id') is a short-cut for attr('data-id').

note I have changed your HTML to use data-id attributes instead of id= so that duplicate values are allowable.

<table class="table table-hover" id="table_tingkat_jual">
    <thead>
        <tr>
            <th>Tingkat Penjualan</th>
            <th>SA</th>
            <th>Kode SA</th>
            <th>Kuantiti Terendah (lusin)</th>
            <th>Kuantiti Tertinggi (lusin)</th>
        </tr>
    </thead>
    <tbody>
        <tr data-id='0'>
            <td>Diatas Rata-Rata</td>
            <td data-id='1'>1</td>
            <td>AG</td>
            <td>3870</td>
            <td>5782</td>
        </tr>
        <tr data-id='0'>
            <td>Diatas Rata-Rata</td>
            <td data-id='3'>3</td>
            <td>CA</td>
            <td>1080</td>
            <td>3780</td>
        </tr>
    </tbody>
</table>

If you really must use duplicate ID's (which I strongly recommend you fix) use this code instead:

http://jsfiddle.net/TrueBlueAussie/fw5ty/1/

$('#table_tingkat_jual tr').click(function(e) {
    e.stopPropagation();
    var $this = $(this);
    var trid = $this.closest('tr').attr('id');
    alert("TR ID " + trid);
    var tdid = $this.find('td[id]').attr('id');
    alert("TD ID " + tdid);
});

这篇关于从表TR ID和TD ID获取值的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆