`

动态创建TABLE

    博客分类：
  • AJAX
AjaxJavaScriptXML浏览器Web 
阅读更多

            才学AJAX就被他创建动态TABLE搞糊涂了，他的例子一个函数一个函数的，我没看懂然后就自己研究，找了点DOM的资料，查了相关函数的用法，于是我也会动态创建TABLE。
           我发现利用insertBefore()函数不能完成动态创建表的功能，但是其他动态创建WEB元素他可以很好的实现。而且在动态创建表的时候不能直接创建TABLE，必须是动态创建TBODY，然后把TBODY加到TABLE中才能达到目标。
下面是我的代码
          原谅我不怎么习惯JAVAEYE的代码显示，总有些标签显示不对, 只有用XML显示才没问题

xml 代码
  1.   <html>  
  2.   <head>  
  3.      
  4.   <script language=JavaScript>  
  5.      
  6. function creatTable()   
  7. {   
  8. //用createElement函数创建tbody,tr,td,textNode元素   
  9. //关于各元素的意义不在此描述   
  10.     
  11.   var tbody= document.createElement("tbody");   
  12.   var row=document.createElement("tr");   
  13.   var cell=document.createElement("td");   
  14.   var textNode=document.createTextNode("test");   
  15.  //可用于理解textNode   
  16.  //alert(textNode.length); 这里是test的长度4   
  17.  //alert(textNode.toString());当然就是test了   
  18.     
  19.  //因为各元素都是节点与子节点的关系所以用appendChild()函数将各节点连接起来   
  20.   cell.appendChild(textNode);   
  21.   row.appendChild(cell);   
  22.   tbody.appendChild(row);   
  23.   
  24. //现在可以将创建好的TBODY元素加入指定ID的table中了   
  25. document.getElementById("ww").appendChild(tbody);   
  26.  }   
  27.   </script>  
  28.    </head>  
  29.   
  30. <body>  
  31.   
  32. <input type="button" value="Search" onclick="creatTable();"/>  
  33.   
  34. <table id="ww" width="75%" height="10%" border="2">  
  35.   
  36. <tbody id="resultsBody">  
  37. <tr><td>I AM FIRST ROW</td></tr>  
  38. </tbody>  
  39.   
  40. </table>  
  41. </body>  
  42. </html>  

 

分享到：
| 把你的郁闷带走(转)
评论
1 楼 tusury 2008-02-24  
用insertCell 和 insertRow
浏览器兼容性比较好
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    js动态创建Table

    在Web开发中，动态创建Table是一种常见的需求，特别是在数据展示或者用户交互时。本文将深入探讨如何利用纯JavaScript实现动态表格，并涵盖相关的重要知识点。 首先，我们讨论基础的DOM（Document Object Model）...

    asp.net动态创建table并赋值

    asp.net动态创建table并赋值dt.Columns.Add...

    js的节点操作动态创建table表格，创建行，删除行.pdf

    JavaScript 动态创建 Table 表格和节点操作 根据提供的文件信息，我们可以总结出以下知识点： 1. 节点操作 在 HTML 文档中，所有内容都是节点，包括文档节点、元素节点、文本节点、属性节点和注释节点。节点操作...

    js动态创建table点击按钮dom table tr添加操作

    本主题主要聚焦于如何利用JavaScript动态创建一个包含表格（table）的DOM结构，并且在表格行（tr）中添加可点击的按钮。这通常用于展示数据集，允许用户进行交互操作，比如删除、编辑或查看详情。 首先，我们需要...

    动态创建Table.TR。Td

    动态创建一个表格。动态创建一个表格。动态创建一个表格。

    JavaScript如何动态创建table表格

    本文将详细介绍两种JavaScript动态创建table表格的方法。 方法一：最原始的方法，通过`createElement()`函数逐个创建元素。这种方法需要手动构建表格的结构，包括`&lt;table&gt;`、`&lt;tbody&gt;`、`&lt;tr&gt;`和`&lt;td&gt;`等元素。例如...

    JS动态创建Table,Tr,Td并赋值的具体实现

    本文档重点介绍了JavaScript语言实现动态创建HTML表格（Table）、表格行（Tr）和表格单元格（Td）的具体方法，并对它们进行赋值的过程。以下是根据所提供的文件内容提炼出的知识点： 1. 动态创建和修改表格结构 ...

    动态创建HtmlTable的问题

    动态创建HtmlTable的问题

    js创建table表格

    在JavaScript中，可以使用DOM操作来动态创建这些元素。以下是一些关键步骤： 1. **创建表格元素**： ```javascript var table = document.createElement('table'); ``` 2. **创建表格行和单元格**： ```...

    Android 点按钮添加TableRow源码.zip

    - 在这个案例中，开发者并没有在XML布局文件中预定义所有行，而是通过代码动态创建TableRow和其内的按钮。这样可以实现根据用户交互或程序逻辑灵活地添加和移除元素。 4. **OnClickListener**： - 点击按钮的事件...

    mybatis动态创建数据库表

    在“mybatis动态创建数据库表”这个主题中，我们将深入探讨如何利用MyBatis实现数据库表的动态创建、数据插入以及数据修改。 一、动态创建数据库表 MyBatis本身并不直接支持动态创建数据库表，但可以通过结合Spring...

    动态创建库/表

    在某些情况下，我们可能需要在运行时根据特定需求动态创建数据库或表，例如在自动化测试、数据处理脚本或者灵活的数据存储解决方案中。标题“动态创建库/表”所涵盖的知识点主要涉及到如何在不确定数据库数量或表...

    JS弹出基于Table的可关闭浮动层.rar

    1. 创建Table元素：使用JavaScript动态创建Table、Tr（行）、Td（单元格）元素，并设置相应的样式，如宽度、高度、背景色等，以达到浮动层的效果。 2. 添加关闭按钮：在Table中插入一个按钮元素，作为关闭浮动层的...

    Python-动态创建一个模型的多个tablename并通过DjangoORM操作

    本篇将深入探讨如何在Django中动态创建多个模型的表名，并利用ORM进行操作。 首先，让我们理解Django的ORM工作原理。Django的ORM允许我们将Python类映射到数据库中的表，类的实例则对应于表中的行。默认情况下，...

    jQuery ajax动态生成table功能示例

    本文实例讲述了jQuery ajax动态生成table的方法。分享给大家供大家参考，具体如下： $(function(){ ajaxT(); }); function ajaxT(){ $.ajax({ type:"POST", ...//动态的创建一个table function c

    MFC中动态创建控件

    ### MFC中动态创建控件 #### 一、创建动态控件 在MFC中，动态控件是在程序运行过程中根据需要动态创建的控件，与预设在对话框资源中的静态控件不同。动态控件更加灵活，可以根据用户的操作或者特定条件来决定是否...

    android 利用TableLayout自动生成表格

    在Java代码中，可以动态创建TableRow和TextView，并添加到TableLayout中： ```java TableLayout tableLayout = findViewById(R.id.table_layout); for (int i = 0; i ; i++) { TableRow row = new TableRow(this);...

    动态创建数据库和表详解

    在VB编程中，动态创建数据库和表是一种提高程序灵活性和适应性的重要技巧。当用户需要根据自己的需求自定义数据库结构时，这种功能尤其有用。在VB中，我们可以使用ActiveX Data Objects (ADO) 和其扩展 ADOX ...

    birt api动态创建表格

    本话题主要关注如何利用BIRT API动态创建表格，这是一个在数据可视化和业务智能应用中常见的需求。 在给定的资源中，我们有三个关键文件：`CreateTable.java`、`BirtEngine.java`和`createTable.jsp`。这些文件分别...

Magicbox
Global site tag (gtag.js) - Google Analytics