Cannot make multiple rows editable using JQuery

Question

I have an edit button in every row of a bootstrap interactive table. I am trying to toggle the button glyphicons and based on its current state, make the corresponding row editable.

 <td><button type="button" id="edit" value="" class="btn btn-lg btn-link" data-toggle="tooltip" title ="Edit" style="color: black"><i class="glyphicon glyphicon-edit"></i></td>

And the Javascript is as follows

$(document).ready(function () {
        $("#edit").click(function () {
                var currentTD = $(this).parents('tr').find('td');
                if( $(this).find('i').hasClass('glyphicon-edit'))
                {       
                    currentTD = $(this).parents('tr').find('td');
                    $.each(currentTD, function () {
                        $(this).prop('contenteditable', true);
                        $(this).css('background','yellow');
                    });
                }
                else if( $(this).find('i').hasClass('glyphicon-ok-circle'))
                {                        
                    $.each(currentTD, function () {
                        $(this).prop('contenteditable', false);
                        $(this).css('background','');
                   });
                }
                $(this).find('i').toggleClass('glyphicon-edit').toggleClass('glyphicon-ok-circle');
            })

        });

The issue is that I am only able to do this to the first row. I am not sure why this is happening. New to web stuff here.

since u are using id, it only targets one element. Use class selector so that multiple buttons are targeted — user1
– user1, Commented Jul 26, 2016 at 21:20

Richard Hamilton · Accepted Answer · 2016-07-26 21:20:45Z

2

I have an edit button in every row of a bootstrap interactive table. I am trying to toggle the button glyphicons and based on its current state, make the corresponding row editable.

IDs have to be unique. You can only have one instance. Change your #edit id to the class .edit

<td>
  <button type="button" value="" class="edit btn btn-lg btn-link" data-toggle="tooltip" title="Edit" style="color: black">
    <i class="glyphicon glyphicon-edit"></i>
  </button>
</td>

answered Jul 26, 2016 at 21:20

Richard Hamilton

26.5k11 gold badges65 silver badges88 bronze badges

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

1 Comment

marc Over a year ago

great suggestion ! Thank you very much

gaetanoM · Accepted Answer · 2016-07-26 21:32:26Z

If you want to continue to use the id you may consider the value edit as a prefix in order to have for each button an id like: edit1, edit2, edit3, ....

To select all those ids you can use:

$('[id^="edit"]')

And so your code is:

$(function () {
  $('[id^="edit"]').click(function () {
    var currentTD = $(this).parents('tr').find('td');
    if( $(this).find('i').hasClass('glyphicon-edit'))
    {
      currentTD = $(this).parents('tr').find('td');
      $.each(currentTD, function () {
        $(this).prop('contenteditable', true);
        $(this).css('background','yellow');
      });
    }
    else if( $(this).find('i').hasClass('glyphicon-ok-circle'))
    {
      $.each(currentTD, function () {
        $(this).prop('contenteditable', false);
        $(this).css('background','');
      });
    }
    $(this).find('i').toggleClass('glyphicon-edit').toggleClass('glyphicon-ok-circle');
  })
});

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-1.12.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<table style="width:100%">
    <tr>
        <td><button type="button" id="edit1" value="" class="btn btn-lg btn-link" data-toggle="tooltip" title ="Edit" style="color: black"><i class="glyphicon glyphicon-edit"></i></td>
    </tr>
    <tr>
        <td><button type="button" id="edit2" value="" class="btn btn-lg btn-link" data-toggle="tooltip" title ="Edit" style="color: black"><i class="glyphicon glyphicon-edit"></i></td>
    </tr>
    <tr>
        <td><button type="button" id="edit3" value="" class="btn btn-lg btn-link" data-toggle="tooltip" title ="Edit" style="color: black"><i class="glyphicon glyphicon-edit"></i></td>
    </tr>
    <tr>
        <td><button type="button" id="edit4" value="" class="btn btn-lg btn-link" data-toggle="tooltip" title ="Edit" style="color: black"><i class="glyphicon glyphicon-edit"></i></td>
    </tr>
</table>

interesting. I did try that but since the number of rows are not going to be fixed, I would have to do more server side scripting in order for it to generate all the numbers.

Collectives™ on Stack Overflow

Cannot make multiple rows editable using JQuery

2 Answers 2

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related