編輯行的表

Question

您好，我有幾排 的每一行的表有編輯按鈕的行數據

這裏是我的表

<table> 
<tr> 
<td class="it_name"> 1111 </td> 
<td class="it_price"> 1111 </td> 
<td class="it_info"> 1111 </td> 
<td class="it_val"> 1111 </td> 
<td class="BTN"> <INPUT TYPE="button" CLASS="edit_items" /> <td/> 
</tr> 
<tr> 
... 
</tr> 
</table> 

TDS中的一個我有一個按鈕，即時通訊將用於編輯該行

冷杉我得到每個td在該行的價值 然後即時通訊將放在該td的textfild並將該textfild的值設置爲舊值那td

，最後我去改變按鈕，另一個按鈕用於敲定編輯

jq(function(){ 
jq('.edit_items').click(function(){ 

/////// getting value of each td      
var name = jq.trim(jq(this).parent().siblings('.it_name').text()); 
var price = jq.trim(jq(this).parent().siblings('.it_price').text()); 
var info = jq.trim(jq(this).parent().siblings('.it_info').text()); 
var av = jq.trim(jq(this).parent().siblings('.it_av').text()); 

////// putting a textfild on each td 

jq(this).parent().siblings('.it_name').html('<input class="it_name_f" type="text" value="'+name+'" />'); 

jq(this).parent().siblings('.it_price').html('<input class="it_price_f" type="text" value="'+price+'" />'); 

jq(this).parent().siblings('.it_info').html('<input class="it_info_f" type="text" value="'+info+'" />'); 

jq(this).parent().siblings('.it_av').html('<input class="it_va_f" type="text" value="'+va+'" />'); 

///////// changing button     
jq(this).parent().html('<input name="" class="final" type="button" value="edit_now" />'); 
}) 

現在它的工作原理上把textfild的TDS，但由於某種原因，似乎我不能後，我改變我的按鈕罰款改了其他的tds html！ 或 如果我提出改變按鈕線（這是該代碼最後一個）

jq(this).parent().html('<input name="" class="final" type="button" value="edit_now" />'); 

到我的代碼的頂部，現在該按鈕的變化，但其他TDS不會改變其eather這樣或那樣的！ 我錯過了什麼？

Answer 1

對我的判斷非常多，我有這樣的小提琴：http://jsfiddle.net/dTncS/3/

花了作品數量驚人的創造小提琴，因爲原來的職位並沒有複製/粘貼您正在使用的代碼。在問題甚至得到解決之前，有錯別字和缺失的部分需要修復。這就是爲什麼只要準備好示例代碼就是一個好主意。即使沒有樣本，錯別字也會讓那些本來樂於提供幫助的人感到困惑。

在小提琴中，仍然有更多的緩存可以完成，但我希望保持代碼的狀態更接近您所寫的內容。沒有人會爲你瘋狂。 ;-)

var jq = jQuery.noConflict(); 

jq(function() { 

    var $table = jq('table'); 

    // any time there's a finalize button in a table, bind this to it 
    $table.delegate('.final', 'click', function() { 
     // do finalize stuff here 
     alert('finalizing!'); 
    }); 

    // ditto for edit_items buttons. Bind this to those    
    $table.delegate('.edit_items', 'click', function() { 

     var $thisParent = jq(this).parent(); // for the love of all things good and holy, cache! 
     /////// getting value of each td      
     var name = jq.trim($thisParent.siblings('.it_name').text()), 
      price = jq.trim($thisParent.siblings('.it_price').text()), 
      info = jq.trim($thisParent.siblings('.it_info').text()), 
      av = jq.trim($thisParent.siblings('.it_av').text()); 

     ////// putting a textfild on each td 
     $thisParent.siblings('.it_name').html('<input class="it_name_f" type="text" value="' + name + '" />'); 
     $thisParent.siblings('.it_price').html('<input class="it_price_f" type="text" value="' + price + '" />'); 
     $thisParent.siblings('.it_info').html('<input class="it_info_f" type="text" value="' + info + '" />'); 
     $thisParent.siblings('.it_av').html('<input class="it_va_f" type="text" value="' + av + '" />'); 

     $thisParent.html('<input name="" class="final" type="button" value="finalize" />'); 
    }); 
}); 

據我所知，你原來的原因沒有工作（即使它是不是在IMO生產就緒狀態）是原因只有一個：您嘗試使用一個變量當你聲明的變量是「av」時，「va」。使用JavaScript控制檯會盡早提醒您這些問題。

，你應該從學習的主要改進有：

1. 緩存您的jQuery對象。完全沒有理由使用$（this）的次數與您將它緩存在變量中時的次數一樣多。由於你的每個$（this）... siblings（）調用都是兩次，所以你可以更進一步並緩存它們。我沒有。

2. 使用.delegate（），尤其是當您知道要添加和從DOM中刪除節點時。這很容易。

一件事，你需要學習，因爲你提前是使用迭代器（jQuery中，。每個（）是很容易的，但也有其他如「爲」和「而」循環，你可以利用）。你會注意到，獲得文本的每一行都是幾乎相同的代碼。然後你的4行創建文本字段幾乎是相同的代碼。您可以設計一段重複X次的代碼，根據需要交換值。