edit multiple rows using same button using jquery

I'm trying to edit multiple rows using one button using jquery. Since I've used row span so when I click on edit button,only the value of single row is editable. Here is the code snippet

$('.editbtn3').click(function() {

  var edit = $(this).text().trim() == 'Edit';

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

  $(this).parents('tbody').find($("tr.set"+$(this).data("set")+">td").not(":nth-child(1),:last-child")).each(function() {

    if (edit) {

      $(this).prop('contenteditable', true).css({

        'background': '#fff',

        'color': '#000'

      })

    } else {

      $(this).prop('contenteditable', false).removeAttr("style");

    }

  });



});

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

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />

<table class="table table-striped table-dark table-bordered" id="myTable">

  <thead>

    <tr>

      <th scope="col">S.N</th>

      <th scope="col">abc</th>

      <th scope="col">def</th>

      <th scope="col">option</th>

    </tr>

  </thead>

  <tbody>

    <tr class="set1">

      <th scope="row" rowspan="2">1</th>

      <td>20</td>

      <td>21st August</td>

      <td rowspan="2" ><button type="button" data-set="1" class="btn btn-primary editbtn3">Edit</button>

      </td>

    </tr>

    <tr class="set1">

      <td>21</td>

      <td>21st August</td>

    </tr>

    <tr class="set2">

      <th scope="row" rowspan="2">2</th>

      <td>20</td>

      <td>21st August</td>

      <td rowspan="2"><button type="button" data-set="2" class="btn btn-primary editbtn3">Edit</button>

      </td>

    </tr>

    <tr class="set2">

      <td>21</td>

      <td>21st August</td>

    </tr>

  </tbody>

Here I am only able to edit single row. Do I have to use loop for multiple rows editing or is there another solution?

edited Nov 25 '18 at 8:00

asked Nov 25 '18 at 6:31

samana ghimire

267

You want to edit one row at a time or multiple rows using one button ?

– Ambrish Pathak
Nov 25 '18 at 6:40

$(this).parents('tr') will ONLY find the cells on the row with the button. I suggest you do not use tables but class.

– mplungjan
Nov 25 '18 at 6:44

@AmbrishPathak I want to edit multiple rows using single button

– samana ghimire
Nov 25 '18 at 6:46

@mplungjan Sorry I didnot get what you are trying to say.Could you explain a little?

– samana ghimire
Nov 25 '18 at 6:48

add a comment |

I'm trying to edit multiple rows using one button using jquery. Since I've used row span so when I click on edit button,only the value of single row is editable. Here is the code snippet

$('.editbtn3').click(function() {

  var edit = $(this).text().trim() == 'Edit';

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

  $(this).parents('tbody').find($("tr.set"+$(this).data("set")+">td").not(":nth-child(1),:last-child")).each(function() {

    if (edit) {

      $(this).prop('contenteditable', true).css({

        'background': '#fff',

        'color': '#000'

      })

    } else {

      $(this).prop('contenteditable', false).removeAttr("style");

    }

  });



});

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

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />

<table class="table table-striped table-dark table-bordered" id="myTable">

  <thead>

    <tr>

      <th scope="col">S.N</th>

      <th scope="col">abc</th>

      <th scope="col">def</th>

      <th scope="col">option</th>

    </tr>

  </thead>

  <tbody>

    <tr class="set1">

      <th scope="row" rowspan="2">1</th>

      <td>20</td>

      <td>21st August</td>

      <td rowspan="2" ><button type="button" data-set="1" class="btn btn-primary editbtn3">Edit</button>

      </td>

    </tr>

    <tr class="set1">

      <td>21</td>

      <td>21st August</td>

    </tr>

    <tr class="set2">

      <th scope="row" rowspan="2">2</th>

      <td>20</td>

      <td>21st August</td>

      <td rowspan="2"><button type="button" data-set="2" class="btn btn-primary editbtn3">Edit</button>

      </td>

    </tr>

    <tr class="set2">

      <td>21</td>

      <td>21st August</td>

    </tr>

  </tbody>

Here I am only able to edit single row. Do I have to use loop for multiple rows editing or is there another solution?

edited Nov 25 '18 at 8:00

asked Nov 25 '18 at 6:31

samana ghimire

267

You want to edit one row at a time or multiple rows using one button ?

– Ambrish Pathak
Nov 25 '18 at 6:40

$(this).parents('tr') will ONLY find the cells on the row with the button. I suggest you do not use tables but class.

– mplungjan
Nov 25 '18 at 6:44

@AmbrishPathak I want to edit multiple rows using single button

– samana ghimire
Nov 25 '18 at 6:46

@mplungjan Sorry I didnot get what you are trying to say.Could you explain a little?

– samana ghimire
Nov 25 '18 at 6:48

add a comment |

I'm trying to edit multiple rows using one button using jquery. Since I've used row span so when I click on edit button,only the value of single row is editable. Here is the code snippet

$('.editbtn3').click(function() {

  var edit = $(this).text().trim() == 'Edit';

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

  $(this).parents('tbody').find($("tr.set"+$(this).data("set")+">td").not(":nth-child(1),:last-child")).each(function() {

    if (edit) {

      $(this).prop('contenteditable', true).css({

        'background': '#fff',

        'color': '#000'

      })

    } else {

      $(this).prop('contenteditable', false).removeAttr("style");

    }

  });



});

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

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />

<table class="table table-striped table-dark table-bordered" id="myTable">

  <thead>

    <tr>

      <th scope="col">S.N</th>

      <th scope="col">abc</th>

      <th scope="col">def</th>

      <th scope="col">option</th>

    </tr>

  </thead>

  <tbody>

    <tr class="set1">

      <th scope="row" rowspan="2">1</th>

      <td>20</td>

      <td>21st August</td>

      <td rowspan="2" ><button type="button" data-set="1" class="btn btn-primary editbtn3">Edit</button>

      </td>

    </tr>

    <tr class="set1">

      <td>21</td>

      <td>21st August</td>

    </tr>

    <tr class="set2">

      <th scope="row" rowspan="2">2</th>

      <td>20</td>

      <td>21st August</td>

      <td rowspan="2"><button type="button" data-set="2" class="btn btn-primary editbtn3">Edit</button>

      </td>

    </tr>

    <tr class="set2">

      <td>21</td>

      <td>21st August</td>

    </tr>

  </tbody>

Here I am only able to edit single row. Do I have to use loop for multiple rows editing or is there another solution?

edited Nov 25 '18 at 8:00

asked Nov 25 '18 at 6:31

samana ghimire

267

I'm trying to edit multiple rows using one button using jquery. Since I've used row span so when I click on edit button,only the value of single row is editable. Here is the code snippet

$('.editbtn3').click(function() {

  var edit = $(this).text().trim() == 'Edit';

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

  $(this).parents('tbody').find($("tr.set"+$(this).data("set")+">td").not(":nth-child(1),:last-child")).each(function() {

    if (edit) {

      $(this).prop('contenteditable', true).css({

        'background': '#fff',

        'color': '#000'

      })

    } else {

      $(this).prop('contenteditable', false).removeAttr("style");

    }

  });



});

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

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />

<table class="table table-striped table-dark table-bordered" id="myTable">

  <thead>

    <tr>

      <th scope="col">S.N</th>

      <th scope="col">abc</th>

      <th scope="col">def</th>

      <th scope="col">option</th>

    </tr>

  </thead>

  <tbody>

    <tr class="set1">

      <th scope="row" rowspan="2">1</th>

      <td>20</td>

      <td>21st August</td>

      <td rowspan="2" ><button type="button" data-set="1" class="btn btn-primary editbtn3">Edit</button>

      </td>

    </tr>

    <tr class="set1">

      <td>21</td>

      <td>21st August</td>

    </tr>

    <tr class="set2">

      <th scope="row" rowspan="2">2</th>

      <td>20</td>

      <td>21st August</td>

      <td rowspan="2"><button type="button" data-set="2" class="btn btn-primary editbtn3">Edit</button>

      </td>

    </tr>

    <tr class="set2">

      <td>21</td>

      <td>21st August</td>

    </tr>

  </tbody>

Here I am only able to edit single row. Do I have to use loop for multiple rows editing or is there another solution?

$('.editbtn3').click(function() {

  var edit = $(this).text().trim() == 'Edit';

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

  $(this).parents('tbody').find($("tr.set"+$(this).data("set")+">td").not(":nth-child(1),:last-child")).each(function() {

    if (edit) {

      $(this).prop('contenteditable', true).css({

        'background': '#fff',

        'color': '#000'

      })

    } else {

      $(this).prop('contenteditable', false).removeAttr("style");

    }

  });



});

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

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />

<table class="table table-striped table-dark table-bordered" id="myTable">

  <thead>

    <tr>

      <th scope="col">S.N</th>

      <th scope="col">abc</th>

      <th scope="col">def</th>

      <th scope="col">option</th>

    </tr>

  </thead>

  <tbody>

    <tr class="set1">

      <th scope="row" rowspan="2">1</th>

      <td>20</td>

      <td>21st August</td>

      <td rowspan="2" ><button type="button" data-set="1" class="btn btn-primary editbtn3">Edit</button>

      </td>

    </tr>

    <tr class="set1">

      <td>21</td>

      <td>21st August</td>

    </tr>

    <tr class="set2">

      <th scope="row" rowspan="2">2</th>

      <td>20</td>

      <td>21st August</td>

      <td rowspan="2"><button type="button" data-set="2" class="btn btn-primary editbtn3">Edit</button>

      </td>

    </tr>

    <tr class="set2">

      <td>21</td>

      <td>21st August</td>

    </tr>

  </tbody>

$('.editbtn3').click(function() {

  var edit = $(this).text().trim() == 'Edit';

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

  $(this).parents('tbody').find($("tr.set"+$(this).data("set")+">td").not(":nth-child(1),:last-child")).each(function() {

    if (edit) {

      $(this).prop('contenteditable', true).css({

        'background': '#fff',

        'color': '#000'

      })

    } else {

      $(this).prop('contenteditable', false).removeAttr("style");

    }

  });



});

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

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />

<table class="table table-striped table-dark table-bordered" id="myTable">

  <thead>

    <tr>

      <th scope="col">S.N</th>

      <th scope="col">abc</th>

      <th scope="col">def</th>

      <th scope="col">option</th>

    </tr>

  </thead>

  <tbody>

    <tr class="set1">

      <th scope="row" rowspan="2">1</th>

      <td>20</td>

      <td>21st August</td>

      <td rowspan="2" ><button type="button" data-set="1" class="btn btn-primary editbtn3">Edit</button>

      </td>

    </tr>

    <tr class="set1">

      <td>21</td>

      <td>21st August</td>

    </tr>

    <tr class="set2">

      <th scope="row" rowspan="2">2</th>

      <td>20</td>

      <td>21st August</td>

      <td rowspan="2"><button type="button" data-set="2" class="btn btn-primary editbtn3">Edit</button>

      </td>

    </tr>

    <tr class="set2">

      <td>21</td>

      <td>21st August</td>

    </tr>

  </tbody>

jquery html5 bootstrap-4

edited Nov 25 '18 at 8:00

asked Nov 25 '18 at 6:31

samana ghimire

267

edited Nov 25 '18 at 8:00

asked Nov 25 '18 at 6:31

samana ghimire

267

edited Nov 25 '18 at 8:00

asked Nov 25 '18 at 6:31

samana ghimire

267

asked Nov 25 '18 at 6:31

samana ghimire

267

asked Nov 25 '18 at 6:31

samana ghimire

267

You want to edit one row at a time or multiple rows using one button ?

– Ambrish Pathak
Nov 25 '18 at 6:40

$(this).parents('tr') will ONLY find the cells on the row with the button. I suggest you do not use tables but class.

– mplungjan
Nov 25 '18 at 6:44

@AmbrishPathak I want to edit multiple rows using single button

– samana ghimire
Nov 25 '18 at 6:46

@mplungjan Sorry I didnot get what you are trying to say.Could you explain a little?

– samana ghimire
Nov 25 '18 at 6:48

add a comment |

You want to edit one row at a time or multiple rows using one button ?

– Ambrish Pathak
Nov 25 '18 at 6:40

$(this).parents('tr') will ONLY find the cells on the row with the button. I suggest you do not use tables but class.

– mplungjan
Nov 25 '18 at 6:44

@AmbrishPathak I want to edit multiple rows using single button

– samana ghimire
Nov 25 '18 at 6:46

@mplungjan Sorry I didnot get what you are trying to say.Could you explain a little?

– samana ghimire
Nov 25 '18 at 6:48

You want to edit one row at a time or multiple rows using one button ?

– Ambrish Pathak
Nov 25 '18 at 6:40

$(this).parents('tr') will ONLY find the cells on the row with the button. I suggest you do not use tables but class.

– mplungjan
Nov 25 '18 at 6:44

@AmbrishPathak I want to edit multiple rows using single button

– samana ghimire
Nov 25 '18 at 6:46

@mplungjan Sorry I didnot get what you are trying to say.Could you explain a little?

– samana ghimire
Nov 25 '18 at 6:48

add a comment |

1 Answer
1

active

oldest

votes

$(this).parents('tr') will ONLY find the cells on the row with the button.

If you have sets, I suggest using data-attr - I am testing for rowspan to eliminate the cells that should be left alone - you can use a class or other ways of selecting. Because of the rowspans you cannot use the :first-child and :last-child selectors.

$('.editbtn3').click(function() {

  var edit = $(this).text().trim() == 'Edit';

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

  var $rows = $("tr.set" + $(this).data("set"));

  $rows.each(function() {

    $(this).find("td").each(function() {

      if ($(this).attr("rowspan")) return false;

      if (edit) {

        $(this).prop('contenteditable', true).css({

          'background': '#fff',

          'color': '#000'

        })

      } else {

        $(this).prop('contenteditable', false).removeAttr("style");

      }

    });

  });

});

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

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />

<table class="table table-striped table-dark table-bordered" id="myTable">

  <thead>

    <tr>

      <th scope="col">S.N</th>

      <th scope="col">abc</th>

      <th scope="col">def</th>

      <th scope="col">option</th>

    </tr>

  </thead>

  <tbody>

    <tr class="set1">

      <th scope="row" rowspan="2">1</th>

      <td>20</td>

      <td>20th August</td>

      <td rowspan="2"><button type="button" data-set="1" class="btn btn-primary editbtn3">Edit</button>

      </td>

    </tr>

    <tr class="set1">

      <td>21</td>

      <td>21st August</td>

    </tr>

    <tr class="set2">

      <th scope="row" rowspan="2">2</th>

      <td>22</td>

      <td>22nd August</td>

      <td rowspan="2"><button type="button" data-set="2" class="btn btn-primary editbtn3">Edit</button>

      </td>

    </tr>

    <tr class="set2">

      <td>23</td>

      <td>23rd August</td>

    </tr>

  </tbody>

</table>

edited Nov 25 '18 at 8:16

answered Nov 25 '18 at 6:54

mplungjan

89.1k22126183

Well it worked.Thanks a lot.But when i added another row having S.N 2 then on clicking the button edit,both the datas of S.N 1 and S.N 2 are editable which is not desirable.On clickin the edit button of S.N 1,only the datas of S.N1 shouldbe able to get edited,not of S.N2.

– samana ghimire
Nov 25 '18 at 7:03

See update with new example

– mplungjan
Nov 25 '18 at 7:36

Well,instead of giving noedit class to the button and the sn, i tried to do using nth child selector (.not(":nth-child(1),:last-child"))) but it didnot work.Adding the class to all other elements seem unfeasible because if there were 30 fields,it will be time consuming to add noedit to every element which we wish to become uneditable.I'm updating the snippet by adding the nth-child selector.Hope you will take a look at it :)

– samana ghimire
Nov 25 '18 at 7:48

If there are 30 fields, only the first and last has the noedit. but I will look

– mplungjan
Nov 25 '18 at 7:50

I've updated the code.Yes if we use the class noedit only the first and last won't be editable but if we have to edit odd or even or every 3rd among many fields while other being uneditable it will be time consuming using class.Hope you get what I am trying to say

– samana ghimire
Nov 25 '18 at 8:03

|
show 4 more comments

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',
autoActivateHeartbeat: false,
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%2f53465216%2fedit-multiple-rows-using-same-button-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

$(this).parents('tr') will ONLY find the cells on the row with the button.

$('.editbtn3').click(function() {

  var edit = $(this).text().trim() == 'Edit';

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

  var $rows = $("tr.set" + $(this).data("set"));

  $rows.each(function() {

    $(this).find("td").each(function() {

      if ($(this).attr("rowspan")) return false;

      if (edit) {

        $(this).prop('contenteditable', true).css({

          'background': '#fff',

          'color': '#000'

        })

      } else {

        $(this).prop('contenteditable', false).removeAttr("style");

      }

    });

  });

});

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

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />

<table class="table table-striped table-dark table-bordered" id="myTable">

  <thead>

    <tr>

      <th scope="col">S.N</th>

      <th scope="col">abc</th>

      <th scope="col">def</th>

      <th scope="col">option</th>

    </tr>

  </thead>

  <tbody>

    <tr class="set1">

      <th scope="row" rowspan="2">1</th>

      <td>20</td>

      <td>20th August</td>

      <td rowspan="2"><button type="button" data-set="1" class="btn btn-primary editbtn3">Edit</button>

      </td>

    </tr>

    <tr class="set1">

      <td>21</td>

      <td>21st August</td>

    </tr>

    <tr class="set2">

      <th scope="row" rowspan="2">2</th>

      <td>22</td>

      <td>22nd August</td>

      <td rowspan="2"><button type="button" data-set="2" class="btn btn-primary editbtn3">Edit</button>

      </td>

    </tr>

    <tr class="set2">

      <td>23</td>

      <td>23rd August</td>

    </tr>

  </tbody>

</table>

edited Nov 25 '18 at 8:16

answered Nov 25 '18 at 6:54

mplungjan

89.1k22126183

Well it worked.Thanks a lot.But when i added another row having S.N 2 then on clicking the button edit,both the datas of S.N 1 and S.N 2 are editable which is not desirable.On clickin the edit button of S.N 1,only the datas of S.N1 shouldbe able to get edited,not of S.N2.

– samana ghimire
Nov 25 '18 at 7:03

See update with new example

– mplungjan
Nov 25 '18 at 7:36

Well,instead of giving noedit class to the button and the sn, i tried to do using nth child selector (.not(":nth-child(1),:last-child"))) but it didnot work.Adding the class to all other elements seem unfeasible because if there were 30 fields,it will be time consuming to add noedit to every element which we wish to become uneditable.I'm updating the snippet by adding the nth-child selector.Hope you will take a look at it :)

– samana ghimire
Nov 25 '18 at 7:48

If there are 30 fields, only the first and last has the noedit. but I will look

– mplungjan
Nov 25 '18 at 7:50

I've updated the code.Yes if we use the class noedit only the first and last won't be editable but if we have to edit odd or even or every 3rd among many fields while other being uneditable it will be time consuming using class.Hope you get what I am trying to say

– samana ghimire
Nov 25 '18 at 8:03

|
show 4 more comments

$(this).parents('tr') will ONLY find the cells on the row with the button.

$('.editbtn3').click(function() {

  var edit = $(this).text().trim() == 'Edit';

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

  var $rows = $("tr.set" + $(this).data("set"));

  $rows.each(function() {

    $(this).find("td").each(function() {

      if ($(this).attr("rowspan")) return false;

      if (edit) {

        $(this).prop('contenteditable', true).css({

          'background': '#fff',

          'color': '#000'

        })

      } else {

        $(this).prop('contenteditable', false).removeAttr("style");

      }

    });

  });

});

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

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />

<table class="table table-striped table-dark table-bordered" id="myTable">

  <thead>

    <tr>

      <th scope="col">S.N</th>

      <th scope="col">abc</th>

      <th scope="col">def</th>

      <th scope="col">option</th>

    </tr>

  </thead>

  <tbody>

    <tr class="set1">

      <th scope="row" rowspan="2">1</th>

      <td>20</td>

      <td>20th August</td>

      <td rowspan="2"><button type="button" data-set="1" class="btn btn-primary editbtn3">Edit</button>

      </td>

    </tr>

    <tr class="set1">

      <td>21</td>

      <td>21st August</td>

    </tr>

    <tr class="set2">

      <th scope="row" rowspan="2">2</th>

      <td>22</td>

      <td>22nd August</td>

      <td rowspan="2"><button type="button" data-set="2" class="btn btn-primary editbtn3">Edit</button>

      </td>

    </tr>

    <tr class="set2">

      <td>23</td>

      <td>23rd August</td>

    </tr>

  </tbody>

</table>

edited Nov 25 '18 at 8:16

answered Nov 25 '18 at 6:54

mplungjan

89.1k22126183

Well it worked.Thanks a lot.But when i added another row having S.N 2 then on clicking the button edit,both the datas of S.N 1 and S.N 2 are editable which is not desirable.On clickin the edit button of S.N 1,only the datas of S.N1 shouldbe able to get edited,not of S.N2.

– samana ghimire
Nov 25 '18 at 7:03

See update with new example

– mplungjan
Nov 25 '18 at 7:36

Well,instead of giving noedit class to the button and the sn, i tried to do using nth child selector (.not(":nth-child(1),:last-child"))) but it didnot work.Adding the class to all other elements seem unfeasible because if there were 30 fields,it will be time consuming to add noedit to every element which we wish to become uneditable.I'm updating the snippet by adding the nth-child selector.Hope you will take a look at it :)

– samana ghimire
Nov 25 '18 at 7:48

If there are 30 fields, only the first and last has the noedit. but I will look

– mplungjan
Nov 25 '18 at 7:50

I've updated the code.Yes if we use the class noedit only the first and last won't be editable but if we have to edit odd or even or every 3rd among many fields while other being uneditable it will be time consuming using class.Hope you get what I am trying to say

– samana ghimire
Nov 25 '18 at 8:03

|
show 4 more comments

$(this).parents('tr') will ONLY find the cells on the row with the button.

$('.editbtn3').click(function() {

  var edit = $(this).text().trim() == 'Edit';

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

  var $rows = $("tr.set" + $(this).data("set"));

  $rows.each(function() {

    $(this).find("td").each(function() {

      if ($(this).attr("rowspan")) return false;

      if (edit) {

        $(this).prop('contenteditable', true).css({

          'background': '#fff',

          'color': '#000'

        })

      } else {

        $(this).prop('contenteditable', false).removeAttr("style");

      }

    });

  });

});

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

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />

<table class="table table-striped table-dark table-bordered" id="myTable">

  <thead>

    <tr>

      <th scope="col">S.N</th>

      <th scope="col">abc</th>

      <th scope="col">def</th>

      <th scope="col">option</th>

    </tr>

  </thead>

  <tbody>

    <tr class="set1">

      <th scope="row" rowspan="2">1</th>

      <td>20</td>

      <td>20th August</td>

      <td rowspan="2"><button type="button" data-set="1" class="btn btn-primary editbtn3">Edit</button>

      </td>

    </tr>

    <tr class="set1">

      <td>21</td>

      <td>21st August</td>

    </tr>

    <tr class="set2">

      <th scope="row" rowspan="2">2</th>

      <td>22</td>

      <td>22nd August</td>

      <td rowspan="2"><button type="button" data-set="2" class="btn btn-primary editbtn3">Edit</button>

      </td>

    </tr>

    <tr class="set2">

      <td>23</td>

      <td>23rd August</td>

    </tr>

  </tbody>

</table>

edited Nov 25 '18 at 8:16

answered Nov 25 '18 at 6:54

mplungjan

89.1k22126183

$(this).parents('tr') will ONLY find the cells on the row with the button.

$('.editbtn3').click(function() {

  var edit = $(this).text().trim() == 'Edit';

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

  var $rows = $("tr.set" + $(this).data("set"));

  $rows.each(function() {

    $(this).find("td").each(function() {

      if ($(this).attr("rowspan")) return false;

      if (edit) {

        $(this).prop('contenteditable', true).css({

          'background': '#fff',

          'color': '#000'

        })

      } else {

        $(this).prop('contenteditable', false).removeAttr("style");

      }

    });

  });

});

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

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />

<table class="table table-striped table-dark table-bordered" id="myTable">

  <thead>

    <tr>

      <th scope="col">S.N</th>

      <th scope="col">abc</th>

      <th scope="col">def</th>

      <th scope="col">option</th>

    </tr>

  </thead>

  <tbody>

    <tr class="set1">

      <th scope="row" rowspan="2">1</th>

      <td>20</td>

      <td>20th August</td>

      <td rowspan="2"><button type="button" data-set="1" class="btn btn-primary editbtn3">Edit</button>

      </td>

    </tr>

    <tr class="set1">

      <td>21</td>

      <td>21st August</td>

    </tr>

    <tr class="set2">

      <th scope="row" rowspan="2">2</th>

      <td>22</td>

      <td>22nd August</td>

      <td rowspan="2"><button type="button" data-set="2" class="btn btn-primary editbtn3">Edit</button>

      </td>

    </tr>

    <tr class="set2">

      <td>23</td>

      <td>23rd August</td>

    </tr>

  </tbody>

</table>

$('.editbtn3').click(function() {

  var edit = $(this).text().trim() == 'Edit';

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

  var $rows = $("tr.set" + $(this).data("set"));

  $rows.each(function() {

    $(this).find("td").each(function() {

      if ($(this).attr("rowspan")) return false;

      if (edit) {

        $(this).prop('contenteditable', true).css({

          'background': '#fff',

          'color': '#000'

        })

      } else {

        $(this).prop('contenteditable', false).removeAttr("style");

      }

    });

  });

});

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

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />

<table class="table table-striped table-dark table-bordered" id="myTable">

  <thead>

    <tr>

      <th scope="col">S.N</th>

      <th scope="col">abc</th>

      <th scope="col">def</th>

      <th scope="col">option</th>

    </tr>

  </thead>

  <tbody>

    <tr class="set1">

      <th scope="row" rowspan="2">1</th>

      <td>20</td>

      <td>20th August</td>

      <td rowspan="2"><button type="button" data-set="1" class="btn btn-primary editbtn3">Edit</button>

      </td>

    </tr>

    <tr class="set1">

      <td>21</td>

      <td>21st August</td>

    </tr>

    <tr class="set2">

      <th scope="row" rowspan="2">2</th>

      <td>22</td>

      <td>22nd August</td>

      <td rowspan="2"><button type="button" data-set="2" class="btn btn-primary editbtn3">Edit</button>

      </td>

    </tr>

    <tr class="set2">

      <td>23</td>

      <td>23rd August</td>

    </tr>

  </tbody>

</table>

$('.editbtn3').click(function() {

  var edit = $(this).text().trim() == 'Edit';

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

  var $rows = $("tr.set" + $(this).data("set"));

  $rows.each(function() {

    $(this).find("td").each(function() {

      if ($(this).attr("rowspan")) return false;

      if (edit) {

        $(this).prop('contenteditable', true).css({

          'background': '#fff',

          'color': '#000'

        })

      } else {

        $(this).prop('contenteditable', false).removeAttr("style");

      }

    });

  });

});

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

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />

<table class="table table-striped table-dark table-bordered" id="myTable">

  <thead>

    <tr>

      <th scope="col">S.N</th>

      <th scope="col">abc</th>

      <th scope="col">def</th>

      <th scope="col">option</th>

    </tr>

  </thead>

  <tbody>

    <tr class="set1">

      <th scope="row" rowspan="2">1</th>

      <td>20</td>

      <td>20th August</td>

      <td rowspan="2"><button type="button" data-set="1" class="btn btn-primary editbtn3">Edit</button>

      </td>

    </tr>

    <tr class="set1">

      <td>21</td>

      <td>21st August</td>

    </tr>

    <tr class="set2">

      <th scope="row" rowspan="2">2</th>

      <td>22</td>

      <td>22nd August</td>

      <td rowspan="2"><button type="button" data-set="2" class="btn btn-primary editbtn3">Edit</button>

      </td>

    </tr>

    <tr class="set2">

      <td>23</td>

      <td>23rd August</td>

    </tr>

  </tbody>

</table>

edited Nov 25 '18 at 8:16

answered Nov 25 '18 at 6:54

mplungjan

89.1k22126183

edited Nov 25 '18 at 8:16

answered Nov 25 '18 at 6:54

mplungjan

89.1k22126183

answered Nov 25 '18 at 6:54

mplungjan

89.1k22126183

answered Nov 25 '18 at 6:54

mplungjan

89.1k22126183

Well it worked.Thanks a lot.But when i added another row having S.N 2 then on clicking the button edit,both the datas of S.N 1 and S.N 2 are editable which is not desirable.On clickin the edit button of S.N 1,only the datas of S.N1 shouldbe able to get edited,not of S.N2.

– samana ghimire
Nov 25 '18 at 7:03

See update with new example

– mplungjan
Nov 25 '18 at 7:36

Well,instead of giving noedit class to the button and the sn, i tried to do using nth child selector (.not(":nth-child(1),:last-child"))) but it didnot work.Adding the class to all other elements seem unfeasible because if there were 30 fields,it will be time consuming to add noedit to every element which we wish to become uneditable.I'm updating the snippet by adding the nth-child selector.Hope you will take a look at it :)

– samana ghimire
Nov 25 '18 at 7:48

If there are 30 fields, only the first and last has the noedit. but I will look

– mplungjan
Nov 25 '18 at 7:50

I've updated the code.Yes if we use the class noedit only the first and last won't be editable but if we have to edit odd or even or every 3rd among many fields while other being uneditable it will be time consuming using class.Hope you get what I am trying to say

– samana ghimire
Nov 25 '18 at 8:03

|
show 4 more comments

Well it worked.Thanks a lot.But when i added another row having S.N 2 then on clicking the button edit,both the datas of S.N 1 and S.N 2 are editable which is not desirable.On clickin the edit button of S.N 1,only the datas of S.N1 shouldbe able to get edited,not of S.N2.

– samana ghimire
Nov 25 '18 at 7:03

See update with new example

– mplungjan
Nov 25 '18 at 7:36

Well,instead of giving noedit class to the button and the sn, i tried to do using nth child selector (.not(":nth-child(1),:last-child"))) but it didnot work.Adding the class to all other elements seem unfeasible because if there were 30 fields,it will be time consuming to add noedit to every element which we wish to become uneditable.I'm updating the snippet by adding the nth-child selector.Hope you will take a look at it :)

– samana ghimire
Nov 25 '18 at 7:48

If there are 30 fields, only the first and last has the noedit. but I will look

– mplungjan
Nov 25 '18 at 7:50

I've updated the code.Yes if we use the class noedit only the first and last won't be editable but if we have to edit odd or even or every 3rd among many fields while other being uneditable it will be time consuming using class.Hope you get what I am trying to say

– samana ghimire
Nov 25 '18 at 8:03

Well it worked.Thanks a lot.But when i added another row having S.N 2 then on clicking the button edit,both the datas of S.N 1 and S.N 2 are editable which is not desirable.On clickin the edit button of S.N 1,only the datas of S.N1 shouldbe able to get edited,not of S.N2.

– samana ghimire
Nov 25 '18 at 7:03

See update with new example

– mplungjan
Nov 25 '18 at 7:36

Well,instead of giving noedit class to the button and the sn, i tried to do using nth child selector (.not(":nth-child(1),:last-child"))) but it didnot work.Adding the class to all other elements seem unfeasible because if there were 30 fields,it will be time consuming to add noedit to every element which we wish to become uneditable.I'm updating the snippet by adding the nth-child selector.Hope you will take a look at it :)

– samana ghimire
Nov 25 '18 at 7:48

If there are 30 fields, only the first and last has the noedit. but I will look

– mplungjan
Nov 25 '18 at 7:50

I've updated the code.Yes if we use the class noedit only the first and last won't be editable but if we have to edit odd or even or every 3rd among many fields while other being uneditable it will be time consuming using class.Hope you get what I am trying to say

– samana ghimire
Nov 25 '18 at 8:03

|
show 4 more comments

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.

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

搜尋此網誌

Nsryjdtyk