Javascript 使用jquery单击td元素时更改其文本

我在输出中获取Json数据，并将其附加到带有编辑选项的表中，所以我想要的是，当单击td的编辑，然后单击td元素文本时，应将其从“编辑”更改为“保存”，当再次单击“保存”时，应将其更改为编辑，但在一段时间内，一个td元素应从“编辑”更改为“保存”，只有一个“保存”元素应处于活动状态，其他元素应保持“编辑”

<table class="append_data">
    <tr>
        <th>Company</th>
        <th>Contact</th>
        <th>Country</th>
        <th>Action</th>
    </tr>
</table>

获取输出：

预期产出：

你可以试试

$("body").on('click', '.edit_user', function () {
     var userid = $(this).attr("data-id");
     $('.edit_user').not(this).text('Edit');  // back all the edit_user to Edit but not this
     $(this).text(($(this).text().trim() == 'Save') ? 'Edit' : 'Save'); // change the text for this between Edit or Save
});

说明：

• $（'.edit_user'）。不是（this.text（'edit'）返回要编辑的所有其他元素文本
  

• $（this.text（）.trim（）=='Save'）？'编辑“：”保存“

  是if语句的一种简写方法。。表示如果元素的文本为

  Save

  则将其设置为Edit，反之亦然。。和about

  .trim（）

  ，在这里再次检查文本是否与字符串完全相等

---

如我所料，非常感谢您，您能给我解释一下这段代码吗？这样我就知道了this@parvez我已经用注释更新了代码。。我会再解释的我是说为什么我们需要修剪实际上它去掉了空间不客气+1.你也是。。祝你今天愉快：-）

 $("body").on('click', '.edit_user', function () {
        var userid = $(this).attr("data-id");
        $(this).text('Save').siblings().text('Edit');

    });

$("body").on('click', '.edit_user', function () {
     var userid = $(this).attr("data-id");
     $('.edit_user').not(this).text('Edit');  // back all the edit_user to Edit but not this
     $(this).text(($(this).text().trim() == 'Save') ? 'Edit' : 'Save'); // change the text for this between Edit or Save
});