项目中用javascript操作DOM遇到的问题

本文介绍如何使用JavaScript实现HTML表格的隔行颜色变化效果,并解决了因注释导致的节点类型错误问题。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

调用项目中已有的js,将表格的的样式设置成间隔行显示不同的颜色。

如下图:

 

代码如下:

 

<body class="shadow_bg02" onload="initialize(document.getElementById('list_table'));">
<div class="DIVoverflow">
 <table id="list_table" border="0" cellpadding="0" cellspacing="1" width="100%" style="font-size:12px;background: #CCCCCC;">
  <!-- 如果从历史记录列表进入的话,则有返回按钮;如果是从审批历史查询界面进入的话则没有返回按钮 -->
  <c:if test="${empty goBackBtn}">
   <tr bgcolor="#FFFFFF"><td colspan="6" align ="right"><input type="button" value="返回" class="button_back" onclick="goback()"/> </td></tr>
  </c:if>
  
  <tr bgcolor="#FFFFFF">
   <td nowrap colspan="1"> <strong>名称:</strong></td><td colspan="5">${freeEval.creater_org}</td>
  </tr>
  <tr bgcolor="#FFFFFF">
   <td nowrap> <strong>AAA:</strong></td>
   <td colspan="5"> ${freeEval.managerOrganization }</td>
  </tr>
  <tr bgcolor="#FFFFFF">
   <td nowrap > <strong>BB:</strong></td>
   <td colspan="5"> ${freeEval.corpname }</td>
  </tr>
  <tr bgcolor="#FFFFFF">
   <td nowrap> <strong>CC:</strong></td>
   <td colspan="5"> ${freeEval.accountType }</td>
  </tr>
 </table>
 </form>
</div>
</body>


initialize方法如下:

function initialize(tableElement) {
 if(tableElement){
     for(var i = 1; i<tableElement.childNodes[0].childNodes.length; i++){
      if (i%2 == 0) {
       tableElement.childNodes[0].childNodes[i].bgColor = "#f7f7f7";
      } else {
       tableElement.childNodes[0].childNodes[i].bgColor = "#ffffff";
      }
     }
 }
}


 

没有得到想要出现的结果。

最后经检验alert(tableElement.childNodes[0].nodeType);发现弹出nodeType为8,通过查找文档知道Node是注释类型。

所以原因是:多了一行注释引起的结果。把<!-- 如果从历史记录列表进入的话,则有返回按钮;如果是从审批历史查询界面进入的话则没有返回按钮 -->去掉就成功了。

同时,tableElement.childNodes[0]代表的是table下面第一个tbody。

2012-05-28 增加备注:tableElement.childNodes[0]代表的是table下面的第一个节点,也就是说如果表格设置了<thead><tbody><tfoot>的话,则就是<thead><tbody><tfoot>三个中最前面的那个。如果表格没有设置<thead><tbody><tfoot>的话,则默认的把表格的内容放入<tbody>中,也就是tableElement.childNodes[0]代表table下面第一个tbody。

中设置的

记录下,希望以后不犯错了。

 

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值