如何使用jquery添加保存/编辑按钮？

我正在为班级创建一个日程安排（见下图），但我在添加编辑/保存按钮时遇到了困难。我希望它最初读“编辑”，一旦点击，用户应该能够编辑中间的行（当前读“写”）。我想使用jQuery。有人能帮忙吗？

以下是我当前的HTML格式：

<div class = "container">
        <div class = "row my-row">
            <div class = "col my-col col-a1"> 9am </div>
            <div class = "col my-col col-a2"> write </div>
            <div class = "col my-col col-a3"> save </div>
        </div>
  ( + more rows)

上午9点
写
拯救
（+更多行）

您可以使用css选择器附加单击输入，并通过实现

html5内容可编辑属性

$(function(){
    
    // use html5 contenteditable on .selector click
   
    $('.col.my-col.col-a2').on('click', function(){
      $(this).attr('contenteditable','true');
    })
  
})

---

contenteditable

属性可以使任何元素都可编辑。使用jQuery，我们可以有条件地将其添加到所需的元素中。 这是密码

$（函数（）{
$（document）.on（'click'，'my row.col-a3'，function（）{
let editable=$（this.prev（'.col-a2'）.attr（'contenteditable'）；
如果（可编辑）{
$（this.text（'edit'）；
$（this）.prev（'.col-a2'）.removeAttr（'contenteditable'）；
}
否则{
$（this.text（'save'）；
$（this.prev（'.col-a2'）.attr（'contenteditable'，'true'）；
}
})
});

上午9点
写
编辑
试试这个


$（函数（）{
$（document）.on（'click'，'my row.col-a3'，function（）{
let editable=$（this.prev（'.col-a2'）.attr（'contenteditable'）；
如果（可编辑）{
$（this.text（'Edit'）；
$（'.col-a2'）.css（{'border'：'''}）；
$（this）.prev（'.col-a2'）.removeAttr（'contenteditable'）；
}
否则{
$（this.text（'Save'）；
$（'.col-a2'）.css（{'border'：'1px solid'}）；
$（this.prev（'.col-a2'）.attr（'contenteditable'，'true'）；
}
})
});
.main{
宽度：550px；
高度：200px；
背景：#ecdee4；
文本对齐：居中；
}
.我的那一排{
显示：内联flex；
边缘顶部：20px；
}
.我的排{
利润率：0px 3px；
背景：白色；
填充物：5px；
}
.col-a2{
宽度：300px；
}
.col-a3{
光标：指针；
}

日计划者
一个交互式计划器，帮助组织您的bysu日
上午9点
写在这里
编辑
您尝试过jQuery吗？如果是这样，您也可以粘贴jquery代码吗？