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

但是当我点击该表中的行时，没有任何反应。我想要的是提醒我身份证。（参见警报功能）。

怎么了？

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，这就是为什么你总是得到未定义的，如果你想要的是第一个id的{{1}}，请尝试使用td：

.find()

Sample fiddle 的

我也摆脱了：

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

最后，您不应该在html上重复$('#table_tingkat_jual tr').click(function(){ this.stopPropagation(); });属性，因此您应该更改这些属性或使用数据属性或类。

Answer 4

也许你忘了包含jquery？我刚刚从谷歌中包含jQuery，让脚本等到文档完全加载。

我也给了不同的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 个答案:

从聊天更新：

以前的详细信息：

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

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