`
zhuge
  • 浏览: 41077 次
  • 性别: Icon_minigender_1
  • 来自: 杭州
社区版块
存档分类
最新评论

javascript动态创建表格

阅读更多
javascript创建表格.
本以为很简单的可以做一个,

但在做的时候  , 还是遇到了点小问题,  总结下。

<meta http-equiv="Content-Type" content="text/html; charset=gbk" />

<TABLE id="cssrain" style="border:1px solid #000;width:200px;" >
<tr><td>姓名</td><td colspan="2" align="center">地址</td></tr>
</TABLE>

<input type="button" onclick="addRow()" value="add" />

<script>
function addRow(){
var table = document.getElementById("cssrain");
  if(table)
  {
   var tr_new = document.createElement("tr");
  if(tr_new)
  {
   //创建第一列
   var td_customer = document.createElement("td");
   td_customer.align="center";
   td_customer.width="19%" ;  
   td_customer.innerHTML="aaa";
   if(td_customer){ tr_new.appendChild(td_customer); }

   //创建第二列
   var td_panyment = document.createElement("td");
   td_panyment.align="center";
   td_panyment.colSpan="2"; //注意这里是大写 colSpan 而不是colspan
   td_panyment.innerHTML="bbb";
   if(td_panyment){tr_new.appendChild(td_panyment);}

            var tbody = document.createElement("TBODY");//这一步 不能少
            tbody.appendChild(tr_new);//这一步 不能少

            table.appendChild(tbody);
  }else{
            alert("行不存在");
  }
  }else{
          alert("表格不存在");
  }
}
</script>
<!--


总结1:
表格属性的问题:
colSpan="2";    // 使用colSpan 而不是colspan
同理:
使用 cellSpacing 而不是 cellspacing
使用 cellPadding 而不是 cellpadding


总结2:
在IE里不允许将tr直接附加到table里,
而要先将tr附加到tbody中,
然后再将tbody附加到table下。
FireFox中不存在这个问题。

分享到:
评论

相关推荐

    Javascript动态创建表格

    Javascript动态创建表格 兼容google浏览器、360,ie等浏览器,很实用

    老裴帮助关于Javascript动态创建表格的小练习

    标题中的“老裴帮助关于Javascript动态创建表格的小练习”指的是一个使用JavaScript编程语言来动态创建HTML表格的学习资源或教程。JavaScript是一种广泛应用于客户端Web开发的脚本语言,它允许开发者在用户与网页...

    javascript下动态创建表格的三种方式

    ### JavaScript 下动态创建表格的三种方式 在网页开发过程中,经常需要通过JavaScript来动态地创建或更新HTML元素,其中就包括表格(`&lt;table&gt;`)。本文将详细介绍在JavaScript中动态创建表格的三种常见方法,并对每...

    javascript 动态创建表格:新增、删除行和单元格.zip

    总结来说,这个压缩包提供的知识涵盖了JavaScript动态创建和操作HTML表格的基本技巧,对于想要提升网页交互性的开发者尤其有用。通过学习和实践这些方法,你可以创建出更具活力和用户友好的网页应用。

    javascript动态创建表格.doc

    在JavaScript中动态创建表格是一项常见的任务,特别是在网页交互和数据展示中。本文将深入探讨如何利用JavaScript的`insertRow()`和`insertCell()`方法来添加行和单元格,以及如何使用`deleteRow()`和`deleteCell()`...

    javascript 动态创建表格

    JavaScript动态创建表格是一项基础且实用的Web开发技能,它允许开发者在客户端使用JavaScript编程语言根据需要动态生成表格元素。这在处理动态数据集、创建用户交互式界面以及动态修改网页结构时尤其有用。 在本文...

    动态创建表格

    javaScript动态创建表格

    javascript_动态创建表格

    总结来说,使用JavaScript动态创建和管理表格是一种非常实用且强大的功能,可以帮助开发者根据用户的需求实时调整表格结构。通过上述方法的介绍,你可以更灵活地控制表格的显示效果,提高用户体验。

    JavaScript动态添加删除表格行

    在HTML中,`&lt;table&gt;`元素用于创建表格,而动态操作表格行通常涉及到DOM(Document Object Model)的操作。JavaScript提供了对DOM的访问和修改能力,让我们能够动态地添加、删除或修改表格元素。 1. **添加表格行**...

    js读取json数据动态生成列数不固定的表格

    我们可以利用`document.createElement()`、`.appendChild()`等方法动态创建这些元素。 4. **数据驱动视图**:根据JSON数据的结构,我们需要遍历数据,为每一项生成对应的表格行。如果列数不固定,我们需要在开始...

    使用JavaScript和DOM动态创建表格

    使用JavaScript和DOM动态创建表格

    Javascript动态创建表格及删除行列的方法

    本文实例讲述了Javascript动态创建表格及删除行列的方法。分享给大家供大家参考。具体实现方法如下: &lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ...

    js-dynamicCreationTable:使用javascript动态创建表格

    js-dynamicCreationTable使用javascript动态创建表格&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;meta name="viewport" content="width=device-width, initial-scale=...

    用jsf页面动态创建表格

    本文介绍了如何在JSF页面中使用JavaScript动态创建表格,并提供了详细的示例代码。通过这种方式,可以根据用户的操作实时更新表格内容,极大地提高了Web应用的灵活性和可用性。此外,还讨论了如何添加更复杂的表单...

    javascript动态创建表格及添加数据实例详解

    在了解动态创建表格及添加数据的过程中,首先我们要了解的是JavaScript的基础语法和DOM操作。JavaScript是一种动态的脚本语言,能够对网页上的元素进行动态的操作和修改。而DOM(文档对象模型)是一个跨平台和语言的...

    javascript动态操作表格

    总的来说,JavaScript动态操作表格涉及创建、删除、选择和更新表格元素,这些都需要对DOM有深入理解。在实际应用中,还要考虑浏览器兼容性,特别是对于较旧的浏览器,如IE6和早期的Firefox版本。通过合理使用...

    js生成动态表格并为每个单元格添加单击事件的方法

    本文所探讨的方法主要涉及使用JavaScript动态创建表格,并为表格中的每一个单元格添加点击事件处理函数,实现点击单元格时能够弹出单元格内容并改变单元格背景颜色的效果。下面详细地对标题、描述和给出的部分内容...

Global site tag (gtag.js) - Google Analytics