js动态创建表格方法

 1 window.onload = function(){
 2             var table = document.createElement(‘table‘);
 3             table.border = 1;
 4             table.width = ‘100%‘;
 5             var tbody = document.createElement(‘tbody‘);
 6             table.appendChild(tbody);
 7  //主角登场了 insertRow; 作用是向指定位置插入一行 rows返回表格的所有行 cells返回表格所有单元格 insertCell与insertRow一样 只不过它是向指定位置插入一个单元格。
 8
 9             tbody.insertRow(0);//创建一行
10             tbody.rows[0].insertCell(0);//创建第一行 第一个单元格
11             tbody.rows[0].cells[0].appendChild(document.createTextNode(‘1,1‘));//给单元格添加文本
12             tbody.rows[0].insertCell(1);//创建第一行 第二个单元格
13             tbody.rows[0].cells[1].appendChild(document.createTextNode(‘1,2‘));
14             tbody.insertRow(1);
15             tbody.rows[1].insertCell(0);//创建第二行 第一个单元格
16             tbody.rows[1].cells[0].appendChild(document.createTextNode(‘2,1‘));
17             tbody.rows[1].insertCell(1);//创建创建第二行 第二个单元格
18             tbody.rows[1].cells[1].appendChild(document.createTextNode(‘2,2‘));
19             tbody.rows[1].insertCell(2);
20             tbody.rows[1].cells[2].appendChild(document.createTextNode(‘2,3‘));
21             document.body.appendChild(table);
22         }

有不对的地方 请大家指正

时间: 2024-12-29 05:43:11

js动态创建表格方法的相关文章

js动态创建表格------Day59

刚刚不知道怎么回事,CSDN博客一直打不开,就在博客园完成了今天的记录,结果临关机,登录了下,发现又好了,就再多花个几分钟转下吧,也不管究竟在意的是什么了,权当强迫症了... 前几天记录了动态的添加一行一列:insertRow()和insertCell();动态的删除一行一列:deleteRow()和deleteCell():选中一行:this的参数传递,这些都是实现的关键,但是这一切都建立在一个基础上:那就是存在一个表格.今天就来记录下动态建立表格的方法: 事实上在刚开始的时候,我只想到了一个

js动态创建及移除div的方法

本文实例讲述了js动态创建及移除div的方法.分享给大家供大家参考.具体实现方法如下: ? 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 //创建div function createDiv(){  if(document.getElementByIdx_x("newD")!=null)   document.body.removeChild(document.getElementByIdx_x(&q

javascript动态创建表格:新增、删除行和列

转载:http://www.cnblogs.com/pato/archive/2009/09/02/1559068.html 利用js来动态创建表格有两种格式,appendChild()和insertRow.insertCell().两种方式其实差不多,但第一种有可能在IE上有问题,所以推荐大家使用第二种了,直接说吧. 1.inserRow()和insertCell()函数 insertRow()函数可以带参数,形式如下: insertRow(index):index从0开始 这个函数将新行添加

第84天:jQuery动态创建表格

jQuery动态创建表格 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>动态创建表格</title> 6 <script src="jquery-1.11.1.js"></script> 7 <style> 8 table {

FineUIMvc随笔 - 动态创建表格列

声明:FineUIMvc(基础版)是免费软件,本系列文章适用于基础版. 用户需求 用户希望实现动态创建表格列,在 WebForms 中,我们通过在 Page_Init 中创建列来实现: 但是在 MVC 中,如果还想着 WebForms 的那一套,想着怎么才能在 Controller 中访问 View 中的表格控件,这是行不通的. 我曾写过一个系列文章<ASP.NET MVC快速入门(MVC5+EF6)>,开篇就讲到了 MVC 中的页面的生成流程: 这个页面之所以能够呈现在我们眼前,经历了三个主

JSTL根据后台传输list大小动态创建表格

最近,项目中需要写一个根据后台传入List类型对象的大小来动态创建表格,并在JSP页面中将信息显示出来,并且对于一些特殊信息颜色飘红表示. 首先看一下List对象存储的内容,这个项目需要检测系统中一些服务器的连接情况,每个应用可能关联多个服务器,服务器的数量不同,所以使用List来存储信息,List中的对象是一个长度为2的String数组.这个String数组的第一个位置存放需要检测服务器的ip:port,第二个位置存放是检测结果,结果又两种,连接成功!和连接失败! 例如下面一个String数组

javascript如何实现动态创建表格和增加表格的行

javascript如何实现动态创建表格和增加表格的行:在实际应用中,表格的行数不一定都是符合实际要求的,可能需要动态的增加表格的行数,下面就是一段实现此功能的代码实例,并且还实现了隔行变色功能.有需要的朋友可以自行分析一下代码,非常的简单,代码实例如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>动态操作表格</title> </

用JS动态创建登录表单,报了个小错误

后来发现原来是: dvObj.style.border='#Red 1px sold'; 其中的Red多谢了一个‘#’, 但是奇怪的是在chrome和firefox都备有报错,但是在ie中报错了. 各位仁兄美眉们一定要小心了额. 下面是这段js动态创建登录框的js代码: 1 onload = function () { 2 var dvObj = document.createElement('div'); 3 dvObj.style.border = 'Red 1px solid'; 4 dv

JS动态生成表格后 合并单元格

JS动态生成表格后 合并单元格 最近做项目碰到表格中的单元格合并的问题,需求是这样的,首先发ajax请求 请求回来后的数据 动态生成表格数据,但是生成后如果编号或者(根据其他的内容)有相同时,要合并单元格操作,在做之前也试着google下,但是网上没有碰到这方面的需求,所以自己写了一个简单的.用文字描述需求太费劲了,如下图所示: 1. 没有合并之前的图如下: 2. 合并之后的图如下: 如上所示:是根据相邻的编号相同 进行单元格合并. 先看看实现后的效果再聊吧! JSfiddle链接地址如下: 点