JavaScript 学习笔记(十三)Dom创建表格


Posted in Javascript onJanuary 21, 2010

Dom基础—创建表格
利用js来动态创建表格有两种格式,appendChild()和insertRow、insertCell()。但第一种有可能在IE上有问题,所以推荐使用第二种。
1、insertRow(index):index从0开始
这个函数将新行添加到index的那一行前,比如insertRow(0),是将新行添加到第一行之前。默认的insertRow()函数相当于 insertRow(-1),将新行添加到表的最后。一般我们在使用的时候都是:
objTable.insertRow (objTable.rows.length)就是为表格objTable在最后新增一行。
insertCell()和insertRow的用法相同。
2、deleteRow(index):index从0开始
删除指定位置的行,要传入的参数:Index是行在表格中的位置,可以下面的方法取得然后去删除:
var row = document.getElementById("行的Id");
var index = row.rowIndex; //有这个属性
objTable.deleteRow(index);
在使用过程中,删除表格的行的时候,如果删除了某一行,那么表格行数是马上就变化的,rows.length总是在变小,所以如果你要删除表格的所有行:

function removeAllRow() { 
var objTable = document.getElementById("myTable"); 
var length = objTable.rows.length; 
for (var i = 1; i < length; i++) { 
objTable.deleteRow(i); 
} 
}

3、setAttribute()方法,动态设置单元格与行的属性
格式如下:setAttribute(属性,属性值)
var objMyTable = document.getElementById("myTable");
objMyTable.setAttribute("border", 1); //为表格设置边框为1
在使用的时候遇到一个设置样式的问题,不能用
setAttribute("class","inputbox1");而应该使用
setAttribute("className","inputbox1"),
4、创建表格
了解了行<tr>与单元格<td>的增删那就可以创建表格了。
第一步:你需要有一个你去动态变化的表格,这里讲的是已经存在页面的表格,我们设置一个id:myTable

var objMyTable = document.getElementById("myTable");
第二步:创建行与列的对象

var index = objMyTable.rows.length; 
var nextRow = objMyTable.insertRow(index); //在最后的行 
//var nextRow = objMyTable.insertRow(0); //在最前的行

下面是示例代码
<script type="text/javascript"> 
var Count = false; //控制交替换行 
var NO = 1; //行号 
function addRow() { 
Count = !Count; 
//添加一行 
var newTr = table.insertRow(table.rows.length); //在最后新增一行 
//var newTr = table.insertRow(0); //在最前面新增一行 
//添加两列 
var newTd0 = newTr.insertCell(); 
var newTd1 = newTr.insertCell(); 
var newTd2 = newTr.insertCell(); 
//设置列内容和属性 
if (Count) { 
newTr.style.background = "#FFE1FF"; 
} 
else { 
newTr.style.background = "#FFEFD5"; 
} 
NO++; 
newTd0.innerHTML = '<input type=checkbox id="box' + NO + '" />'; 
newTd1.innerText = "第" + NO + "行"; 
newTd2.innerHTML = '<input type="text" id="Text' + NO + '" />'; 
} 
</script> 
<body> 
<form id="form1" runat="server"> 
<input type="button" value="插入行" onclick="addRow()" /> 
<table width="399" border="0" cellspacing="1" id="table" style="font-size: 14px;"> 
<tr bgcolor="#FFEFD5"> 
<td width="6%"> 
<input type="checkbox" id="box1" /> 
</td> 
<td> 
第1行 
</td> 
<td> 
<input id="Text1" type="text" /> 
</td> 
</tr> 
</table> 
</form> 
</body>
Javascript 相关文章推荐
JavaScript 一道字符串分解的题目
Aug 03 Javascript
ejs v9 javascript模板系统
Mar 21 Javascript
JS操作图片(增,删,改) 例子
Apr 17 Javascript
JS去掉第一个字符和最后一个字符的实现代码
Feb 20 Javascript
2014年50个程序员最适用的免费JQuery插件
Dec 15 Javascript
JS把内容动态插入到DIV的实现方法
Jul 19 Javascript
addeventlistener监听scroll跟touch(实例讲解)
Aug 04 Javascript
bootstrap table服务端实现分页效果
Aug 10 Javascript
iview实现select tree树形下拉框的示例代码
Dec 21 Javascript
node链接mongodb数据库的方法详解【阿里云服务器环境ubuntu】
Mar 07 Javascript
vue基于better-scroll实现左右联动滑动页面
Jun 30 Javascript
解决vue scoped scss 无效的问题
Sep 04 Javascript
JavaScript 学习笔记(十二) dom
Jan 21 #Javascript
javascript parseInt与Number函数的区别
Jan 21 #Javascript
js parsefloat parseint 转换函数
Jan 21 #Javascript
jquery 防止表单重复提交代码
Jan 21 #Javascript
javascript 哈希表(hashtable)的简单实现
Jan 20 #Javascript
JS 对象介绍
Jan 20 #Javascript
JavaScript 学习笔记(十一)
Jan 19 #Javascript
You might like
Notice: Undefined index: page in E:\PHP\test.php on line 14
2010/11/02 PHP
php报表之jpgraph柱状图实例代码
2011/08/22 PHP
PHP读取word文档的方法分析【基于COM组件】
2017/08/01 PHP
php layui实现前端多图上传实例
2019/07/30 PHP
关于laravel5.5的定时任务详解(demo)
2019/10/23 PHP
Laravel 手动开关 Eloquent 修改器的操作方法
2019/12/30 PHP
让图片旋转任意角度及JQuery插件使用介绍
2013/03/20 Javascript
使用 js+正则表达式为关键词添加链接
2014/11/11 Javascript
深入解析JavaScript中的数字对象与字符串对象
2015/10/21 Javascript
javascript给span标签赋值的方法
2015/11/26 Javascript
jQuery动画效果相关方法实例分析
2015/12/31 Javascript
echarts饼图扇区添加点击事件的实例
2017/10/16 Javascript
JavaScript异步加载问题总结
2018/02/17 Javascript
使用ThinkJs搭建微信中控服务的实现方法
2019/08/08 Javascript
node.js中fs文件系统模块的使用方法实例详解
2020/02/13 Javascript
详解JSON.stringify()的5个秘密特性
2020/05/26 Javascript
javascript实现前端成语点击验证优化
2020/06/24 Javascript
基于wxpython实现的windows GUI程序实例
2015/05/30 Python
在windows下快速搭建web.py开发框架方法
2016/04/22 Python
快速入手Python字符编码
2016/08/03 Python
Python搭建HTTP服务器和FTP服务器
2017/03/09 Python
对numpy Array [: ,] 的取值方法详解
2018/07/02 Python
Python连接Redis的基本配置方法
2018/09/13 Python
python3 线性回归验证方法
2019/07/09 Python
wxpython绘制音频效果
2019/11/18 Python
python GUI库图形界面开发之PyQt5信号与槽的高级使用技巧装饰器信号与槽详细使用方法与实例
2020/03/06 Python
专门出售各种儿童读物的网站:Put Me In The Story
2016/08/07 全球购物
信息系统专业个人求职信范文
2013/12/07 职场文书
结婚喜宴家长答谢词
2014/01/15 职场文书
表彰先进的通报
2014/01/31 职场文书
企业授权委托书范本
2014/09/22 职场文书
自我查摆剖析材料
2014/10/11 职场文书
关于学习的决心书
2015/02/05 职场文书
会议营销主持词
2015/07/03 职场文书
面试分析分布式架构Redis热点key大Value解决方案
2022/03/13 Redis
JS实现页面炫酷的时钟特效示例
2022/08/14 Javascript