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("请选择您要删除的数据");
   }
  }

注：必须从最后一行开始删除，否则报错误：参数无效！

评论

3 楼 xuejianshan 2008-10-23  

DOM

2 楼 chengzhi 2008-10-22  

stephen830 写道

考虑对firefox的支持，要调整的
引用
cell=row.insertCell(); 要改成 cell=row.insertCell(-1);
引用
var table=document.all(obj); 要改成&nbsp; var table= document.getElementById(obj);

对js还是初学，谢谢你的建议

1 楼 stephen830 2008-10-22  

考虑对firefox的支持，要调整的

引用

cell=row.insertCell();

要改成 cell=row.insertCell(-1);

引用

var table=document.all(obj);

要改成  var table= document.getElementById(obj);