<html>
<head>
<title>实例代码 - 使用JavaScript和DOM创建HTML表格</title>
<script>
function start() {
//获取body标签
var mybody = document.getElementsByTagName("body")[0];
// 创建一个<table>元素和一个<tbody>元素
table1 = document.createElement("table");
mytablebody = document.createElement("tbody");
//创建所有的单元格
myArray = new Array('this','is','a','test');
for(var j = 0; j <4; j++) {
// 创建一个<tr>元素
mycurrent_row = document.createElement("tr");
for(var i = 0; i <4; i++) {
// 创建一个<td>元素--列
mycurrent_cell = document.createElement("td");
//创建一个文本节点
if(j==0){
currenttext = document.createTextNode(myArray[i]);
}else if(i==0){
currenttext = document.createTextNode(myArray[j]);
}else {currenttext = document.createTextNode();
}
mycurrent_cell.appendChild(currenttext);
// 将列<td>添加到行<tr>
mycurrent_row.appendChild(mycurrent_cell);
}
// 将行<tr>添加到<tbody>
mytablebody.appendChild(mycurrent_row);
}
// 将<tbody>添加到<table>
table1.appendChild(mytablebody);
//将<table>添加到<body>
mybody.appendChild(table1);
table1.setAttribute("border", "2");
table1.setAttribute("cellspacing", "3");
table1.setAttribute("cellpadding", "2");
}
</script>
</head>
<body onload="start()">
</body>
</html>
使用JavaScript和DOM创建HTML表格
时间： 2024-11-16 14:59:06
使用JavaScript和DOM创建HTML表格的相关文章
javascript入门教程：Dom创建删除表格
<html> <head> <title>javascript入门教程:Dom创建删除表格</title> </head> <body> <div id="tableTest"> </div> </body> </html> <script language="JavaScript" type="text/javascript&qu
JavaScript如何动态创建table表格_javascript技巧
两种JavaScript动态创建table表格的方法,分享给大家,具体实现如下 方法一:最原始的方法,创建一一元素 var a1=document.createElement("table"); var a2=document.createElement("tbody"); var a3=document.createElement("tr"); var a4=document.createElement("td"); //开
JavaScript与DOM组合动态创建表格实例_基础知识
简介 这篇文章简单介绍了DOM 1.0一些基本而强大的方法以及如何在JavaScript中使用它们.你可以学到如何动态地创建.获取.控制和删除HTML元素.这些DOM方法同样适用于XML.所有全面支持DOM 1.0的浏览器都能很好地运行本篇的实例,比如IE5,Firefox等.概况 - Sample1.html 这篇文章通过实例代码介绍DOM.请从尝试下面的HTML例子开始.它使用DOM 1的方法由JavaScript动态创建一个HTML表格.它创建一个由四个包含文本内容的单元格组成的小表格.单
【JavaScript】DOM操作表格
DOM操作表格 1.利用JavaScript动态增加.删除表格内容 页面如图 注:首先说个小问题,有些如制定按钮点击事件的js代码,放在html文档最后可以,放在最前面(<head>标签内)不可以,原因是html文档是自上往下读取,当读到最上面的js.代码时,并没有读取相应的DOM标签,所以制定的按钮功能没有效果,如果非要放在上面,可以指定到window.onload方法中去: <head> <span style="white-space:pre">
javascript实现dom动态创建省市纵向列表菜单的方法
本文实例讲述了javascript实现dom动态创建省市纵向列表菜单的方法.分享给大家供大家参考.具体实现方法如下: ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 6
javascript实现dom动态创建省市纵向列表菜单的方法_javascript技巧
本文实例讲述了javascript实现dom动态创建省市纵向列表菜单的方法.分享给大家供大家参考.具体实现方法如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtm
基于JavaScript实现动态创建表格和增加表格行数_javascript技巧
在工作,项目需求中,有时候表格的行数不能够满足我们的需求,这时需要我们动态的增加表格的行数,下面小编通过一段代码实例给大家介绍js创建表格和增加表格的行数的方法,并且还实现了隔行变色功能.对此感兴趣的朋友可以参考一下代码: js代码如下所示: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>动态操作表格</title> </head>
整理JavaScript对DOM中各种类型的元素的常用操作_基础知识
节点类型nodeType以下是一些重要的nodeType的取值: 1: 元素element 2: 属性attr 3: 文本text 8: 注释comments 9: 文档document nodeName,nodeValue 节点关系childNodes: 每个节点都有一个childNodes属性,其中保存着一个NodeList对象 firstChild: 等同于childNodes[0] lastChild: 等同于childNodes.length-1 同时通过使用列表中每个节点的previ
你所不了解的javascript操作DOM的细节知识点(一)
这篇文章主要介绍了你所不了解的javascript操作DOM的细节知识点的相关资料,需要的朋友可以参考下 一:Node类型 DOM1级定义了一个Node接口,该接口是由DOM中的所有节点类型实现.每个节点都有一个nodeType属性,用于表明节点的类型,节点类型在Node类型中有以下几种: Node.ELEMENT_NODE(1); 元素节点 Node.ATTRIBUTE_NODE(2); 属性节点 Node.TEXT_NODE(3); 文本节点 Node.DOCUMENT_NODE(9); 文