从表TR ID和TD ID获取价值

Question

我在从表中的tr和td获取ID时遇到问题。

假设我有一个这样的表：

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

我想从特定表（table_tingkat_jual）中单击的每个tr分别从TR和ID FROM td获取ID。

这是我在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);
});

但是，当我单击该表中的行时，没有任何反应。 我想要的是通知我ID。 （请参阅警报功能）。

怎么了？

Answer 1

通过聊天更新：

事实证明，问题在于该表是通过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 （例如，避免单击父对象）。

看来您也想深入了解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]').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>
            <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>

如果您确实必须使用重复的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);
});

Answer 2

您有两个具有相同ID的元素：

<tr id='0'>

id应该是唯一的。 如果您希望两者都为0，请使用一个类，或为一个分配不同的值。

Answer 3

问题是.closest开始从目标元素开始向上看，而不是从DOM树上向下看，并且由于您的事件在tr所以它永远不会到达td ，这就是为什么如果要获取的内容总是不确定的原因第一个td的id和一个，请尝试使用.find() ：

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

样品小提琴

我也会摆脱：

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

最后，您不应该在html上具有重复的id属性，因此您应该更改它们或使用data属性或类。

Answer 4

也许您忘记了包含jquery？ 我只包含了Google的jQuery，并让脚本等待文档完全加载完毕。

我还提供了不同的ID，但这不是我认为的问题。

我还建议给所有ID一个ID，因为现在他会提醒未定义的ID。

对我来说，它是这样的：

<html>
<head>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
    <script type="text/javascript">
    $(document).ready(function(){
    $('#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);
    });
    });
</script>
</head>
<body>
<table class="table table-hover" id="table_tingkat_jual">
<thead>
 <tr id='0'>
   <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='1'>
  <td>Diatas Rata-Rata</td>
  <td id='1'>1 </td>
  <td>AG</td>
  <td>3870</td>
  <td>5782</td>
 </tr>
 <tr id='2'>
  <td>Diatas Rata-Rata</td>
  <td id='3'>3 </td>
  <td>CA</td>
  <td>1080</td>
  <td>3780</td>
 </tr>
</tbody>
</table>
<body>
</html>

希望能帮助到你。

从表TR ID和TD ID获取价值

问题描述

4 个解决方案

解决方案1
6 已采纳 2014-02-26 15:30:00

通过聊天更新：

以前的详细信息：

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

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

解决方案2
1 2014-02-26 15:25:36

解决方案3
0 2014-02-26 15:24:27

解决方案4
0 2014-02-26 15:36:38

从表TR ID和TD ID获取价值

问题描述

4 个解决方案

解决方案1 6 已采纳 2014-02-26 15:30:00

通过聊天更新：

以前的详细信息：

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

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

解决方案2 1 2014-02-26 15:25:36

解决方案3 0 2014-02-26 15:24:27

解决方案4 0 2014-02-26 15:36:38

解决方案1
6 已采纳 2014-02-26 15:30:00

解决方案2
1 2014-02-26 15:25:36

解决方案3
0 2014-02-26 15:24:27

解决方案4
0 2014-02-26 15:36:38