Editable bootstrap table row on button click using jquery

Question

I'm trying to edit the values of bootstrap table on button click using Jquery. I've taken reference from this post making row editable and it works exactly fine.The only problem that I am having is to double click the button to enter the edit mode.Here is my code snippet

$('.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>

Here I've disabled editing the data from one column.As you can see,when we click the edit button in first row,only a single click is required but for remaining rows,multiple click is necessary.And after multiple clicks,it would be in edit mode on single click until refreshed the page.I don't know where I missed.I would be grateful for your help.

score 3 · Accepted Answer · answered Nov 22 '18 at 07:41

The problem is this line: it is taking line into consideration while you did $(this).html().

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

Why did it work on next click, because in your code you changed to Edit

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

You can try to do below:

use $(this).text().trim() or correct the line:

<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>

Editable bootstrap table row on button click using jquery

1 Answers1