히트 행 편집 버튼을 눌렀을 때 행 편집 가능

jQuery와 JavaScript를 처음 사용했습니다. 내 테이블에서 편집 버튼을 클릭하여 전체 행을 편집 가능하게하려고합니다. 어떤 이유로 그것은 작동하지 않습니다. 편집 버튼이있는 셀만보고있는 것 같지만 전체 행을 편집 가능한 것으로 변경하는 방법을 모르겠습니다 (편집 버튼 필드 제외). td 태그 수준에서 tr 태그 수준으로 contenteditable 이동 시도했지만 그것을 수정하지 않았습니다. 예를 들어 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 if를 따르지 않습니다. – 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) 각 td의를 통해 보통으로 반복 그런 다음 아래 코드

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

)를 사용하여 TR 내의 모든 TDS를 확인하고 변경의 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

히트 행 편집 버튼을 눌렀을 때 행 편집 가능

답변

관련 문제