心无痕的博客

常用链接

统计

积分与排名

JAVA技术文档

JAVA精典网站

开发工具

数据库

最新评论

关于用javascript动态生成表格的注意点...

有时为了动态生成页面内容, 我们会用到javascript来这么处理, 但有时用javascript动态生成页面信息时,会有错误却查不到信息,现以用javascript动态生成表格为例, 说明如下(以下代码可以直接拷贝下来,存为html格式的文件执行):

<html>
<head>
 <script language='javascript'>
  function addNode() {
   
   // 第一部分代码
   
   var vDiv = document.getElementById('1'); // 注意:此处是取的不包含在<table>内的<div>标签
   var vTable = document.createElement('table');
   var tbody = document.createElement("tbody");
   var vTr = document.createElement('tr');
   var vTd = document.createElement('td');
   var vText = document.createTextNode('这是第一部分代码');
   vTd.appendChild(vText); // 或: vTd.innerText='这是第一部分代码';
   vTr.appendChild(vTd);
   tbody.appendChild(vTr);
   vTable.appendChild(tbody);
   vDiv.appendChild(vTable);
   
   
   
   // 第二部分代码
   /*
   var vDiv = document.getElementById('2'); // 注意:此处是取的<table>标签
   //var obj = document.createElement("table");
      var tbody = document.createElement("tbody");
   var tr = document.createElement("tr");
   var td = document.createElement("td");
   td.innerText = "这是第二部分代码";
   tr.appendChild(td);
   tbody.appendChild(tr);
   //obj.appendChild(tbody);
   vDiv.appendChild(tbody); // 注意: 此处vDiv即为<table>标签, 故只需要在这个标签上添加<tbody>标签
          //   同样,如果本段代码取<tbody>标签,
          // 即:var vDiv = document.getElementById('4');
          // 那么,我们只需用vDiv.appendChild(tr);即可实现同样的效果。
   */
   
   /*
   // 第三部分代码
   var vDiv = document.getElementById('8'); // 注意:此处是取的包含在<tbody>标签(id为6)内的<div>标签
   //var obj = document.createElement("table");
      //var tbody = document.createElement("tbody");
   var tr = document.createElement("tr");
   var td = document.createElement("td");
   td.innerText="这是第三部分代码";
   tr.appendChild(td);
   //tbody.appendChild(tr);
   //obj.appendChild(tbody);
   vDiv.appendChild(tr); // 通过此处,向id为8的<div>添加标签<tr>是错误的;因为,<div>与<tr>不是父子关系
   
   // 这是错误的代码: vDiv.innerHtml="<table><tr><td>test</td></tr></table>";
   */

  }
 </script>
</head>
<body>

 <!-- 总结: 动态生成页面表格 -->
 <!--    1: 在页面中本身就没有<table>标签时, 必须创建<table>、<tbody>、<tr>、<td>这四个标签,并且缺一不可; -->
 <!--   参见:“第一部分代码” -->
 <!--    2: 在页面中本身存在<table>标签时, 依据上边四个标签必须有的原则:在页面中有的标签我们直接取 -->
 <!--   最内层的标签, 然后把缺的标签补上即可;参见:“第二部分代码” -->
 <!--    3: 对于没有父子关系的标签,如ID为8的标签(即:div标签)与tr标签就没有父子关系。-->
 <!--   此时,就不能直接添加tbody标签到div标签内部. 参见:“第三部分代码”。-->

 <!-- 此处仅有div标签 -->
 <div id='1'>
    
 </div>

 <!-- 此处仅有table标签 -->
 <table id='2'>
  
 </table>

 <!-- 此处有table、tbody二种标签 -->
 <table id='3'>
  <tbody id='4'>

  </tbody>
 </table>

 <table id='5'>
  <tbody id='6'>
   <tr id=7>
    
   </tr>
   <div id='8'>
    
   </div>
  </tbody>
 </table>
</body>
<html>

<script language='javascript'>
 addNode();
</script>

posted on 2009-03-18 23:11 心无痕 阅读(942) 评论(0)  编辑  收藏 所属分类: JAVA


只有注册用户登录后才能发表评论。


网站导航: