jQuery獲得點擊單元格的表頭名稱與編號

我有一個表，並在該表中我有價值id="edit"。現在，我想要的是當我單擊任何單元格時獲取相應列的標題名稱。到目前爲止，基於前面提出的一個問題是：jQuery獲得點擊單元格的表頭名稱與編號

$('body').on('click', 'td#edit', function() { 
    var th = $('this').closest('th').eq($('th').val()); 
    alert(th);  // returns [object Object] 
    ......................... 
}

你能幫我解決這個問題嗎？

HTML：

<table id="myTable" class="myTable"> 
<tbody> 
    <tr> 
     <th>Select</th> 
     <th>JobNo</th> 
     <th>Customer</th> 
     <th>JobDate</th> 
     <th>Warranty</th> 
     <th>RepairStatus</th> 
     <th>POP</th> 
     <th>DOA</th> 
     <th>Model</th> 
     <th>SN</th> 
    </tr> 
    <tr> 
     <td class="check"> 
      <input type="checkbox" value="12345"> 
     </td> 
     <td class="edit"> 
      <b>12345</b> 
     </td> 
     <td class="edit">gdsgasdfasfasdfa</td> 
     <td class="edit">2011-01-21</td> 
     <td class="edit">TRUE</td> 
     <td class="edit">RP</td> 
     <td class="edit">FALSE</td> 
     <td class="edit">0</td> 
     <td class="edit">5152342</td> 
     <td class="edit">66665464</td> 
    </tr> 
</tbody>

來源

2013-03-19 vulkoingim

你不應該有'和'ID values' = edit' ID應該是 – 2013-03-19 08:55:23

是否使用相同的唯一ID多次？你寫了你有價值* s *與'id =「edit」'。 ID應該是唯一的 – Vishal 2013-03-19 08:57:20

什麼是HTML標記。 – 2013-03-19 08:57:25

功能closest()環路的祖先了DOM樹和TH是不是TD的父母因此最接近的是不是正確的選擇。首先使用類，如果你有多個元素相同的ID。其次使用index（）來找到td的對應th。爲了明確指定id父表，以便該腳本不在其他tables/td頁上操作。

Live Demo

的Html

<table id="tbl1" border="1"> 
    <tr> 
     <th>heading 1</th> 
     <th>heading 2</th> 
    </tr> 
    <tr> 
     <td class="edit">row 1, cell 1</td> 
     <td class="edit">row 1, cell 2</td> 
    </tr> 
    <tr> 
     <td class="edit">row 2, cell 1</td> 
     <td class="edit">row 2, cell 2</td> 
    </tr> 
</table>

的Javascript

$('#tbl1').on('click', '.edit', function() { 
    var th = $('#tbl1 th').eq($(this).index()); 
    alert(th.text()); // returns text of respective header 
});

來源

2013-03-19 08:57:12 Adil

這個工作，但返回錯誤的標題，並始終是相同的。我將用HTML標記更新我的問題。 – vulkoingim 2013-03-19 09:05:07

檢查我更新的答案。 – Adil 2013-03-19 09:09:22

這起作用。但是我想用另一個加法來糾纏你:)由於表格是用Ajax加載的，我需要'$（'body'）。on（'click'，'.edit'，function（）{'註冊事件當我把你的代碼放到這個函數中時，它每次都循環+1，所以當我第一次點擊'JobNo'時，第二次我得到'JobNo \ n JobNo'等等......我怎麼能解決這個問題？ – vulkoingim 2013-03-19 09:22:17

對於這個標記

<table> 
    <tr class="header"> 
     <th>Header One</th> 
     <th>Header Two</th> 
     <th>Header Three</th> 
    </tr> 
    <tr> 
     <td class="edit">One</td> 
     <td class="edit">Two</td> 
     <td class="edit">Three</td> 
    </tr> 
    <tr> 
     <td class="edit">One</td> 
     <td class="edit">Two</td> 
     <td class="edit">Three</td> 
    </tr> 
</table>

您可以使用此jQuery代碼：

$(".mytable").on('click', 'td.edit', function(e) { 
    var index = $(this).index(); 
    var table = $(this).closest('table'); 
    console.log(table.find('.header th').eq(index).text()); // returns the header text 
});

小提琴這裏：http://jsfiddle.net/7qXm8/

來源

2013-03-19 09:10:35 Vishal

jQuery獲得點擊單元格的表頭名稱與編號

回答

相關問題