JS控制div里内容有内容显示没内容隐藏

Question

本帖最后由 u012335455 于 2013-12-09 15:59:56 编辑

Answer 1

本帖最后由 showbo 于 2013-12-09 16:08:39 编辑

  

Answer 2

在加载页面是判断一下，干嘛用js来进行隐藏呢我也不知道你这是什么语言，就举个简单的例子吧<tr { if(content('content_key')=="") $display="none";) }style="display: { print $display }" id="dd4">
      <td style="padding-bottom: 10px; padding-left: 0px; padding-right: 0px; color: #434242; padding-top: 0px" colspan="2">
      {print content('content_key')/}
      </td>
</tr>首先判断content('content_key')是否有内容，如果内容为空，则变量$display为'none',否则为'block'

Answer 3

为什么判断的时候是tds[i].getAttribute('colspan') == '2' 写错了吧

Answer 4

噢  确实有这个colspan') == '2' 但是没有生效哦..

Answer 5

你的内容部分不都放在 colospan=2的td中，你不判断那么一行中有2个td，一个有内容一个没有就会隐藏起来了

Answer 6

<table>
<tbody>
        <tr>
            <td height="40" colspan="2"><img alt="" width="94" height="24" src="{path template/}/images/ov.jpg"></td>
        </tr>
        <tr>
            <td style="color: #434242" valign="top" colspan="2">
            {print content('content')/}
            </td>
        </tr>
        <tr>
            <td height="40" valign="middle" width="0%"></td>
            <td width="100%" align="left" valign="middle"><a style="color: #15a8bf; cursor: pointer" onclick="ShowV(1)"><img src="{path template/}/images/dianj.gif" width="94" height="24" /></a></td>
        </tr>
        <tr style="display: none" id="dd1">
            <td style="padding-bottom: 10px; padding-left: 0px; padding-right: 0px; color: #434242; padding-top: 0px" colspan="2">
            <table style="border-bottom: medium none; border-left: medium none; border-collapse: collapse; border-top: medium none; border-right: medium none; mso-border-alt: solid windowtext .5pt; mso-yfti-tbllook: 480; mso-padding-alt: 0cm 5.4pt 0cm 5.4pt; mso-border-insideh: .5pt solid windowtext; mso-border-insidev: .5pt solid windowtext" class="MsoNormalTable" border="1" cellspacing="0" cellpadding="0">
                {print content('source')/}
            </table>
            </td>
        </tr>
        <tr>
            <td height="40" valign="middle"></td>
            <td valign="middle"><a style="color: #15a8bf; cursor: pointer" onclick="ShowV(2)"><img src="{path template/}/images/dianj1.gif" width="94" height="24" /></a></td>
        </tr>
        <tr style="display: none" id="dd2">
            <td style="padding-bottom: 10px; padding-left: 0px; padding-right: 0px; color: #434242; padding-top: 0px" colspan="2">
           {print content('author')/}
            </td>
        </tr>
          <tr>
            <td height="40" valign="middle"></td>
            <td valign="middle"><a style="color: #15a8bf; cursor: pointer" onclick="ShowV(3)"><img src="{path template/}/images/dianj1.gif" width="94" height="24" /></a></td>
        </tr>
        <tr style="display: none" id="dd3">
            <td style="padding-bottom: 10px; padding-left: 0px; padding-right: 0px; color: #434242; padding-top: 0px" colspan="2">
           {print content('small_title')/}
            </td>
        </tr>
          <tr>
            <td height="40" valign="middle"></td>
            <td valign="middle"><a style="color: #15a8bf; cursor: pointer" onclick="ShowV(4)"><img src="{path template/}/images/dianj1.gif" width="94" height="24" /></a></td>
        </tr>
        <tr style="display: none" id="dd4">
            <td style="padding-bottom: 10px; padding-left: 0px; padding-right: 0px; color: #434242; padding-top: 0px" colspan="2">
           {print content('content_key')/}
            </td>
        </tr>
        
    </tbody>
</table>
<script>
function ShowV(v)
{
try{
if(document.getElementById("dd"+v).style.display=="none")
{
document.getElementById("dd"+v).style.display="block";
try{document.getElementById("dd"+v).style.display="";
document.getElementById("dd"+v).style.display="table-row";
}catch(e){}
}
else
{
document.getElementById("dd"+v).style.display="none";
}
}catch(e){}
}
</script>完整代码如上,这个js功能是这样的td里面有张图片,点击下面的td就会把内容展示出来, 我们的产品有些没有某些参数,所以td里面图片还是显示在页面上非常不友好,所以我们要有参数这个产品和这个参数图显示 ,没有则隐藏包括这张图.附效果图.第一个图不生效

Answer 7

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<table id="tbPro">
    <tbody>
        <tr>
            <td height="40" colspan="2"><img alt="content" width="94" height="24" src="{path template/}/images/ov.jpg"></td>
        </tr>
        <tr>
            <td style="color: #434242" valign="top" colspan="2">
            {print content('content')/}
            </td>
        </tr>
        <tr>
            <td height="40" valign="middle" width="0%"></td>
            <td width="100%" align="left" valign="middle"><a style="color: #15a8bf; cursor: pointer" onclick="ShowV(1)"><img alt="source" src="{path template/}/images/dianj.gif" width="94" height="24" /></a></td>
        </tr>
        <tr style="display: none" id="dd1">
            <td style="padding-bottom: 10px; padding-left: 0px; padding-right: 0px; color: #434242; padding-top: 0px" colspan="2">
            <table style="border-bottom: medium none; border-left: medium none; border-collapse: collapse; border-top: medium none; border-right: medium none; mso-border-alt: solid windowtext .5pt; mso-yfti-tbllook: 480; mso-padding-alt: 0cm 5.4pt 0cm 5.4pt; mso-border-insideh: .5pt solid windowtext; mso-border-insidev: .5pt solid windowtext" class="MsoNormalTable" border="1" cellspacing="0" cellpadding="0">
                <!--{print content('source')/}--><!--这里注释掉你的内容测试用的，实际操作注意取消注释和这里的说明内容--->
            </table>
            </td>
        </tr>
        <tr>
            <td height="40" valign="middle"></td>
            <td valign="middle"><a style="color: #15a8bf; cursor: pointer" onclick="ShowV(2)"><img alt="author" src="{path template/}/images/dianj1.gif" width="94" height="24" /></a></td>
        </tr>
        <tr style="display: none" id="dd2">
            <td style="padding-bottom: 10px; padding-left: 0px; padding-right: 0px; color: #434242; padding-top: 0px" colspan="2">
           {print content('author')/}
            </td>
        </tr>
          <tr>
            <td height="40" valign="middle"></td>
            <td valign="middle"><a style="color: #15a8bf; cursor: pointer" onclick="ShowV(3)"><img alt="title" src="{path template/}/images/dianj1.gif" width="94" height="24" /></a></td>
        </tr>
        <tr style="display: none" id="dd3">
            <td style="padding-bottom: 10px; padding-left: 0px; padding-right: 0px; color: #434242; padding-top: 0px" colspan="2">
           {print content('small_title')/}
            </td>
        </tr>
          <tr>
            <td height="40" valign="middle"></td>
            <td valign="middle"><a style="color: #15a8bf; cursor: pointer" onclick="ShowV(4)"><img alt="key" src="{path template/}/images/dianj1.gif" width="94" height="24" /></a></td>
        </tr>
        <tr style="display: none" id="dd4">
            <td style="padding-bottom: 10px; padding-left: 0px; padding-right: 0px; color: #434242; padding-top: 0px" colspan="2">
           {print content('content_key')/}
            </td>
        </tr>
         
    </tbody>
</table>
<script>
    window.onload = function () {
        var tb = document.getElementById('tbPro'), r1, r2, text;
        for (var i = 0, j = tb.rows.length; i < j; i += 2) {
            r1 = tb.rows[i];
            r2 = tb.rows[i + 1];
            //移除内容显示部分的所有HTML代码和空白内容，注意内容一定要包含文本内容，不能全部是图片，要不替换后也会为空导致被隐藏起来
            text = r2.cells[0].innerHTML.replace(/<[^>]+>/g, '').replace(/\s/g, ''); 
            if (text == '') r1.style.display = r2.style.display = 'none';//内容为空则隐藏图片和内容行
        }
    }
    function ShowV(v) {
        try {
            if (document.getElementById("dd" + v).style.display == "none") {
                document.getElementById("dd" + v).style.display = "block";
                try {
                    document.getElementById("dd" + v).style.display = "";
                    document.getElementById("dd" + v).style.display = "table-row";
                } catch (e) { }
            }
            else {
                document.getElementById("dd" + v).style.display = "none";
            }
        } catch (e) { }
    }
</script>