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实现页面内关键词高亮显示代码
Apr 03 Javascript
Validform表单验证总结篇
Oct 31 Javascript
基于slideout.js实现移动端侧边栏滑动特效
Nov 28 Javascript
JS实现的RGB网页颜色在线取色器完整实例
Dec 21 Javascript
H5手机端多文件上传预览插件
Apr 21 Javascript
Vue实战之vue登录验证的实现代码
Oct 31 Javascript
在 webpack 中使用 ECharts的实例详解
Feb 05 Javascript
JavaScript中this的全面解析及常见实例
May 14 Javascript
Node.js系列之连接DB的方法(3)
Aug 30 Javascript
jQuery实现轮播图效果
Nov 26 jQuery
js实现双色球效果
Aug 02 Javascript
toString.call()通用的判断数据类型方法示例
Aug 28 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
德生PL330测评
2021/03/02 无线电
PHP strtok()函数的优点分析
2010/03/02 PHP
初次接触php抽象工厂模式(Elgg)
2010/03/21 PHP
php中用socket模拟http中post或者get提交数据的示例代码
2013/08/08 PHP
destoon在360浏览器下出现用户被强行注销的解决方法
2014/06/26 PHP
php递归函数三种实现方法及如何实现数字累加
2015/08/07 PHP
PHP7标量类型declare用法实例分析
2016/09/26 PHP
php登录超时检测功能实例详解
2017/03/21 PHP
基于Codeigniter框架实现的student信息系统站点动态发布功能详解
2017/03/23 PHP
AJAX的使用方法详解
2017/04/29 PHP
JavaScript 对象成员的可见性说明
2009/10/16 Javascript
JavaScript常用对象的方法和属性小结
2012/01/24 Javascript
多种方法判断Javascript对象是否存在
2013/09/22 Javascript
解析Javascript中难以理解的11个问题
2013/12/09 Javascript
页面内容排序插件jSort使用方法
2015/10/10 Javascript
详解jQuery向动态生成的内容添加事件响应jQuery live()方法
2015/11/02 Javascript
基于Bootstrap的后台管理面板 Bootstrap Metro Dashboard
2016/06/17 Javascript
jQuery-mobile事件监听与用法详解
2016/11/23 Javascript
原生javascript实现文件异步上传的实例讲解
2017/10/26 Javascript
解决layui弹出层layer的area过大被遮挡的问题
2019/09/21 Javascript
vue中使用带隐藏文本信息的图片、图片水印的方法
2020/04/24 Javascript
js实现简单的无缝轮播效果
2020/09/05 Javascript
使用vant的地域控件追加全部选项
2020/11/03 Javascript
[03:49]显微镜下的DOTA2第十五期—VG登基之路完美团
2014/06/24 DOTA
Python对excel文档的操作方法详解
2018/12/10 Python
Python操作配置文件ini的三种方法讲解
2019/02/22 Python
Python将列表数据写入文件(txt, csv,excel)
2019/04/03 Python
非常漂亮的CSS3百叶窗焦点图动画
2016/02/24 HTML / CSS
CSS3让登陆面板3D旋转起来
2016/05/03 HTML / CSS
项目合作计划书
2014/01/09 职场文书
运动会演讲稿
2014/05/07 职场文书
争先创优演讲稿
2014/09/15 职场文书
汽车转让协议书
2015/01/29 职场文书
共青团员自我评价
2015/03/10 职场文书
法律进社区活动总结
2015/05/07 职场文书
小学信息技术教学反思
2016/02/16 职场文书