JS动态创建表格(新增、删除行和单元格),动态设置属性,动态添加事件
2009年07月24日 星期五 11:02
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));
相关推荐
利用纯javascript来实现的动态表格!!!超级实用知识点大概包括,jq、基本dom的获取、创建节点、innerHTML添加内容、js给标签创建属性、动态在表格中添加按钮。
//设置表格属性 _table.setAttribute("border","1"); _table.setAttribute("borderColor","black"); _table.setAttribute("width","200"); //创建一行 for(var i=0;i;i++){ var _tr=_table....
找到您的家庭辅助配置目录(例如~/.homeassistant/ ),然后更改为~/.homeassistant/www (如果需要,请创建) 运行$ wget https://raw.githubusercontent.com/custom-cards/flex-table-card/master/flex-...
想要了解bootstrapTable的朋友可以移步JS组件系列——表格组件神器:bootstrap table。 一、x-editable组件介绍 x-editable组件是一个用于创建可编辑弹出框的插件,它支持三种风格的样式:bootstrap、Jquery UI、...
为Akeneo产品添加新的属性类型Table。 •••• 主要特征 提供一个表格作为属性类型,您可以在其中定义一组不同类型和验证规则的列。 列类型 文本 数字(整数或十进制) 简单选择 从URL轻松选择 进出口 该扩展支持...
这是chm格式,下载后看不了...HTML作者可以从中学习如何用JavaScript创建动态网页。经验丰富的程序设计者可以从中快速地找到编写复杂JavaScript程序需要的信息。本书对所有JavaScript程序设计者来说都是绝对必要的。
组件属性 发展 贡献 执照 注释 介绍 内置的表,其中包括所有CRUD(创建,读取,更新,删除)操作。 特征 CRUD操作 分页 查询规则构建器以过滤项目。 单击列标题时,按给定属性对项目进行排序。 设置 $ npm ...
14.3 JavaScript创建二维数组 14.4 截断小数点位数 14.5 删除数组中指定元素 14.6 数字选中后放大 14.7 统计字符数的方法 14.8 JavaScript遍历数组 14.9 获取字符串型数组下标的数组长度 14.10 用JavaScript实现数组...
14.3 JavaScript创建二维数组 14.4 截断小数点位数 14.5 删除数组中指定元素 14.6 数字选中后放大 14.7 统计字符数的方法 14.8 JavaScript遍历数组 14.9 获取字符串型数组下标的数组长度 14.10 用JavaScript实现数组...
tableNodes (options: Object) → Object 该函数为该模块使用的table , table_row和table_cell节点类型创建一组。 然后可以在创建架构时将结果添加到节点集。 options : Object 可以理解以下选项: table
通过数据属性 显示/隐藏列 显示/隐藏标题 显示/隐藏页脚 使用AJAX获取JSON格式的数据 单击即可进行简单的列排序 格式栏 单行或多行选择 强大的分页 卡视图 详细视图 本土化 扩展名 如何获得 说明书下载 使用“或。 ...
13.6.2 一个采用两重table嵌套方式固定表头的例子 13.6.3 可变列宽的实现 13.6.4 标记行--呈现有别于其他行的背景色 13.6.5 小技巧--将代码添加到样式表 13.7 总结 第14章 级联样式表 14.1 ...
1.本书1~21章所附代码的运行环境 操作系统:Windows 2003、... 21.3.js 使用Prototype的Try.these()创建XML DOM。 21.4.html Prototype的Form对象的使用方法。 prototype.js Prototype的.js库文件。
在标题中,将列名称与数据属性相关联 在正文中,只需设置数据以显示 在页脚(可选)中,您可以将聚合函数应用为SUM,AVG或CNT(计数) import React from "react" import { TableFast , TableHeader , TableBody , ...
假设您有一个较大的表someChangingAttr的以下模板和计算属性,该tableData在someChangingAttr更新时会更改: < table> {{#each row in tableData}} {{#each cell in row}} < td> {{cell}} {{/each}} </...
1.2.4 在javascript中使用json / 4 1.2.5 在.net中使用json / 8 1.2.6 在java中使用json / 12 1.2.7 更多有关json的信息 / 15 1.3 ext js 4概述 / 15 1.4 ext js的开发工具的获取、安装与配置介绍 / 18 1.4.1...
vue-response-components使用ResizeObserver创建响应组件。 想法请查看我在ITNEXT安装上的帖子npm install vue-sensitive-c vue-response-components使用ResizeObserver创建响应性组件。 想法看看我在ITNEXT安装上的...
|--js中正则表达式语法:/正则表达式/[属性后缀]--其中属性后缀,g:全局匹配 i:忽略大小写(仅英文有效) 如果不适用模式匹配方式,将执行原文匹配 结果:如果正则表达式写错,也将执行原文匹配 12.Array笔试题...
本文实例讲述了JS简单实现动态添加HTML标记的方法。分享给大家供大家参考,具体如下: 一 介绍 动态添加一个HTML标记可以使用createElement()方法来实现。 CreateElement()方法可以根据一个指定的类型来创建一个HTML...
React可编辑的员工表(数据表) 这个项目是使用任何外部模块(例如react-data-grid,react-datasheet等)从头开始创建的。特征在一张桌子中查看所有员工编辑所需的单元格(内联编辑) 将任何行标记为已删除撤消删除...