Javascript에서 다른 div의 값이 비어 있으면 div를 표시하지 않도록하려면 어떻게해야합니까?

Question

내 코드는 다음과 같습니다. 나는 내가 생각할 수있는 모든 것을 시도했다. 나 div ID를 사용하여 시도하고 지금 클래스를 시도했다. 아무것도 작동하는 것 같습니다. 나는 옆에 엔트리가 없다면 넘버 2가 보이지 않기를 바랄 뿐이다. 그것이 테이블에 있는지 여부는 중요하지 않습니다.

감사합니다.

<style type="text/css"> 
<!-- 
.leftone { 
    float: left; 
    height: auto; 
    width: auto; 
} 
.rightone { 
    float: left; 
    height: auto; 
    width: auto; 
} 
.lefttwo { 
    float: left; 
    height: auto; 
    width: auto; 
} 
.righttwo { 
    float: left; 
    height: auto; 
    width: auto; 
} 
--> 
</style> 


<table width="400" border="0" cellpadding="0" cellspacing="3" id="tableONE"> 
    <tr> 
     <td width="200" height="50"><div class="leftone">1.)</div></td> 
     <td width="200" height="50"><div class="rightone">The Number One</div></td> 
    </tr> 
    <tr> 
     <td width="200" height="50"><div class="lefttwo">2.)</div></td> 
     <td width="200" height="50"><div class="righttwo"></div></td> 
    </tr> 
</table> 

<p>&nbsp;</p> 

<script type="text/javascript"> 
<!-- 
function shownumbers() { 
    var myNum1 = '[.rightone]'; 
    if(myNum1 != ''){ 
     document.getElementById('.leftone').style.display = "block"; 
    } 
    else if(myNum1 == ''){ 
     document.getElementById('.leftone').style.display = "none"; 
    } 
    var myNum2 = '[.righttwo]'; 
    if(myNum2 != ''){ 
     document.getElementById('.lefttwo').style.display = "block"; 
    } 
    else if(myNum2 == ''){ 
     document.getElementById('.lefttwo').style.display = "none"; 
    } 
} 
//--> 
</script> 

Answer 1

클래스에는 getElementById를 사용할 수 없습니다. 또한 '필요 없습니다.' 또는 '#'자바 스크립트에서 이러한 메서드를 사용할 때. 아래는 당신이 요구하는 것을해야합니다. class 'rightone'과 'leftone'클래스 중 오직 하나의 아이템 만 있다면 ID를 사용해야합니다.

HTML :

<table width="400" border="0" cellpadding="0" cellspacing="3" id="tableONE"> 
    <tr> 
     <td><div class="left">1.)</div></td> 
     <td><div class="right">The Number One</div></td> 
    </tr> 
    <tr> 
     <td><div class="left">2.)</div></td> 
     <td><div class="right"></div></td> 
    </tr> 
</table> 

JS :

var myNum1 = document.getElementsByClassName('rightone')[0].innerHTML; 
if(myNum1 != ''){ 
    document.getElementsByClassName('leftone')[0].style.display = 'block'; 
} else if(myNum1 == ''){ 
    document.getElementsByClassName('leftone')[0].style.display = 'none'; 
} 

더 우아한 해결책이 될 것 제이슨의에 일종의 유사

var right = document.getElementsByClassName('right'); 

for(var i=0;i<right.length;i++){ 
    if(!right[i].innerHTML){ 
     right[i].parentNode.parentNode.getElementsByClassName('left')[0].style.display = 'none'; 
    } else { 
     right[i].parentNode.parentNode.getElementsByClassName('left')[0].style.display = 'right'; 
    } 
} 

Answer 2

,하지만 난 I'mma를하도록 시간을 보냈다 그것을 게시하십시오. ;)

JSFiddle : http://jsfiddle.net/H3UNH/1/

HTML :

<table id="tableONE"> 
    <tr> 
     <td width=50>1.)</td> 
     <td >The Number One</td> 
    </tr> 
    <tr> 
     <td>2.)</td> 
     <td></td> 
    </tr> 
</table> 

(I 테이블에서 셀의 폭 속성처럼 아직도, 그것은 CSS로 이동할 수 있지만 나를 위해 그 예외 중 하나입니다 . 어디 마크 업 및 프리젠 테이션은 중복의 작은 비트를 CSS로 다른 모든 이동 할 수 있습니다 귀하의 마일리지가 다를 수 있음)

CSS :..

td { padding: 3px; text-align:left; height: 50px;} 

자바 스크립트 :

function shownumbers() { 
    var rows = document.getElementsByTagName('tr'); 
    for(var i=0,len=rows.length;i<len;i++) { 
     var _this = rows[i]; 
     var rowCells = _this.getElementsByTagName('td'); 
     if(rowCells[1].innerHTML == "") { 
      _this.style.display = "none"; 
     } 
    } 
} 

shownumbers(); 

(데모의 목적을 위해, 난 그냥 개별적으로 전화 shownumbers. 자동으로 원하면 자체 호출하십시오. 그렇지 않으면 어디서든지 불러라.)

더 중요한 교훈은 실제로 JavaScript가 아니라고 생각한다. ;) 나는 모든 사람이 완벽한 자바 스크립트를 작성하지는 않는다는 것을 이해한다. 그러나 웹에 대한 유지 보수가 용이 한 마크 업과 프리젠 테이션을 작성하려면 CSS와 클래스의 목적을 이해해야합니다. 나는 그것이 너무 겸손하게 들리거나 아무것도 들리지 않기를 바랍니다. 그럴 의도가 아니 었습니다.

Answer 3

: 빈 선택자를 사용합니다.

var els = document.querySelectorAll('td div:empty'), 
    i = els.length, 
    el; 

for(;i--;) { 
    el = els[i]; 

    do { 
     el = el.parentNode; 
    } while (el.nodeName != 'TR') 

    el.style.display = 'none'; 
} 

바이올린 : http://jsfiddle.net/uAUt8/