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不会改变它的这个或那个！我错过了什么吗？

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）只有一个原因：你尝试使用变量“va”变量你宣称是“av”。使用JavaScript控制台会提前提醒您注意这些问题。

您应该学习的主要改进是：

缓存您的jQuery对象。绝对没有理由使用$（this），就像你可以在变量中缓存它一样多次。由于你的每个$（this）... siblings（）调用都是两次，你可以更进一步缓存它们。我没有。
使用.delegate（），尤其是当您知道要从DOM添加和删除节点时。这简单得多了。

你需要学习的一件事是使用迭代器（在jQuery中，.each（）非常简单;但还有其他诸如“for”和“while”循环你可以利用）。您会注意到获得文本的4行中的每一行都是几乎相同的代码。然后你创建文本字段的4行几乎是相同的代码。您可以设计一段代码，只需重复X次，在需要时交换值。

在表格中编辑一行

1 个答案: