你的位置: Kiyo'Space首页 JavaScript/Jscript 阅读文章 欢迎留下您的足迹

js动态操作table

[ JavaScript/Jscript ] 分享

1、取得table对象
   var objTable=document.getElementById( "tb_visitor" );
2、新增一行
  var objTempRow = objTable.rows[0];        //取得模板行
  var objNewRow = objTable.insertRow( objTable.rows.length );
  objNewRow.id = objTable.rows.length-1;
  //添加一行的相关信息
  for ( var i=0 ; i<objTempRow.cells.length ; i++ )
  {
      var objNewCell = objNewRow.insertCell( i );
      objNewCell.innerHTML = objTempRow.cells[i].innerHTML;
      //
      if(objNewCell.innerHTML.indexOf("value=")!=-1){
          var si=objNewCell.innerHTML.indexOf("value=")*1+6;
          var ei=objNewCell.innerHTML.indexOf(">");
          var cellvalue=objNewCell.innerHTML.substring(si,ei);
          //将新列内容清空且变为可用状态
          objNewCell.innerHTML=objNewCell.innerHTML.replace(cellvalue,”).replace(‘disabled’,”);
      }
  }
  //添加行的click事件
  objNewRow.onclick = new Function("fn_clickrow(this);");
3、删除一行
   objTable.deleteRow(objrow.index);
 

4、JS事件触发

for(var i=0;i<arr.length;i++){//随便一个循环生成动态table
var header=tab.createTHead();
var row=header.insertRow();
var cell=row.insertCell();
cell.appendChild(document.createTextNode(arr[i]));
row.style.cursor="hand";
row.onclick=function s(){//onclick事件的触发
document.all.result.value=this.innerText;//对象result的value为row的innerText,注意this对象
};}  

JS:DATATABLE,DATASET,NameValueCollection, ….

var NameValueCollection = function(){
this.__type = "System.Collections.Specialized.NameValueCollection";
this.add = function(key, value) {
   if(this[key] == null) {
    this[key] = value;
   }
}

this.getKeys = function() {
   var keys = [];
 
   for(key in this)
    if(typeof this[key] != "function")
     keys.push(key);
  
   return keys;
}

this.getValue = function(key) {
   return this[key];
}
 
}

var DataCell = function(type,value){
this.__type = "System.Data.DataCell, System.Data";

this.__type = type;
this.value = value;
}
var DataRow = function(Columns){
this.__type = "System.Data.DataRow, System.Data";

this.CellsCollection = new NameValueCollection();
this.Cells = new Array();
for(i=0;i<Columns.length;i++)
{
   this.Cells[this.Cells.length] = new DataCell(Columns[i].__type,"");
   this.CellsCollection.add(Columns[i].Name,this.Cells[this.Cells.length-1]);
 
}
  
}
var DataTable = function(columns, rows) {
this.__type = "System.Data.DataTable, System.Data";

this.Columns = new Array();
this.Rows = new Array();
 
this.getTable = function(tableId){
   var tb = $(tableId);
  
   for(i=0;i<tb.rows[0].cells.length;i++)
   {
    this.addColumn(tb.rows[0].cells[i].innerText,tb.rows[0].cells[i].getAttribute("datatype"));
   }
 
   if(tb.rows.length == 1) return;
 
   for(i=1;i<tb.rows.length;i++)
   {
    var newRow = this.addRow();
    for(j=0;j<tb.rows[i].cells.length;j++)
    {
     newRow.Cells[j].value = tb.rows[i].cells[j].innerText;
    }
  
   }
}
this.bind = function(tableId){
   var tb = $(tableId);
 
   var newRow = tb.insertRow();
   for(j=0;j<this.Columns.length;j++)
   {
    var newCell = document.createElement("TH");
    newCell.innerText =   this.Columns[j].Name;
    newCell.setAttribute("datatype",this.Columns[j].__type);
    newRow.appendChild(newCell);
  
   }
   
   for(i=0;i<this.Rows.length;i++)
   {
    var newRow = tb.insertRow();
    for(j=0;j<this.Columns.length;j++)
    {
     var newCell = newRow.insertCell();
     newCell.innerText = this.Rows[i].Cells[j].value;
    }
  
   }
}

this.addColumn = function(name, type) {
   var c = new Object();
   c.Name = name;
   c.__type = type;
 
   this.Columns.push(c);
}

this.addRow = function()
{
   var newRow = new DataRow(this.Columns);
   this.Rows.push(newRow);
 
   return newRow;
}

if(columns != null) {
   for(var i=0; i<columns.length; i++) {
    this.addColumn(columns[i].name, columns[i].__type);
   }
}
if(rows != null) {
   for(var i=0; i<rows.length; i++) {
    var row = this.addRow();
    for(var c=0; c<this.Columns.length && c<rows[i].length; c++) {
     row.Cells[c] = rows[i].Cells[c];
   
    }
  
   }
}
}

var DataSet = function(tables) {
this.__type = "System.Data.DataSet, System.Data";
this.Tables = new Array();
this.addTable = function(table) {
   this.Tables.push(table);
}
if(tables != null) {
   for(var i=0; i<tables.length; i++) {
    this.addTable(tables[i]);
   }
}
}

没有评论

  • (Required)
  • (Required, will not be published)