JQuery로 테이블의 셀을 읽기 전용으로 만들기

사용자는이 행을 편집 할 수 있으며이 행의 모든 셀에 데이터가 채워지면 해당 행은 테이블의 나머지 행과 마찬가지로 읽기 전용이됩니다. 결국 행을 삭제 한 후에 다른 행은 정상적으로 움직이지 않고 아래로 움직여야합니다. JQuery로 테이블의 셀을 읽기 전용으로 만들기

출처

2014-11-22 blueberry

"* 사용자는이를 편집 할 수있는이 같은 뭔가를 시도했다 행 * "- 어떤 행? "* ... 행은 읽기 전용이됩니다 (테이블의 나머지 행과 같습니다) *"- 테이블에'readonly '로 간주 될 수있는 행이 없습니다. 문제를 다시 설명해 주시겠습니까? 정확하게, 환경 설정. –

$('input[type=text]').blur(function(){ 
    parentTr = $(this).parent().parent(); 
    var canBeReadOnly = true; 
    $(parentTr).find('input').each(function(){ 
     if($(this).val().length == 0) 
     { 
      canBeReadOnly = false; 
     } 
    }) ; 

    if(canBeReadOnly) 
    { 
     $(parentTr).find('input').each(function(){ 
      $(this).prop('disabled', true); 
     }); 
    } 
});

그리고 하나 개의 행을 숨기는

$(document).ready(function() 
 
    { 
 
    $(document).on("click", "input", function(){ 
 
     $("tr").each(function(){ 
 
      var readOnly = true; 
 
      $(".cell td").each(function(){ 
 
       if($("input").val()){ 
 
        rd = false; 
 
       } 
 
      }); 
 
      if(readOny){ 
 
       $(".cell td").each(function(){ 
 
        $("input").prop("readonly",true); 
 
       }); 
 
      } 
 
     }); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<body> 
 
    <table> 
 
     <tr class="prototype"> 
 
      <td class="special"><button type="button" class="delete">Delete</button></td> 
 
      <div class="cell"> 
 
       <td><input type="text" value></td> 
 
       <td><input type="text" value></td> 
 
       <td><input type="text" value></td> 
 
       <td><input type="text" value></td> 
 
       <td><input type="text" value></td> 
 
      </div> 
 
      <td class="special"><button type="button" class="add">Add</button></td> 
 
     </tr> 
 
     <tr class="row"> 
 
      <td class="special"><button type="button" class="delete">Delete</button></td> 
 
      <div class="cell"> 
 
       <td><input type="text" value="aaa"></td> 
 
       <td><input type="text" value="aaa"></td> 
 
       <td><input type="text" value="aaa"></td> 
 
       <td><input type="text" value="aaa"></td> 
 
       <td><input type="text" value="aaa"></td> 
 
      </div> 
 
      <td class="special"><button type="button" class="add">Add</button></td> 
 
     </tr> 
 
     <tr class="row"> 
 
      <td class="special"><button type="button" class="delete">Delete</button></td> 
 
      <div class="cell"> 
 
       <td><input type="text" value="bbb"></td> 
 
       <td><input type="text" value="bbb"></td> 
 
       <td><input type="text" value="bbb"></td> 
 
       <td><input type="text" value="bbb"></td> 
 
       <td><input type="text" value="bbb"></td> 
 
      </div> 
 
      <td class="special"><button type="button" class="add">Add</button></td> 
 
     </tr> 
 
     <tr class="row"> 
 
      <td class="special"><button type="button" class="delete">Delete</button></td> 
 
      <div class="cell"> 
 
       <td><input type="text" value="ccc"></td> 
 
       <td><input type="text" value="ccc"></td> 
 
       <td><input type="text" value="ccc"></td> 
 
       <td><input type="text" value="ccc"></td> 
 
       <td><input type="text" value="ccc"></td> 
 
      </div>   
 
      <td class="special"><button type="button" class="add">Add</button></td> 
 
     </tr> 
 
     <tr class="row"> 
 
      <td class="special"><button type="button" class="delete">Delete</button></td> 
 
      <div class="cell"> 
 
       <td><input type="text" value="ddd"></td> 
 
       <td><input type="text" value="ddd"></td> 
 
       <td><input type="text" value="ddd"></td> 
 
       <td><input type="text" value="ddd"></td> 
 
       <td><input type="text" value="ddd"></td> 
 
      </div> 
 
      <td class="special"><button type="button" class="add">Add</button></td> 
 
     </tr> 
 
     <tr class="row"> 
 
      <td class="special"><button type="button" class="delete">Delete</button></td> 
 
      <div class="cell"> 
 
       <td><input type="text" value="eee"></td> 
 
       <td><input type="text" value="eee"></td> 
 
       <td><input type="text" value="eee"></td> 
 
       <td><input type="text" value="eee"></td> 
 
       <td><input type="text" value="eee"></td> 
 
      </div> 
 
      <td class="special"><button type="button" class="add">Add</button></td> 
 
     </tr> 
 
    </table>

이 aftet 삭제를 클릭 :

는

$('.delete').click(function(){ 
    $(this).parent().parent().slideUp('slow'); 
});

출처

2014-11-22 21:06:43

나는 이것을 시도했지만 여전히 작동하지 않습니다. – blueberry

왜 그런 말을 할 수 있습니까? 검사관을 통해 코드를 추적하고 구멍을 찾을 수 있습니까? 논리가 정확하기 때문에 문제가 있다면 심각한 것은 아닐 것입니다. –

@blueberry 위의 코드를 다시 확인하고 편집하고 테스트하십시오. 그것은 작동해야합니다;) –

JQuery로 테이블의 셀을 읽기 전용으로 만들기

답변

관련 문제