javascript - Making row editable when hit row edit button

Question

Welcome To Ask or Share your Answers For Others

javascript - Making row editable when hit row edit button

posted Oct 17, 2021 in Technique[技术] by 深蓝 (71.8m points)

javascript - Making row editable when hit row edit button

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>

See Question&Answers more detail:os

与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…

1 Reply

深蓝 · Answer 1 · 2021-10-17T00:50:08+0000

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

Categories

javascript - Making row editable when hit row edit button

javascript - Making row editable when hit row edit button

Please log in or register to add a comment.

Please log in or register to reply this article.

1 Reply

Please log in or register to add a comment.

Just Browsing Browsing

Most popular tags