首页 › C++ › js动态操作table

jiasongmao 发表于 2013-1-27 05:02:16

js动态操作table

1、取得table对象
   var objTable=document.getElementById( "tb_visitor" );
2、新增一行
var objTempRow = objTable.rows;      //取得模板行
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.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);

JS:DATATABLE,DATASET,NameValueCollection, ....

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

this.getKeys = function() {
   var keys = [];

   for(key in this)
    if(typeof this != "function")
   keys.push(key);
   
   return keys;
}

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

}

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 = new DataCell(Columns.__type,"");
   this.CellsCollection.add(Columns.Name,this.Cells);

}
   
}
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.cells.length;i++)
   {
    this.addColumn(tb.rows.cells.innerText,tb.rows.cells.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.cells.length;j++)
    {
   newRow.Cells.value = tb.rows.cells.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.Name;
    newCell.setAttribute("datatype",this.Columns.__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.Cells.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.name, columns.__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.length; c++) {
   row.Cells = rows.Cells;
   
    }
   
   }
}
}

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);
   }
}
}

查看完整版本: js动态操作table