Editable bootstrap table row on button click using jquery

up vote
0
down vote

favorite

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.

edited Nov 22 at 7:08

asked Nov 22 at 7:00

samana ghimire

197

add a comment |

up vote
0
down vote

favorite

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

edited Nov 22 at 7:08

asked Nov 22 at 7:00

samana ghimire

197

add a comment |

up vote
0
down vote

favorite

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

edited Nov 22 at 7:08

asked Nov 22 at 7:00

samana ghimire

197

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

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

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

jquery html5 bootstrap-4 bootstrap-table

edited Nov 22 at 7:08

asked Nov 22 at 7:00

samana ghimire

197

edited Nov 22 at 7:08

asked Nov 22 at 7:00

samana ghimire

197

edited Nov 22 at 7:08

asked Nov 22 at 7:00

samana ghimire

197

asked Nov 22 at 7:00

samana ghimire

197

asked Nov 22 at 7:00

samana ghimire

197

add a comment |

1 Answer
1

active

oldest

votes

up vote
0
down vote

accepted

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>

answered Nov 22 at 7:41

secret super star

68413

add a comment |

Your Answer

StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");

StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});

function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});

}
});

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53425446%2feditable-bootstrap-table-row-on-button-click-using-jquery%23new-answer', 'question_page');
}
);

Post as a guest

Name

Required, but never shown

1 Answer
1

active

oldest

votes

1 Answer
1

active

oldest

votes

up vote
0
down vote

accepted

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>

answered Nov 22 at 7:41

secret super star

68413

add a comment |

up vote
0
down vote

accepted

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>

answered Nov 22 at 7:41

secret super star

68413

add a comment |

up vote
0
down vote

accepted

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>

answered Nov 22 at 7:41

secret super star

68413

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>

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

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

answered Nov 22 at 7:41

secret super star

68413

answered Nov 22 at 7:41

secret super star

68413

answered Nov 22 at 7:41

secret super star

68413

answered Nov 22 at 7:41

secret super star

68413

add a comment |

draft saved

draft discarded

Thanks for contributing an answer to Stack Overflow!

Please be sure to answer the question. Provide details and share your research!

But avoid …

Asking for help, clarification, or responding to other answers.

Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.

Some of your past answers have not been well-received, and you're in danger of being blocked from answering.

Please pay close attention to the following guidance:

Please be sure to answer the question. Provide details and share your research!

But avoid …

Asking for help, clarification, or responding to other answers.

Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Name

Required, but never shown

Name

Required, but never shown

This page is only for reference, If you need detailed information, please check here

搜尋此網誌

Qfyilyi