从表 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，请使用一个类，或者为其中一个分配不同的值。