在按行編輯按鈕時使行可編輯

Question

我是jQuery和JavaScript的新手。 我正在嘗試單擊表格中的“編輯”按鈕，使整行可編輯。 由於某種原因，它不起作用。 我認為它只是查看編輯按鈕所在的單元格，但我不知道如何讓它將整行更改為可編輯（編輯按鈕字段除外）。 我嘗試從td標簽級別移動contenteditable到tr標簽級別，但它沒有修復它。 我正在看這個鏈接作為一個例子，但我認為有些東西我不見了。 這是我的代碼的樣子：

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

Answer 1

單擊按鈕的代碼太復雜了。 我通過讓它太容易理解來減少它。

  $(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）使用以下代碼獲取tr中的所有tds

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

2）然后像往常一樣遍歷每個td並改變其contenteditable屬性，如下所示

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

更新了JSFiddle

Answer 2

嘗試這個：

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

Answer 3

嘗試這個。 我現在創造了。 我希望這可以提供幫助。

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/

在按行編輯按鈕時使行可編輯

問題描述

3 個解決方案

解決方案1
15 已采納 2014-05-09 19:40:06

解決方案2
2 2014-05-09 19:59:10

解決方案3
0 2017-04-30 22:58:07

在按行編輯按鈕時使行可編輯

問題描述

3 個解決方案

解決方案1 15 已采納 2014-05-09 19:40:06

解決方案2 2 2014-05-09 19:59:10

解決方案3 0 2017-04-30 22:58:07

解決方案1
15 已采納 2014-05-09 19:40:06

解決方案2
2 2014-05-09 19:59:10

解決方案3
0 2017-04-30 22:58:07