js获取表格所有行.docx
- 文档编号:12320904
- 上传时间:2023-06-05
- 格式:DOCX
- 页数:6
- 大小:16.37KB
js获取表格所有行.docx
《js获取表格所有行.docx》由会员分享,可在线阅读,更多相关《js获取表格所有行.docx(6页珍藏版)》请在冰点文库上搜索。
js获取表格所有行
竭诚为您提供优质文档/双击可除
js,获取表格所有行
篇一:
javascript动态创建表格
javascript动态创建表格:
新增、删除行和单元格
(js,获取表格所有行)利用js来动态创建表格有两种格式,appendchild()和insertRow、insertcell()。
两种方式其实差不多,但第一种有可能在ie上有问题,所以推荐大家使用第二种了,直接说吧。
利用js来动态创建表格有两种格式,appendchild()和insertRow、insertcell()。
两种方式其实差不多,但第一种有可能在ie上有问题,所以推荐大家使用第二种了,直接说吧。
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是行在表格中的位置,可以下面的方法取得然后去删除:
varrow=document.getelementbyid("行的id");
varindex=row.rowindex;//有这个属性,嘿嘿
objtable.deleteRow(index);
在使用过程中我碰到的一个问题跟大家说一下,就是删除表格的行的时候,如果你删除了某一行,那么表格行数是马上就变化的,所以如果你要删除表格的所有行,下面的代码是错误的:
functionclearRow(){
objtable=document.getelementbyid("mytable");
for(vari=1;i {
tblobj.deleteRow(i);
}
}
这段代码要删除原来的表格的表体,有两个问题。
首先不能是deleteRow(i),应该是deleteRow
(1)。
因为在删除表格行的时候,表格的行数在变化,这就是问题的关键,rows.length总是在变小,删除的行数总是会比预想的要少一半,所以正确的删除表格的行的代码应该这样:
functionclearRow(){
objtable=document.getelementbyid("mytable");
varlength=objtable.rows.length;
for(vari=1;i {
objtable.deleteRow(i);
}
}
3、动态设置单元格与行的属性
a、采用setattribute()方法,格式如下:
setattribute(属性,属性值)
说明:
这个方法几乎所有的dom对象都可以使用,第一个参数是属性的名称,比如说:
border,第二个就是你要为border设置的值了,比如:
1
varobjmytable=document.getelementbyid("mytable");
objmytable.setattribute("border",1);//为表格设置边框为1
其他的比如你要为一个td设置高度,同样先取得这个td对象,然后使用setattribute()方法
varobjcell=document.getelementbyid("mycell");
objcell.setattribute("height",24);//为单元格设置高度为24
在使用的时候遇到一个设置样式的问题,不能用setattribute("class","inputbox2");而应该使用setattribute("classname","inputbox2"),呵呵,其他我估计也有同样的问题,有些属性和我们在dw里面的不一致,呵呵,大家自己摸索吧。
b、直接赋值
varobjmytable=document.getelementbyid("mytable");
objmytable.border=1;//为表格设置边框为1
这个方法也全部适用,呵呵。
4、创建表格
了解了行与单元格的增删那就可以创建表格了。
第一步:
你需要有一个你去动态变化的表格,我这里讲的是已经存在页面的表格,我们要设置一个id:
mytable
varobjmytable=document.getelementbyid("mytable");
第二步:
创建行与列的对象
varindex=objmytable.rows.length-1;
varnextRow=objmytable.insertRow(index);//要新增的行,我这里是从倒数第二行开始新增的
//单元格箱号
varnewcellcartonno=nextRow.insertcell();
varcartonnoname="iptcartonno";
newcellcartonno.innerhtml="";
newcellcartonno.setattribute("classname","tablerdd");
这样就搞定了,可以简单的创建一个行和列了。
具体的代码我贴在下面。
只是很简单的例子,不过方法就大概是上面的了,呵呵,慢慢摸索吧~
蓝光-blueshine
varcount=false,no=1;
functionaddRow(){
count=!
count;
//添加一行
varnewtr=testtbl.insertRow(testtbl.rows.length);
//添加两列
varnewtd0=newtr.insertcell();
varnewtd1=newtr.insertcell();
varnewtd2=newtr.insertcell();
//设置列内容和属性
if(count){newtr.style.background="#FFe1FF";}
else{newtr.style.background="#FFeFd5";}
newtd0.innerhtml=;
no++
newtd1.innertext="第"+no+"行";
}
第1行
篇二:
js获取html表格的值
javascript
table{
margin:
10pxauto;
text-align:
center;
width:
600px;
height:
320px;
}
td{
border:
1pxsolid#333;
}
functioninitevent(){
vartds=document.getelementsbytagname("td");
for(vari=0;i vartd=tds[i];
td.onclick=btnclick;
}
}
functionbtnclick(){
vartds=document.getelementsbytagname("td");
for(vari=0;i vartd=tds[i];
if(td==window.event.srcelement){
alert(td.innertext);
}
}
}
请点击表格中的数字
111222333
444555666
777888999
篇三:
javascript添加删除表格行
js添加删除行
//要确定行的唯一性(提示:
你可以使用你的主键)
varid=1;
//添加行的方法
functionaddtr()
{
//获得表格对象
vartb=document.getelementbyid(testtab);
//添加一行
varnewtr=tb.insertRow(-1);//在最下的位置
//给这个行设置id属性,以便于管理(删除)
newtr.id=tr+id;
//设置对齐方式(只是告诉你,可以以这种方式来设置任何它有的属性)newtr.align=center;
//添加两列
varnewtd0=newtr.insertcell();
varnewtd1=newtr.insertcell();
//设置列内容和属性
newtd0.innerhtml="本行id为:
"+id;//让你看到删除的是指定的行
newtd1.innerhtml="移除";;
id++;
}
//移除行的方法
functionmovetr(id)
{
//获得表格对象
vartb=document.getelementbyid(testtab);
//根据id获得将要删除行的对象
vartr=document.getelementbyid(tr+id);
//取出行的索引,设置删除行的索引
tb.deleteRow(tr.rowindex);
}
表格:
操控此表格
第二列
添加一行
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- js 获取 表格 所有