Редактируемая строка таблицы начальной загрузки по нажатию кнопки с помощью jquery

Question

Я пытаюсь редактировать значения таблицы начальной загрузки по нажатию кнопки, используя Jquery.Я взял ссылку из этого поста , что делает строку редактируемой , и она работает точно. Единственная проблема, с которой я сталкиваюсь - это двойной щелчок по кнопке для входа в режим редактирования. Вот мой фрагмент кода

$('.editbtn').click(function () {
              var currentTD = $(this).parents('tr').find('td');
              if ($(this).html() == 'Edit') {
                  currentTD = $(this).parents('tr').find($("td").not(":nth-child(1)"));
                  $.each(currentTD, function () {
                      $(this).prop('contenteditable', true).css({
                        'background':'#fff',
                        'color':'#000'

                    })
                  });
              } else {
                 $.each(currentTD, function () {
                      $(this).prop('contenteditable', false).removeAttr("style");
                  });
              }
    
              $(this).html($(this).html() == 'Edit' ? 'Save' : 'Edit')
              if ($(this).html() == 'Save'){
                $(this).prop('contenteditable',false)
              }
    
          });

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<table id="tableone" class="table table-striped table-dark table-bordered" border="1">
        <thead>
            <tr>
                <th scope="col">Date</th>
                  <th scope="col">Name</th>

                  <th scope="col">Status</th>
            </tr>
        </thead>
       
<tbody>
               <tr>
                  <td>21st August</td>
                  <td>abc</td>
                 
                       <td  contenteditable="false"><button type="button"class="btn btn-primary editbtn">Edit</button>
                    <button type="button" class="btn btn-danger">
                    Delete
                     </button></td>
               </tr>
            <tr>
                  <td>21st August</td>
                  <td>abc</td>
             
                      <td  contenteditable="false"><button type="button" class="btn btn-primary editbtn" >
                     Edit
                     </button>
                    <button type="button" class="btn btn-danger">
                    Delete
                     </button></td>
               </tr>  
               <tr>
                  <td>21st August</td>
                  <td>abc</td>
         
                    <td  contenteditable="false"><button type="button" class="btn btn-primary editbtn" >
                     Edit
                     </button>
                    <button type="button" class="btn btn-danger">
                    Delete
                     </button></td>
               </tr>  <tr>
                  <td>21st August</td>
                  <td>abc</td>
              

                  <td  contenteditable="false"><button type="button" class="btn btn-primary editbtn">
                     Edit
                     </button>
                    <button type="button" class="btn btn-danger">
                    Delete
                     </button></td>
               </tr>
            </tbody>
    </table>

Здесь я отключил редактирование данных из одного столбца. Как вы можете видеть, когда мы нажимаем кнопку редактирования в первом ряду, только один щелчоктребуется, но для оставшихся строк требуется несколько щелчков мышью. И после нескольких щелчков он будет в режиме редактирования одним щелчком мыши, пока не обновит страницу. Я не знаю, где я пропустил. Я был бы признателен за вашу помощь.

Answer 1

Проблема в этой строке: она учитывает line, в то время как вы сделали $(this).html().

<button type="button" class="btn btn-primary editbtn" >
                     Edit
                     </button>

Почему это работает при следующем щелчке, потому что в вашемкод, который вы изменили на Редактировать

$(this).html($(this).html() == 'Edit' ? 'Save' : 'Edit')

Вы можете попробовать сделать следующее:

использовать $(this).text().trim() или исправить строку:

<button type="button" class="btn btn-primary editbtn" >Edit</button>

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
  <script>
  $(document).ready(function(){
  $('.editbtn').click(function () {
              var currentTD = $(this).parents('tr').find('td');
              //alert('this '+$(this).html() );
              if ($(this).text().trim() == 'Edit') {
                  currentTD = $(this).parents('tr').find($("td").not(":nth-child(1)"));
                  //alert("first if "+currentTD.html());
                  $.each(currentTD, function () {
                      $(this).prop('contenteditable', true).css({
                        'background':'#fff',
                        'color':'#000'

                    })
                  });
              } else {
               // alert("second if "+currentTD.html());
                 $.each(currentTD, function () {
                    //alert("second if "+currentTD.html());
                      $(this).prop('contenteditable', false).removeAttr("style");
                  });
              }
    
              $(this).html($(this).html() == 'Edit' ? 'Save' : 'Edit')
              if ($(this).html() == 'Save'){
               // alert("third if "+currentTD.html());
                $(this).prop('contenteditable',false)
              }
    
          });
          });
  </script>
</head>
<body>
<table id="tableone" class="table table-striped table-dark table-bordered" border="1">
        <thead>
            <tr>
                <th scope="col">Date</th>
                  <th scope="col">Name</th>

                  <th scope="col">Status</th>
            </tr>
        </thead>
       
<tbody>
               <tr>
                  <td>21st August</td>
                  <td>abc</td>
                 
                       <td  contenteditable="false"><button type="button"class="btn btn-primary editbtn">Edit</button>
                    <button type="button" class="btn btn-danger">
                    Delete
                     </button></td>
               </tr>
            <tr>
                  <td>21st August</td>
                  <td>abc</td>
             
                      <td  contenteditable="false"><button type="button" class="btn btn-primary editbtn" >Edit</button>
                    <button type="button" class="btn btn-danger">
                    Delete
                     </button></td>
               </tr>  
               <tr>
                  <td>21st August</td>
                  <td>abc</td>
         
                    <td  contenteditable="false"><button type="button" class="btn btn-primary editbtn" >Edit</button>
                    <button type="button" class="btn btn-danger">
                    Delete
                     </button></td>
               </tr>  <tr>
                  <td>21st August</td>
                  <td>abc</td>
              

                  <td  contenteditable="false"><button type="button" class="btn btn-primary editbtn">Edit</button>
                    <button type="button" class="btn btn-danger">
                    Delete
                     </button></td>
               </tr>
            </tbody>
    </table>
</body>
</html>