1

这是我的代码。我已经尝试了我能想到的一切。我尝试过只使用 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>
4

3 回答 3

0

有点像杰森的，但我花了时间所以我要发布它。;)

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>

（我仍然喜欢表格中单元格的宽度属性；它可以移动到 CSS 中，但这是我的例外之一，标记和表示可能有一点重叠。将其他所有内容移动到 CSS。你的里程可能各不相同。）

CSS：

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

JavaScript：

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。;) 我知道并不是每个人都在编写完美的 JavaScript（见鬼，我的也不完美）。但是您确实需要了解 CSS 和类的一般用途，才能为 Web 编写良好的可维护标记和演示文稿！我希望这听起来不会太居高临下。这不是故意的。

于 2013-05-08T20:16:53.307 回答
0

您不能将 getElementById 与类一起使用。此外，您不需要“。” 或 '#' 在 javascript 中使用这些方法时。下面应该做你所要求的。虽然如果只有 1 类“rightone”和“leftone”项目，您应该使用 ID。

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';
}

一个更优雅的解决方案是：

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 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';
    }
}
于 2013-05-08T19:43:21.700 回答
0

通过使用 :empty 选择器。

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/

于 2013-05-08T20:44:13.993 回答