爲jQuery交互識別元素的最佳方法

假設我有一個項目表，並且我想向每行添加一個按鈕以刪除該項目。物品來自數據庫，因此它們具有唯一的ID。在jQuery函數中，我必須檢索所述項目的ID，以便打開確認框並最終將瀏覽器重定向到刪除頁面（從不知道安全檢查，它是供內部使用的）。爲jQuery交互識別元素的最佳方法

在標記中哪裏放置ID最好？

來源

2010-02-08 Matteo Riva

這只是我，還是那麼簡單？

<tr id="cell-8958"><td>..<td><td class="delete">Delete me</td></tr>

...

$('.delete').click(function(){ 
    thisid = $(this).parent().attr('id'); 
    dostuff(); 
});

編輯：或者，如果你想開始編號：

.id { display: none; }

...

<tr><td class="id">cell-8958</td><td>..<td><td class="delete">Delete me</td></tr>

...

$('.delete').click(function(){ 
    thisid = $(this).parent().find('td.id').text(); 
    dostuff(); 
});

P.S .: CSS可能不同，尚未在瀏覽器中測試過。

答：

來源

2010-02-08 17:23:26

雖然不是SEO友好的=） – Darmen 2010-02-09 17:44:05

「從不安全檢查，這是內部使用」 - 仔細閱讀*：]：D – 2010-02-09 19:53:01

我認爲這是更好地把一個id爲行的id的一部分：

.... 
<tr id="item_3">...<td>delete tag</td></tr> 
<tr id="item_4">...<td>delete tag</td></tr> 
<tr id="item_5">...<td>delete tag</td></tr> 
....

然後在jQuery的使用簡單的regex得到一個ID。

更新：或者，只需將其放入rel屬性的刪除按鈕/錨點。

更新2：由於正則表達式可能會降低jQuery在這種情況下的性能，請嘗試將id的值設爲rel每行的屬性。

來源

2010-02-08 16:37:12 Darmen

在這種情況下，我將使用什麼選擇器來識別「delete」單元？給他們一個班，然後從他們的父母那裏獲取ID？ – 2010-02-08 16:51:48

@kemp是的，但你應該從父母的父母身上取得一個'id' :) – Darmen 2010-02-08 16:54:58

'rel'是一個有趣的解決方案，它的任何價值都是有效的嗎？ – 2010-02-08 17:22:51

給每個項目一個唯一的ID。 '＃'選擇器工作得最快，因爲它映射到原生的javascript方法。

來源

2010-02-08 16:37:41

只需添加一個：ID必須以字母開頭。更多信息在http://www.w3.org/TR/html401/types.html#type-name – Darmen 2010-02-08 16:48:30

以及我可以給他們一個唯一的ID，但我不能使用'＃'選擇器，除非我想爲每個項目編寫一個函數。我將不得不將它們作爲 - 包含它們的表格的後代來訪問它們。這是正確的嗎？ – 2010-02-08 16:56:05

你不需要使用ID選擇器，你可以使用'$（'button'）。closest（'tr'）'來選擇父行。 – Rowan 2010-02-08 17:11:37

將它放入<tr>元素是有意義的，因爲這是保存與此項目相關的所有數據/標記的項目。如果您事先知道刪除按鈕是與唯一ID進行交互的唯一元素，那麼將其添加到按鈕本身會稍微快捷一些。

來源

2010-02-08 16:37:58

-7

我寧願用DIV佈局而不是表

來源

2010-02-08 16:43:52 Drakiula

-1沒有掩蓋問題。這顯然是表的語義上有效的用例。 – 2010-02-08 16:47:17

這是爲什麼？我們不能再使用表格來處理來自數據庫表格的數據嗎？ – 2010-02-08 16:47:39

問題是如何找到最適合物品識別的地方，這不是在這種情況下應該使用哪種標記標籤。 – Darmen 2010-02-08 16:50:08

你應該把它周圍的刪除按鈕在窗體上：

<tr>...<td><form action="delete.htm?id=001"><input type="submit">Delete</input></form></td></tr>

我意識到，這似乎有點重量級的，但這個工程沒有JavaScript，這總是最佳做法。

來源

2010-02-08 16:54:51 graphicdivine

非JS支持的好處，可以通過確認模式和Ajax進行增強。 – Rowan 2010-02-08 19:04:37

有幾種方法可以實現這一點。

首先，嘗試jQuery meta plugin。這允許您將JSON數據嵌入到元素的class屬性中。它驗證並不影響應用於元素的類。您的TR看起來是這樣的：

<tr class="some-class {uid:'12345', asMuchDataAsYouLike}">

或者（如果你不介意使用HTML5），使用數據屬性（here，here）：

<tr data-uid="12345">

注：這將驗證爲HTML5如果您使用正確的DocType（<!DOCTYPE html>）。

編輯（例如使用）：

HTML：

<tr data-uid="12345"> 
    <td>Some Data</td> 
    <td><button class="delete">Delete</button></td> 
</tr>

的Javascript：

$('button.delete').click(function(){ 
    // obviously you'd do something different with the data ;) 
    alert($(this).closest('tr').attr('data-uid')); 
    });

來源

2010-02-08 17:09:57 Rowan

我認爲你的意思是這個插件：http://docs.jquery.com/Plugins/Metadata/metadata – 2010-02-08 17:21:07

糟糕，謝謝 – Rowan 2010-02-08 17:25:27

對於這個特定的情況有點矯枉過正，但是非常有趣的替代解決方案，謝謝 – 2010-02-08 17:56:04

沒有測試，但假設你正在使用jQuery 1.3+

$(this).closest('tr').attr('id');

應該爲您提供您點擊的行的ID（注意您在構建表時必須先爲該行提供一個ID。

來源

2010-02-08 17:13:38

爲jQuery交互識別元素的最佳方法

回答

相關問題