edit multiple rows using same button using jquery

Question

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?

You want to edit one row at a time or multiple rows using one button ? — Ambrish Pathak
– Ambrish Pathak, Commented Nov 25, 2018 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
– mplungjan, Commented Nov 25, 2018 at 6:44
@AmbrishPathak I want to edit multiple rows using single button — samana ghimire
– samana ghimire, Commented Nov 25, 2018 at 6:46
@mplungjan Sorry I didnot get what you are trying to say.Could you explain a little? — samana ghimire
– samana ghimire, Commented Nov 25, 2018 at 6:48

mplungjan · Accepted Answer · 2018-11-25 08:16:05Z

3

$(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, 2018 at 8:16

answered Nov 25, 2018 at 6:54

mplungjan

180k29 gold badges183 silver badges246 bronze badges

Sign up to request clarification or add additional context in comments.

8 Comments

samana ghimire Over a year ago

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 Over a year ago

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

mplungjan Over a year ago

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

samana ghimire Over a year ago

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

mplungjan Over a year ago

You cannot use the first and last-child selectors because of the rowspans. I have instead used the rowspans as eliminators

|

Collectives™ on Stack Overflow

edit multiple rows using same button using jquery

1 Answer 1

8 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

8 Comments

Your Answer

Sign up or log in

Post as a guest

Related