首页 诗词 字典 板报 句子 名言 友答 励志 学校 网站地图
当前位置: 首页 > 教程频道 > 网站开发 > JavaScript >

js动态操作报表

2012-11-08 
js动态操作表格一.? 动态为obj表格增加一行?function addrow(obj){? ??var tabdocument.getElementById(o

js动态操作表格

一.? 动态为obj表格增加一行

?

function addrow(obj){
? ??var tab=document.getElementById(obj);
? ??var rowsnumber = tab.rows.length;
? ??var now_num=0;
? ??if (rowsnumber<=1){???????????//没有数据
? ???rowsnumber = 1;
? ??}
? ??else{
? ???now_num=tab.rows[rowsnumber-1].cells[1].innerText;?? ?//行数从0开始,得到当前表中最大排号
??? ??}
??? ??var? count=parseInt(now_num)+1;???? ??????//新增的排在最大牌号上加1
??? ??var row=tab.insertRow(rowsnumber);???????//给表格加入一行,此行为表格的最大行??? ??
???? ??row.align='center';
???? ??cell=row.insertCell();
???? ??cell.innerHTML='<input type="checkbox" checked>';
???? ??cell=row.insertCell();
???? ??cell.innerHTML=count;
???? ??cell= row.insertCell();
??? ??cell.innerHTML = '<select id="lx" length=20/><option value="0">标准排</option><option value="1">包厢</option><option value="2">假包厢</option><option value="3">圆桌</option><option value="4">方桌</option></select>';?
???? ??cell= row.insertCell();
???? ??cell.innerHTML = '<input type="text" length=20 value="'+count+'排" >';
???cell=row.insertCell();
???? ??cell.innerHTML='<input type="text"? value="" >';
???}

二.动态显示所有表格信息

??

function existed_paixx(obj,p_bm,p_lx,p_mc,p_id,count){???//count动态唯一标识不同行的select标志
???var tab=document.getElementById(obj);
???var rowsnumber=tab.rows.length;
???if(rowsnumber<=1){
????rowsnumber=1;
???}??
???var row=tab.insertRow(rowsnumber);
???row.align='center';
???cell=row.insertCell();
???cell.innerHTML='<input type="checkbox" checked>';
???? ??cell=row.insertCell();
???? ??cell.innerHTML=p_bm;
???? ??cell= row.insertCell();
??? ??cell.innerHTML ='<select id="lx'+count+'" length=20><option value="0">标准排</option><option value="1">包厢</option><option value="2">假包厢</option><option value="3">圆桌</option><option value="4">方桌</option></select>';
???? ??cell= row.insertCell();
???? ??cell.innerHTML = '<input type="text" length=20 value="'+p_mc+'">';
???? ??cell=row.insertCell();
???? ??cell.innerHTML='<input type="text" value="'+p_id+'">';
?? ?document.getElementById('lx'+count).options[p_lx].selected=true;

//为select标签赋值,若该标签的名称相同,每次循环默认只给当前表格的第一行赋值,故设置成变量
??}

遍历所有排信息

?

??function getPaiByFq_id(id){???????//分区id??????
???paiBj.getpaixxByFq_id(id,function(data){
????if(data.length>0){
?????clearTable("sxnr1");???????
?????for(var i=0;i<data.length;i++){
?????existed_paixx('sxnr1',data[i].p_bm,data[i].p_lx,data[i].p_mc,data[i].p_id,i);
?????}?????
????}
????else{
????clearTable("sxnr1");
????initpai();?????????//没有数据,初始化排
????}??????
???});
??}

三.表格的删除

??function delrow(obj){????????//按行删除
???var table=document.all(obj);
???var j = 0;
???j = table.rows.length;
???var count=0;
???for(var i=j-1;i>=1;i--){
????var tr=table.rows[i];
????if(tr.cells[0].children[0].checked){
?????table.deleteRow(i);
?????count=count+1;
?? ??}????
???}
???if(count==0){
????alert("请选择您要删除的数据");
???}
??}

注:必须从最后一行开始删除,否则报错误:参数无效!

热点排行