jQuery를 사용하여 기준에 따라 테이블 행을 표시 할 수 없습니다.

데이터베이스에서 채워지는 HTML 테이블 (id="tblID")이 있습니다. 행의 데이터 속성은 status이며 "Y" 또는 "N" 일 수 있으며 "Y" 행만 페이지로드시 표시됩니다. 어딘가에 $(document).ready()에서이 호출이있다 : 페이지로드의 활성 행을 표시하도록되어 어느 showRowsByStatus에 "Y"를 전달하여 다음과 같은 경우 선택하지 않은jQuery를 사용하여 기준에 따라 테이블 행을 표시 할 수 없습니다.

이

$("#tblID tr").each(function() { 
    showRowsByStatus("Y", $(this)); 
});

또한 비활성 행을 표시합니다 확인 Show Inactive Rows와이 체크 박스입니다 활성 행이 표시됩니다.

이 showRowsByStatus 방법의 정의입니다

$("#chkBox").change(function() { 
    if (this.checked) { 
     $("#tblID tr").each(function() { 
      showRowsByStatus("N", $(this)); 
     }); 
    } 
    else { 
     $("#tblID tr").each(function() { 
      showRowsByStatus("Y", $(this)); 
     }); 
    } 
});

지금 직면하고있는 문제는, 페이지로드 활성 행이 전혀 표시되지 않는있다

function showRowsByStatus(activeStatus, tr) { 
    if (tr.data("status") == activeStatus && tr.data("status") != undefined) { 
     tr.show(); 
    } 
    if (tr.data("status") != activeStatus && tr.data("status") != undefined) { 
     tr.hide(); 
    } 
}

,하지만 난 체크 박스 Show Inactive Rows를 전환 할 때, 예상대로 행이 표시됩니다.

showRowsByStatus 방법에는 무엇이 누락 되었습니까?

또한 페이지가로드 될 때 style="display:none"이 모든 행에 추가되는 것을 발견했습니다. 프로젝트의 모든 위치를 확인한 결과이 스타일을이 행에 설정하는 항목을 찾을 수 없습니다. 나는 숨기기를 위해 .css("display","none !important")을 시도했고 보여주기 위해 .css("display","block !important")을 시도했지만 도움이되지 않았습니다. 그래서 showRowsByStatus 메서드를 수정해야한다고 생각합니다.

출처

2013-07-26 Animesh

모든 행에 대한 상태는 "N"과 같습니다. Fiddle을 확인하거나 제공하십시오. –

당신은 데이터 속성이'status'라고 불리우지 만'role'이라는 속성을 검사하고 있습니다 - 맞습니까? – Orbling

위 코드를 수정했습니다. 올바른 변수는'status'입니다. – Animesh

이 코드는 잘 동작하고 jQuery 코드는 변경되지 않았습니다. HTML 코드와 관련이있을 수 있습니다. 당신이 거기에 그것을 시도 할 수 있습니다 : http://seo035.com/test/

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<title>Test Inactive Row</title> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.1/jquery.min.js"></script> 
</head> 
<body> 
<script> 
$(document).ready(function(){ 
    $("#tblID tr").each(function() { 
     showRowsByStatus("Y", $(this)); 
    }); 

    $("#chkBox").change(function() { 
     if (this.checked) { 
      $("#tblID tr").each(function() { 
       showRowsByStatus("N", $(this)); 
      }); 
     } 
     else { 
      $("#tblID tr").each(function() { 
       showRowsByStatus("Y", $(this)); 
      }); 
     } 
    });  
}) 

function showRowsByStatus(activeStatus, tr) { 
    if (tr.data("status") == activeStatus && tr.data("status") != undefined) { 
     tr.show(); 
    } 
    if (tr.data("status") != activeStatus && tr.data("status") != undefined) { 
     tr.hide(); 
    } 
} 

</script> 
<table id="tblID"> 
<tr data-status="Y"><td>Row Y</td></tr> 
<tr data-status="N"><td>Row N</td></tr> 
</table> 
<form> 
<input id="chkBox" type="checkbox" name="chkBox" value=""> 
</form> 
</body> 
</html>

출처

2013-07-26 15:47:38

Fabien, 나를 확인해 주셔서 감사 드리며 잘 작동하는지 확인해주십시오. 이것은 내가 다른 것들을 보게하고, 아이템이 사라질 수있는 원인을 발견했다. – Animesh

jQuery를 사용하여 기준에 따라 테이블 행을 표시 할 수 없습니다.

답변

관련 문제