Button 및 ContentEditable 함수

Question

"편집/저장"및 "삭제"단추가 모두 포함 된 테이블이 있습니다. '수정'버튼을 클릭 할 때마다 행을 수정 가능하게 만들고 변경 사항을 저장할 수 있도록 '저장'버튼으로 변경합니다. 그러나 이렇게하면 모든 셀을 편집 할 수있게되고 첫 번째 행에서만 편집 버튼이 작동합니다. 그것은

1. 가 어떻게 편집하고 다른 편집 할 수 없습니다 행의 특정 세포를 만들 수 있습니다 ...

   내 질문은 두 개의 파트너 사 등등, 두 번째 행, 세 번째 행에 대해 작동하지 않는 이유는 무엇입니까? 첫 번째 셀 "MR_ID"를 편집 할 수 없도록하고 싶습니다.

2. 첫 번째 행 대신 여러 행에서 편집 기능을 사용하려면 어떻게해야합니까?

관련 HTML/PHP 코드 :

<?php 
    foreach ($dbh->query($sql) as $rows){ 
    ?> 
    <tr> 
     <td id="mr_id" contenteditable="false"><?php echo intval ($rows['MR_ID'])?></td> 
     <td id="mr_name" contenteditable="false"><?php echo $rows['MR_Name']?></td> 
     <td id="buyer_id" contenteditable="false"><?php echo $rows['Buyer_ID']?></td> 
     <td id="poc_n" contenteditable="false"><?php echo $rows['MR_POC_N']?></td>  
     <td id="poc_e" contenteditable="false"><?php echo $rows['MR_POC_E']?></td> 
     <td id="poc_p" contenteditable="false"><?php echo $rows['MR_POC_P']?></td> 
     <td><button id="edit" name="edit">Edit</button> 
     <button id="delRow" name="delete" onclick="deleteRow(this)">Delete</button></td> 
    </tr> 

관련 자바 스크립트 코드 :

$(document).ready(function() { 
    $('#edit').click(function() { 
     var $this = $(this); 
     var tds = $this.closest('tr').find('td').filter(function() { 
      return $(this).find('#edit').length === 0; 
     }); 
     if ($this.html() === 'Edit') { 
      $this.html('Save'); 
      tds.prop('contenteditable', true); 
     } else { 
      $this.html('Edit'); 
      tds.prop('contenteditable', false); 
     } 
    }); 
    }); 

Answer 1

는 선택의 특정 요소를 제거 할 수있는 JQuery와 .not function에서보세요.

tds에 ID를 사용하고 있기 때문에 첫 번째 행에 대한 기능 만 작동합니다. 한 페이지에 특정 ID가있는 항목이 하나만 있어야합니다. 코드를 클래스로 변경하면 코드가 작동합니다. 가장 가까운 행을 구체적으로 타겟팅하기 때문에 첫 번째 행만 가져옵니다.

당신은 당신의 코드처럼 보일 것이다 이런 일을 해결 한 후 :

var tds = $this.find('tr td').not('.mr_id').filter .... 

Answer 2

귀하의 주요 문제는 다음과 같습니다 ID는 고유해야합니다.

그래서 클래스의 ID를 변환하는 것이 좋습니다.

하지하는 방법 편집 '세포 당신은 잘하고있다 "MR_ID 필터에 추가 :.

$(this).is(':not(.mr_id)') 

을 코드 조각 :

function deleteRow(obj) { 
 
    $(obj).closest('tr').remove(); 
 
} 
 

 
$(document).ready(function() { 
 
    $('.edit').on('click', function(e) { 
 
    var $this = $(this); 
 
    var tds = $this.closest('tr').find('td').filter(function() { 
 
     return $(this).find('.edit').length === 0 && $(this).is(':not(.mr_id)'); 
 
    }); 
 
    if ($this.html() === 'Edit') { 
 
     $this.html('Save'); 
 
     tds.css('background-color', 'grey').prop('contenteditable', true); 
 
    } else { 
 
     $this.html('Edit'); 
 
     tds.css('background-color', 'white').prop('contenteditable', false); 
 
    } 
 
    }); 
 
});

table, th, td { 
 
    border: 1px solid black; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 

 
<table> 
 
    <tr> 
 
     <td class="mr_id" contenteditable="false">1111</td> 
 
     <td class="mr_name" contenteditable="false">1111</td> 
 
     <td class="buyer_id" contenteditable="false">1111</td> 
 
     <td class="poc_n" contenteditable="false">1111</td> 
 
     <td class="poc_e" contenteditable="false">111</td> 
 
     <td class="poc_p" contenteditable="false">111</td> 
 
     <td><button class="edit" name="edit">Edit</button> 
 
      <button class="delRow" name="delete" onclick="deleteRow(this)">Delete</button></td> 
 
    </tr> 
 
    <tr> 
 
     <td class="mr_id" contenteditable="false">1111</td> 
 
     <td class="mr_name" contenteditable="false">1111</td> 
 
     <td class="buyer_id" contenteditable="false">1111</td> 
 
     <td class="poc_n" contenteditable="false">1111</td> 
 
     <td class="poc_e" contenteditable="false">111</td> 
 
     <td class="poc_p" contenteditable="false">111</td> 
 
     <td><button class="edit" name="edit">Edit</button> 
 
      <button class="delRow" name="delete" onclick="deleteRow(this)">Delete</button></td> 
 
    </tr> 
 
    <tr> 
 
     <td class="mr_id" contenteditable="false">1111</td> 
 
     <td class="mr_name" contenteditable="false">1111</td> 
 
     <td class="buyer_id" contenteditable="false">1111</td> 
 
     <td class="poc_n" contenteditable="false">1111</td> 
 
     <td class="poc_e" contenteditable="false">111</td> 
 
     <td class="poc_p" contenteditable="false">111</td> 
 
     <td><button class="edit" name="edit">Edit</button> 
 
      <button class="delRow" name="delete" onclick="deleteRow(this)">Delete</button></td> 
 
    </tr> 
 
    <tr> 
 
     <td class="mr_id" contenteditable="false">1111</td> 
 
     <td class="mr_name" contenteditable="false">1111</td> 
 
     <td class="buyer_id" contenteditable="false">1111</td> 
 
     <td class="poc_n" contenteditable="false">1111</td> 
 
     <td class="poc_e" contenteditable="false">111</td> 
 
     <td class="poc_p" contenteditable="false">111</td> 
 
     <td><button class="edit" name="edit">Edit</button> 
 
      <button class="delRow" name="delete" onclick="deleteRow(this)">Delete</button></td> 
 
    </tr> 
 
</table>