Question

我正在尝试创建一个表，当单击其中一个单元格时，它会用一个已存储的值替换它的文本内容，而当第二次单击另一个单元格时，会更改单击的单元格文本。上次点击。

我成功完成了第一次迭代，但对于第二次迭代，我不知道为什么删除的单元格的值存储为null。这是我尝试过的：

HTML：

<table>
    <tr id="l1">
        <td><span>opA</span></td>
    </tr>
    <tr id="l2">
        <td><span>OpB</span></td>
    </tr>
    <tr id="l3">
        <td><span>OpC</span></td>
    </tr>               
    <tr id="l4">
        <td><span>OpD</span></td>
    </tr>
</table>

jQuery的：

   var removed="firstchange";
     var removed2;
$("#l1, #l2, #l3, #l4").click(function() {
    if($(this).attr("id")=="l1"){
        removed2=$('#l1').find("span").text();
        $('#l1').find("span").replaceWith(removed);
        removed=removed2;
    }else if($(this).attr("id")=="l2"){
        removed2=$('#l2').find("span").text();
        $('#l2').find("span").replaceWith(removed);
        removed=removed2;
    }else if($(this).attr("id")=="l3"){
        removed2=$('#l3').find("span").text();
        $('#l3').find("span").replaceWith(removed);
        removed=removed2;
    }else if($(this).attr("id")=="l4"){
        removed2=$('#l4').find("span").text();
        $('#l4').find("span").replaceWith(removed);
        removed=removed2;
    }   
});

Answer 1

您的解决方案无效，因为replaceWith函数会使用提供的文本替换代码中的span元素。尝试更通用的解决方案，只更改span内的文本，不要替换span元素。

var removed="firstchange", 
    removed2;
$("table").on('click','tr',function() {
    var current = $(this).find('span');
    removed2 = current.text();
    current.text(removed);
    removed = removed2;
});

用replaceWith（）更改文本

1 个答案: