Как добавить кнопку сохранения / редактирования, используя jquery?

Question

Я создаю ежедневник для класса (см. Изображение ниже), и мне сложно добавить кнопку редактирования / сохранения. Я бы хотел, чтобы он изначально читал «редактировать», и после его нажатия пользователь должен иметь возможность редактировать средние строки (которые в настоящее время читают «запись»). Я хотел бы использовать jQuery. Кто-нибудь может помочь?

Here is my current HTML format:

 9:00  напишите  сохранить   (+ больше строк) 

Answer 1

Попробуйте это ..

$(function(){
$(document).on('click','.my-row .col-a3',function(){
    let editable = $(this).prev('.col-a2').attr('contenteditable');
    if(editable){
        $(this).text('Edit');
        $('.col-a2').css({'border': ''});
        $(this).prev('.col-a2').removeAttr('contenteditable');
     }
      else{
        $(this).text('Save');
        $('.col-a2').css({'border': '1px solid'});
        $(this).prev('.col-a2').attr('contenteditable','true');
    }
})
});

.main {
  width: 550px;
  height: 200px;
  background: #ecdee4;
  text-align: center;
}

.my-row {
  display: inline-flex;
  margin-top: 20px;
}

.my-row div {
  margin: 0px 3px;
  background: white;
  padding: 5px;
}

.col-a2 {
  width: 300px;
}

.col-a3 {
  cursor: pointer;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="main">
  <h2 style="font-weight:300;margin-bottom:0px;">Day Planner</h2>
  <p style="margin:0px;font-weight:300">An interactive planner to help organize your bysu day</p>
  <div class = "my-row">
     <div class = "col-a1"> 9am </div>
     <div class = "col-a2"> Write here</div>
     <div class = "col-a3"> Edit </div>
 </div>
</div>

Answer 2

Атрибут contenteditable может сделать любой элемент редактируемым. Используя jQuery, мы можем условно добавить его к желаемому элементу. Вот код

$(function(){
$(document).on('click','.my-row .col-a3',function(){
    let editable = $(this).prev('.col-a2').attr('contenteditable');
    if(editable){
        $(this).text('edit');
        $(this).prev('.col-a2').removeAttr('contenteditable');
     }
      else{
        $(this).text('save');
        $(this).prev('.col-a2').attr('contenteditable','true');
    }
})
});

<script
  src="https://code.jquery.com/jquery-3.5.1.min.js"
  integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0="
  crossorigin="anonymous"></script>

  
<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"> edit </div>
 </div>

Answer 3

Вы можете добавить щелчок с помощью селекторов css и разрешить редактирование, реализовав

html5 contenteditable attribute

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