JS控制div里内容有内容显示没内容隐藏
本帖最后由 u012335455 于 2013-12-09 15:59:56 编辑
<table>
<tbody>
<tr>
<td height="40" colspan="2"><img alt="JS控制div里内容有内容展示没内容隐藏" 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 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="JS控制div里内容有内容展示没内容隐藏" 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="JS控制div里内容有内容展示没内容隐藏" 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="JS控制div里内容有内容展示没内容隐藏" 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="JS控制div里内容有内容展示没内容隐藏" 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="JS控制div里内容有内容展示没内容隐藏" 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>
