JS动态创建表格(新增、删除行和单元格),动态设置属性,动态添加事件
1、inserRow()和insertCell()函数
insertRow()函数可以带参数,形式如下:
insertRow(index):index从0开始
这个函数将新行添加到index的那一行前,比如insertRow(0),是将新行添加到第一行之前。默认的insertRow()函数相当于 insertRow(-1),将新行添加到表的最后。一般我们在使用的时候都是:objTable.insertRow (objTable.rows.length).就是为表格objTable在最后新增一行。
insertCell()和insertRow的用法相同,这里就不再说了。
2、deleteRow()和deleteCell()方法
deleteRow()函数可以带参数,形式如下:
deleteRow(index):index从0开始
和上面两个方法差不多的意思,就是删除指定位置的行和单元格。要传入的参数:Index是行在表格中的位置,可以下面的方法取得然后去删除:
var row=document.getElementById("行的Id");
var index=row.rowIndex; //有这个属性,嘿嘿
objTable.deleteRow(index);
在使用过程中我碰到的一个问题跟大家说一下,就是删除表格的行的时候,如果你删除了某一行,那么表格行数是马上就变化的,所以如果你要删除表格的所有行,下面的代码是错误的:
复制内容到剪贴板代码:
function clearRow(){
objTable= document.getElementById("myTable");
for( var i=1; i<objTable.rows.length ; i++ )
{
tblObj.deleteRow(i);
}
} 这段代码要删除原来的表格的表体,有两个问题。首先不能是deleteRow(i),应该是deleteRow(1)。因为在删除表格行的时候,表格的行数在变化,这就是问题的关键,rows.length总是在变小,删除的行数总是会比预想的要少一半,所以正确的删除表格的行的代码应该这样:
复制内容到剪贴板代码:
function clearRow(){
objTable= document.getElementById("myTable");
var length= objTable.rows.length ;
for( var i=1; i<length; i++ )
{
objTable.deleteRow(i);
}
}
3、动态设置单元格与行的属性
A、采用setAttribute()方法
格式如下:setAttribute(属性,属性值)
说明:这个方法几乎所有的DOM对象都可以使用,第一个参数是属性的名称,比如说:border,第二个就是你要为border设置的值了,比如:
var objMyTable = document.getElementById("myTable");
objMyTable.setAttribute("border",1);//为表格设置边框为1
其他的比如你要为一个TD设置高度,同样先取得这个TD对象,然后使用setAttribute()方法
var objCell = document.getElementById("myCell");
objCell.setAttribute("height",24);//为单元格设置高度为24
在使用的时候遇到一个设置样式的问题,不能用setAttribute("class","inputbox2");而应该使用 setAttribute("className","inputbox2"),呵呵,其他我估计也有同样的问题,有些属性和我们在DW里面的不一致,呵呵,大家自己摸索吧。
B、直接赋值
var objMyTable = document.getElementById("myTable");
objMyTable.border=1;//为表格设置边框为1
这个方法也全部适用,呵呵。
C、复合属性
var objMyTable = document.getElementById("myTable");
objMyTable.style.cursor = "pointer";
4、创建表格
了解了行<tr>与单元格<td>的增删那就可以创建表格了。
第一步:你需要有一个你去动态变化的表格,我这里讲的是已经存在页面的表格,我们要设置一个id:myTable
var objMyTable = document.getElementById("myTable");
第二步:创建行与列的对象
var index = objMyTable.rows.length-1;
var nextRow = objMyTable.insertRow(index);//要新增的行,我这里是从倒数第二行开始新增的
//单元格箱号
var newCellCartonNo = nextRow.insertCell();
var cartonNoName = "IptCartonNo";
newCellCartonNo.innerHTML = " <input type='text' size='5' name="+cartonNoName+" id="+cartonNoName+" value=''>";
newCellCartonNo.setAttribute("className","tablerdd");
5、添加事件
A、无参数的情况
function doalter(){
alert('hi');
}
var tr = Table.insertRow();
tr.attachEvent("onclick",doalter);
或
tr.setAttribute("onclick","doalter()");
或
tr.onclick=function(){doalter();};
或
tr.onclick=doalter;
B、传参数的方法
var trMouseMove = function(obj)
{
return function()
{
obj.className='selected';
}
}
var tr = Table.insertRow();
tr.attachEvent("onmousemove",AddrSelfMouseMove(tr));
newcell = newRow.insertCell();
newcell.align = 'center';
newcell.innerHTML = '<span class="link-color">'+rowValue[0]+'</span>';
newcell.className = "text-left";
newcell.id = rowValue[1];
newcell.style.cursor = "pointer";
newcell.title = ""+rowValue[0]+"";
newcell.attachEvent("onclick",function(){modifyTvwallInfo(newcell);});
分享到:
相关推荐
利用纯javascript来实现的动态表格!!!超级实用知识点大概包括,jq、基本dom的获取、创建节点、innerHTML添加内容、js给标签创建属性、动态在表格中添加按钮。
JavaScript动态生成带删除行功能的表格 本文实例为大家分享了javascript实现动态生成表格/删除行的具体代码,供大家参考,具体内容如下 动态生成一个带删除行功能的表格: 实现思路 1、获取表格元素 2、获取要...
//设置表格属性 _table.setAttribute("border","1"); _table.setAttribute("borderColor","black"); _table.setAttribute("width","200"); //创建一行 for(var i=0;i;i++){ var _tr=_table....
本文实例讲述了JS简单实现动态添加HTML标记的方法。分享给大家供大家参考,具体如下: 一 介绍 动态添加一个HTML标记可以使用createElement()方法来实现。 CreateElement()方法可以根据一个指定的类型来创建一个HTML...
Ex4.0共2个压缩包特性,《ext js权威指南》 前 言 第1章 ext js 4开发入门 / 1 1.1 学习ext js必需的基础知识 / 1 1.2 json概述 / 3 1.2.1 认识json / 3 1.2.2 json的结构 / 3 1.2.3 json的例子 / 4 1.2.4 ...
第 1 章 JavaScript 是什么...............................................1 3 1.1 历史简述..............................................1 1.2 JavaScript 实现................................................
/js/all.js JavaScript脚本文件 /images 图片文件 第24章(/ch24) 程序描述:本章将使用Ajax技术实现无刷新即可浏览RSS的阅读器。添加一个RSS地址时,自动保存到数据库。打开阅读RSS时,自动获取...
1.本书1~21章所附代码的运行环境 操作系统:Windows 2003、... 21.3.js 使用Prototype的Try.these()创建XML DOM。 21.4.html Prototype的Form对象的使用方法。 prototype.js Prototype的.js库文件。
15.7.7 使用DOM创建表格 15.7.8 复制节点 15.7.9 删除节点 15.7.10 利用节点实现文本滚动 15.8 事件处理和DOM 15.8.1 HTML内联方式 15.8.2 脚本方法 15.8.3 DOM方法 15.8...
6.5.1 动态创建函数--一个利用Function实现Lambda算子的例子 6.5.2 模式--函数工厂及其实例 6.6 总结 第7章 对象 7.1 什么是对象 7.2 对象的属性和方法 7.2.1 对象的内置属性 7.2.2 为...
16.5.2 动态设置母版页 16.5.3 嵌套母版页 16.6 总结 第17章 网站导航 17.1 多视图页面 17.1.1 MultiView控件 17.1.2 Wizard控件 17.2 站点地图 17.2.1 定义站点地图 17.2.2 绑定站点地图 ...
javascript完全自学手册 目 录 第1篇 JavaScript基础篇 第1章 JavaScript简介 1 1.1 JavaScript概述 1 1.1.1 什么是JavaScript 1 1.1.2 JavaScript的基本特点 2 1.1.3 常用的Web开发语言 3 1.2 JavaScript的应用 4 ...
4.2.3 表单元素属性和事件 4.2.4 表单验证 4.3 Anchor与Link对象 4.3.1 Anchor对象 4.3.2 Link对象 4.4 Image对象 4.4.1 图像翻转 4.4.2 图像载入 第5章 JavaScnpt其他常用窗口对象 5.1 Window对象 ...
{12.3}创建表格}{152}{section.12.3} {12.4}关于null值}{154}{section.12.4} {12.5}操作符与实例}{154}{section.12.5} {12.5.1}where}{154}{subsection.12.5.1} {12.6}函数}{156}{section.12.6} {12.7}组函数}...
9.30 动态创建表格并实现分页 9.31 删除表格指定行 9.32 设置表格的交替行颜色 9.33 双击单元格变为可编辑 9.34 鼠标经过表格时列变色 9.35 鼠标选择表格中的多行 9.36 使用JavaScript向表格中写入数据 9.37 类C# ...
9.30 动态创建表格并实现分页 9.31 删除表格指定行 9.32 设置表格的交替行颜色 9.33 双击单元格变为可编辑 9.34 鼠标经过表格时列变色 9.35 鼠标选择表格中的多行 9.36 使用JavaScript向表格中写入数据 9.37 类C# ...
书中从JavaScript语言基础开始,分别讨论了图像、框架、浏览器窗口、表单、正则表达式、用户事件和cookie,并在上一版的基础上新增了两章,讲述jQuery框架的基础知识。本书不仅介绍了基础知识和使用方法,也深入探讨...
4.2.5 设置Style特性和其他属性 102 4.2.6 通过编程创建服务器控件 103 4.2.7 处理服务器端事件 104 4.3 Web控件 107 4.3.1 WebControl基类 107 4.3.2 基本的Web控件类 108 4.3.3 单位 109 4.3.4 ...