All geek questions in one place

Creating a line for editing by pressing the line edit button

I am new to jQuery and JavaScript. I am trying to click on the "Edit" button in my table and make the entire row editable. For some reason this does not work. I think that this is only viewing the cell where the edit button is located, but I'm not sure how to make it change the entire line to be edited (except for the edit button field). I tried moving content-suitable content to the level of three tags from the td tag level, but it did not fix it. I looked at this link as an example, but I think something is missing there. This 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>
+4
3

. , .

  $(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')

      });

  });

:

1) tds tr,

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

2) , , td contenteditable,

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

JSFiddle

+15

:

$('.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

+2

Try it. I created now. Hope this helps.

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/

0
source

Source: https://habr.com/ru/post/1539969/

More articles:


All Articles