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];
升级会员 