Javascript 编辑表中的行

嗨，我有一张有几排的桌子 每一行都有一个用于编辑该行数据的按钮

这是我的桌子

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

1111
1111
1111
1111
...

在其中一个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" />');
})

jq（函数（）{
jq（'.edit_items'）。单击（函数（）{
///////获取每个td的值
var name=jq.trim（jq（this.parent（）.sides（'.it_name'）.text（））；
var price=jq.trim（jq（this.parent（）.sibbines（'.it_price'）.text（））；
var info=jq.trim（jq（this.parent（）.sibbines（'.it_info'）.text（））；
var av=jq.trim（jq（this.parent（）.sibles（'.it_av'）.text（））；
//////在每个td上放置文本文件
jq（this）.parent（）.sibbines（'.it_name'）.html（''）；
jq（this.parent（）.sibbins（'.it_price'）.html（''）；
jq（this.parent（）.sibbins（'.it_info'）.html（''）；
jq（this.parent（）.sides（'.it_av'）.html（''）；
/////////更换按钮
jq（this.parent（）.html（“”）；
})

现在它可以很好地将textfild放在tds上，但由于某些原因，在我更改了其他tds html之后，我似乎无法更改我的按钮！ 或 如果我移动更改按钮行（这是此代码中的最后一行）

jq（this.parent（）.html（“”）；

在我的代码顶部，现在按钮改变了，但是其他tds不会改变它的eather这个或那个！

---

我遗漏了什么吗？

与我的判断相反，我有一把小提琴：

创建小提琴花了惊人的工作量，因为原始帖子没有复制/粘贴您正在处理的代码。在解决问题之前，有一些拼写错误和缺失的部分需要修复。这就是为什么只准备好示例代码总是一个好主意。即使没有示例，也会出现拼写错误让那些本来乐意帮忙的人感到困惑

实际上，还有更多的缓存可以完成，但我想让代码保持与您编写的代码更接近的状态。没有必要对您发狂。；-）

var jq=jQuery.noConflict（）；
jq（函数（）{
var$table=jq（“表”）；
//任何时候在表中有一个finalize按钮，请将其绑定到该按钮
$table.delegate（'.final'，click'，function（）{
//在这里做最后定稿
警报（'finaling！'）；
});
//编辑项目按钮同上。将其绑定到
$table.delegate（'.edit_items'，'click'，function（）{
var$thisParent=jq（this.parent（）；//为了所有美好和神圣的事物，缓存！
///////获取每个td的值
var name=jq.trim（$thisParent.sibbines（'.it_name'）.text（）），
price=jq.trim（$thisParent.sillides（'.it_price'）.text（）），
info=jq.trim（$thisParent.sides（'.it_info'）.text（）），
av=jq.trim（$thisParent.sibbines（'.it_av'）.text（））；
//////在每个td上放置文本文件
$thisParent.sibbins（'.it_name'）.html（''）；
$thisParent.sibbins（'.it_price'）.html（''）；
$thisParent.sibbins（'.it_info'）.html（''）；
$thisParent.sibbins（'.it_av'）.html（''）；
$thisParent.html（“”）；
});
});

据我所知，您的原始版本不起作用的原因（即使它在IMO中没有处于生产就绪状态）只有一个原因：当您声明的变量为“av”时，您尝试使用变量“va”。使用JavaScript控制台将提前提醒您此类问题

您应该学习的主要改进包括：

缓存jQuery对象。完全没有理由像在变量中缓存$（this）那样多次使用$（this）。因为每次$（this）…sides（）调用都会进行两次，所以您可以进一步缓存这些对象。我没有这样做

使用.delegate（），尤其是当您知道要从DOM中添加和删除节点时。这会简单得多

---

在前进的过程中，您需要学习的一件事是使用迭代器（在jQuery中，.each（）非常简单；但是还有其他一些循环，例如“for”和“while”循环，您可以利用它们）。您会注意到，获取文本的4行代码几乎相同。然后，您创建文本字段的4行代码几乎相同。您可以设计一段代码，只重复X次，根据需要交换值。

这一行：为什么，哦，为什么，您不使用其中一个（多个）现有的表编辑器jQuery组件？Matt说了什么。唉，我花了太多时间编辑我自己的注释以使其更简洁。@gregp thnx我只是在这里写了表，没有从原始文件复制/粘贴该部分，这不是问题@Matt实际上我也要编辑数据库中的这行。这不仅仅是一个表，所以我不确定如果我可以用一个插件来做这件事，而且我自己做似乎很容易

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

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" />');
    });
});