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