製作行可編輯當點擊行編輯按鈕

我是新來的jQuery和JavaScript。我試圖點擊我的表格中的編輯按鈕，並使整行可編輯。由於某種原因，它無法正常工作。我認爲它只是查看編輯按鈕所在的單元格，但我不確定如何將整行更改爲可編輯（編輯按鈕字段除外）。我嘗試從td標籤級別將contenteditable移動到tr標籤級別，但它沒有解決它。我以this link爲例，但我認爲我錯過了一些東西。這裏是我的代碼的樣子：製作行可編輯當點擊行編輯按鈕

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

來源

2014-05-09 Michele

我不關注你if/else如果塊試圖做什麼。 – j08691

如果單元格設置爲可編輯，請將其更改爲不可編輯。如果它不可編輯，請將單元格更改爲可編輯。 – Michele

但語法沒有意義。 – j08691

你用代碼點擊按鈕太複雜。我通過簡化它來減少它。

$(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）用下面的代碼

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

2）然後如常迭代獲取TR內的所有的TDS通過每個td S和改變其contenteditable屬性如下

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

Updated JSFiddle

來源

2014-05-09 19:40:06 Praveen

這樣可以將整行更改爲可編輯？ – Michele

@Michele是的，它使整行都可編輯，因爲我們循環了行中的所有'td'。 – Praveen

非常感謝你！我很高興你爲代碼添加了解釋。這是一種有趣的語言。我有很多要學習的。 – Michele

試試這個：

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

來源

2014-05-09 19:59:10

您的jsFiddle鏈接不工作 – Moes

jsFiddle鏈接已更新 –

試試這個。我現在創建。我希望這可以幫助。

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/

來源

2017-04-30 22:58:07

製作行可編輯當點擊行編輯按鈕

回答

相關問題