js表格插入行.docx
《js表格插入行.docx》由会员分享,可在线阅读,更多相关《js表格插入行.docx(6页珍藏版)》请在冰豆网上搜索。
js表格插入行
竭诚为您提供优质文档/双击可除
js,表格,插入行
篇一:
js动态删除表格行
js动态删除表格行
先取得表格:
js代码
1.vartable=document.getelementbyid("table");
然后遍历表格的行数进行删除:
js代码
1.for(vari=0;i 2.table.deleteRow(i);
3.}
这时会发现结果并不像预期那样,是因为删除一行后,table.rows.length会变小,所以先将table.rows.length赋值给变量len,这时js会报错,是因为每删一行后,len的值没变,而实际的行数却在变少,所以代码应该是:
js代码
1.varlen=table.rows.length;
2.for(vari=0;i 3.table.deleteRow(0);
4.}
或者:
1.varlen=table.rows.length;
2.for(vari=len-1;i>=0;i--){
3.table.deleteRow(i);
4.}
篇二:
jsp表格增加行
//增加行
functionaddRow()
{
//添加一行
varmaintable=document.getelementbyid("yourtable");
varnewtr=maintable.insertRow();
varnewtd0=newtr.insertcell();
varnewtd1=newtr.insertcell();
//设置列内容和属性
newtd0.innerhtml=""newtd1.innerhtml="";
}
//删除行
functiondelRow(obj){
vartr=this.getRowobj(obj);
if(tr!
=null){
tr.parentnode.removechild(tr);
}else{
thrownewerror("thegivenobjectisnotcontainedbythetable");
}
}
利用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是行在表格中的位置,可以下面的方法取得然后去删除:
varrow=document.getelementbyid("行的id");
varindex=row.rowindex;//有这个属性
objtable.deleteRow(index);
在使用过程中,删除表格的行的时候,如果删除了某一行,那么表格行数是马上就变化的,rows.length总是在变小,所以如果你要删除表格的所有行:
functionremoveallRow(){
varobjtable=document.getelementbyid("mytable");
varlength=objtable.rows.length;
for(vari=1;i objtable.deleteRow(i);
}
}
3、setattribute()方法,动态设置单元格与行的属性
格式如下:
s
etattribute(属性,属性值)
varobjmytable=document.getelementbyid("mytable");
objmytable.setattribute("border",1);//为表格设置边框为1
在使用的时候遇到一个设置样式的问题,不能用
setattribute("class","inputbox1");而应该使用
setattribute("classname","inputbox1"),
4、创建表格
了解了行与单元格的增删那就可以创建表格了。
第一步:
你需要有一个你去动态变化的表格,这里讲的是已经存在页面的表格,我们设置一个id:
mytable
varobjmytable=document.getelementbyid("mytable");
第二步:
创建行与列的对象
varindex=objmytable.rows.length;
varnextRow=objmytable.insertRow(index);//在最后的行
//varnextRow=objmytable.insertRow(0);//在最前的行
下面是示例代码
varcount=false;//控制交替换行
varno=1;//行号
functionaddRow(){
count=!
count;
//添加一行
varnewtr=table.insertRow(table.rows.length);//在最后新增一行
//varnewtr=table.insertRow(0);//在最前面新增一行
//添加两列
varnewtd0=newtr.insertcell();
varnewtd1=newtr.insertcell();
varnewtd2=newtr.insertcell();
//设置列内容和属性
if(count){
newtr.style.background="#FFe1FF";
}
else{
newtr.style.background="#FFeFd5";
}
no++;
newtd0.innerhtml=;newtd1.innertext="第"+no+"行";
newtd2.innerhtml=;}
第1行
在html中使用tbody标签可以动态添加一行(....),tbody可以写在table内大概的代码如下:
varowin=document.getelementbyid(tbody);
row=owin.insertRow(index);//向tbody插入一行index是你这一行添加的位置
cell1=row.insertcell();//插入一列
cell1.classname="cssstyle";//cssstyle是css样式
cell1.innerhtml="";//这里写添加列中的(html)代码
cell2=row.insertcell();//插入第二列
。
。
。
。
。
。
篇三:
用js实现的表格
"http:
//
f
152.00
20xx-12-09
点击标题可排序
//添加行
"
functionaddRow(table,index){
varlastRow=table.rows[table.rows.length-1];
varnewRow=lastRow.clonenode(true);
table.tbodies[0].appendchild(newRow);
setRowcanedit(newRow);
returnnewRow;
}
functiondelete_row(rname){
//函数delete_row用于删除一行
vari;
i=window.event.srcelement.parentnode.parentnode.rowindex;if(confirm(确定删除第+i+行))
tabproduct.deleteRow(i);
}
functionmove_up(rname)
{
//上移一行
vari;
i=window.event.srcelement.parentnode.parentnode.rowindex;if(i>=2)
change_row(i-1,i);
else
alert(第一行不能上移!
);
}
functionmove_down(rname)
{
//下移一行
vari;
i=window.event.srcelement.parentnode.parentnode.rowindex;if(i change_row(i+1,i);
else
alert(最后一行不能下移!
);
}
functionchange_row(line1,line2)
{
//执行交换
tabproduct.rows[line1].swapnode(tabproduct.rows[line2]);
}
//转换器,将列的字段类型转换为可以排序的类型:
string,int,floatfunctionconvert(sValue,sdatatype){
switch(sdatatype){
case"int":
sdatatype);
sdatatype);
returnparseint(sValue);case"float":
returnparseFloat(sValue);case"date":
returnnewdate(date.parse(sValue));default:
returnsValue.tostring();}}//排序函数产生器,icol表示列索引,sdatatype表示该列的数据类型functiongeneratecomparetRs(icol,sdatatype){returnfunctioncomparetRs(otR1,otR2){varvValue1=convert(otR1.cells[icol].firstchild.nodeValue,varvValue2=convert(otR2.cells[icol].firstchild.nodeValue,if(vValue1vValue2){return1;}else{return0;}};}//排序方法functionsorttable(stableid,icol,sdatatype){varotable=document.getelementbyid(stableid);varotbody=otable.tbodies[0];