Making row editable when hit row edit button

Question

I'm new to jQuery and JavaScript. I'm trying to click on my Edit button in my table and make the entire row editable. For some reason it's not working. I think it's only looking at the cell the edit button is in, but I'm not sure how to make it change the entire row to be editable (except the edit button field). I tried moving contenteditable to the tr tag level from the td tag level but it didn't fix it. I was looking at this link as an example, but I think there's something I'm missing. Here is what my code looks like:

<head>
    <title></title>
    <script type="text/javascript" src="js/jquery-1.11.0.js"></script>
    <script type="text/javascript">
        $(document).ready(function() {
            $('#btnHide').click(function() {
                //$('td:nth-child(2)').hide();
                // if your table has header(th), use this
                $('td:nth-child(3),th:nth-child(3)').hide();
            });
        });
    </script>
    <script type="text/javascript">
        $(document).ready(function(){
            $('.editbtn').click(function(){
            $(this).html($(this).html() == 'Edit' ? 'Save' : 'Edit');

            if('td[contenteditable=true]')) {
                    'td[contenteditable=false]');
            }
            else if('td[contenteditable=false]')){
                    'td[contenteditable=true]');
            }
            //else not editable row
           }); //moved this
        });
    </script>

</head>
<body>
  <table id="tableone" border="1">
    <thead>
        <tr><th class="col1">Header 1</th><th class="col2">Header 2</th><th class="col3">Header 3</th><th class="col3">Header 4</th></tr>
    </thead>
    <tr class="del">
        <td contenteditable="false">Row 0 Column 0</td> //changed to false after experiment
        <td><button class="editbtn">Edit</button></td>
        <td contenteditable="false">Row 0 Column 1</td>
        <td contenteditable="false">Row 0 Column 2</td>
    </tr>
    <tr class="del">
        <td contenteditable="false">Row 1 Column 0</td>
        <td><button class="editbtn">Edit</button></td>
        <td contenteditable="false">Row 1 Column 1</td>
        <td contenteditable="false">Row 1 Column 2</td>
    </tr>
  </table>
    <input id="btnHide" type="button" value="Hide Column 2"/>

</body>

if the cell is set to editable, change it to not editable. If it's not editable, change the cell to editable. — Michele, May 09 '14 at 19:36
Well, I tried moving the }) in the function so hopefully that's better now. I noticed my save/edit button stopped changing when clicked. Sorry about that. Like I said, I'm new to JS and JQ, so I'm probably mistaking syntax somewhere. This is my first venture with JavaScript. — Michele, May 09 '14 at 19:41

score 17 · Accepted Answer · edited Sep 24 '19 at 09:01

17

Your code with the button click is too complicated. I have reduced it by making it easier to understand.

  $(document).ready(function () {
      $('.editbtn').click(function () {
          var currentTD = $(this).parents('tr').find('td');
          if ($(this).html() == 'Edit') {                  
              $.each(currentTD, function () {
                  $(this).prop('contenteditable', true)
              });
          } else {
             $.each(currentTD, function () {
                  $(this).prop('contenteditable', false)
              });
          }

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

      });

  });

Code Explained:

1) Get all the tds within tr using below code

var currentTD = $(this).parents('tr').find('td');

2) Then as usual iterate through each tds and change its contenteditable property like below

$.each(currentTD, function () {
                      $(this).prop('contenteditable', true)
                  });

Updated JSFiddle

edited Sep 24 '19 at 09:01

p-a-o-l-o

9,807
2
22
35

answered May 09 '14 at 19:40

Praveen

55,303
33
133
164

@Michele yes it make the entire row to editable, since we are looping through all the `td` s in the row. – Praveen May 09 '14 at 19:47
1

Thank you so much!!! I'm glad you added the explanation for the code. It's an interesting language. I have a lot to learn. – Michele May 09 '14 at 19:48
1

@Michele yup definitely a lot to learn and I'm sure JS/jQuery will keep you more interested :) – Praveen May 09 '14 at 19:52
Thanks for your code.. I was in search of this. Also I would like to know how to update the mysql database table field on `save` button click?? – Aishwaryas Apr 02 '15 at 06:09
@Aishwaryas - that's a whole big/different can of worms. I suggest posting a different question. My code was for a SQL database, which would be different. I ran into the issue of needing to use send the info to a php program, which would then use GET or POST to send the data elsewhere to another php file for processing with php. I never got the table edit button and the GET/POST working at the same time. We wound up focusing on the GET/POST and dropping the table edit button for Phase I. http://stackoverflow.com/questions/24888330/how-to-submit-table-form-with-grouping-id-to-retrieve-later – Michele Apr 09 '15 at 13:58

Manoj Yadav · Answer 2 · 2016-07-26T06:24:31.383

2

Try this:

$('.editbtn').click(function() {
    var $this = $(this);
    var tds = $this.closest('tr').find('td').filter(function() {
        return $(this).find('.editbtn').length === 0;
    });
    if ($this.html() === 'Edit') {
        $this.html('Save');
        tds.prop('contenteditable', true);
    } else {
        $this.html('Edit');
        tds.prop('contenteditable', false);
    }
});

jsFiddle

edited Jul 26 '16 at 06:24

answered May 09 '14 at 19:59

Manoj Yadav

6,560
1
23
21

score 0 · Answer 3 · answered Apr 30 '17 at 22:58

Try this. I created right now. I hope this can help.

jQuery(document).ready(function() {

  $('#edit').click(function () {

      var currentTD = $(this).closest('tr');

      if ($(this).html() == 'Edit') {                  

         $(currentTD).find('.inputDisabled').prop("disabled",false);   

      } else {

         $(currentTD).find('.inputDisabled').prop("disabled",true);   

      }

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

  });

});

https://jsfiddle.net/mkqLdo34/1/

Making row editable when hit row edit button

3 Answers3

Linked