`
jiasongmao
  • 浏览: 666844 次
  • 性别: Icon_minigender_1
  • 来自: 石家庄
社区版块
存档分类
最新评论

js动态操作table

阅读更多
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);

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]);
   }
}
}
分享到:
评论

相关推荐

    js动态操作table实例

    在JavaScript(JS)中,动态操作表格是一种常见的需求,它涉及到HTML DOM(Document Object Model)的元素操作。本文将深入探讨如何使用JavaScript实现对表格的动态添加、删除、修改和查询功能,结合给出的标签...

    js动态创建Table

    JavaScript是一种强大的客户端脚本语言,广泛应用于网页交互和动态内容的生成。...以上内容涵盖了JavaScript动态创建Table的基本步骤和相关技术,理解并掌握这些知识点将有助于实现各种复杂的网页交互功能。

    js动态添加table行

    本文代码主要实现了javascript如何操作table并动态添加行的方法

    JS实现动态修改table及合并单元格的方法示例

    在JavaScript中,动态修改表格(Table)以及合并单元格是常见的需求,特别是在处理数据展示或者报表生成时。以下将详细介绍如何使用JS实现这些功能。 首先,要动态修改表格,我们需要获取表格元素。在HTML中,表格...

    js动态生成table

    在JavaScript中,动态生成table是一种常见的网页交互功能,它允许我们根据需求在页面上实时创建、添加或删除表格行(tr)和单元格(td)。这个功能在数据展示、表格编辑或者用户交互丰富的应用场景中非常实用。下面...

    javascript动态生成table及处理.

    ### JavaScript 动态生成 Table 及处理 在现代 Web 开发中,动态生成 HTML 元素是一种非常实用的技术,尤其当涉及到数据展示时,如表格(`&lt;table&gt;`)。通过 JavaScript 动态生成表格可以更加灵活地管理和更新数据。...

    js动态创建table点击按钮dom table tr添加操作

    本主题主要聚焦于如何利用JavaScript动态创建一个包含表格(table)的DOM结构,并且在表格行(tr)中添加可点击的按钮。这通常用于展示数据集,允许用户进行交互操作,比如删除、编辑或查看详情。 首先,我们需要...

    js操作table导出excel

    3. **JavaScript操作**:使用JavaScript获取表格数据并创建CSV(逗号分隔值)字符串,这是Excel能识别的一种格式。 ```javascript function exportTableToCSV(filename) { var table = document.getElementById('...

    JS 动态增加table

    在JavaScript中,动态增加table是一种常见的操作,尤其在网页交互和数据展示中。在这个场景中,我们看到的代码是用于JSP页面上的一个功能,它允许用户动态添加表格行(`&lt;tr&gt;`)到已有表格中。以下是相关知识点的详细...

    JS操作table大全

    以上就是JS操作table的基本方法和常见应用,通过熟练掌握这些技巧,你可以构建出功能丰富的交互式表格。然而,实际开发中可能需要根据具体需求进行更复杂的定制和优化,这就需要开发者具备深厚的JavaScript和DOM操作...

    js代码操作table排序功能

    在JavaScript中,对HTML表格(`&lt;table&gt;`)进行排序是一项常见的需求,特别是在动态数据展示和用户交互的应用中。本文将深入探讨如何使用JavaScript实现表格数据的排序功能。 首先,我们要理解HTML表格的基本结构,...

    javascript动态添加table

    在JavaScript中,动态添加table是一种常见的任务,尤其在构建数据驱动的Web应用时。这个功能允许开发者在用户交互或后台数据变化时实时更新页面上的表格。以下是对这一知识点的详细阐述: 1. **HTML表格基础** 在...

    js实现动态修改table内容功能

    在JavaScript中,动态修改HTML表格(Table)的内容是一项常见的任务,尤其在网页交互和数据展示时。本篇文章将深入探讨如何使用JavaScript实现这一功能,包括选择表格元素、获取和设置单元格内容,以及监听事件来...

    【原创】JS操作table--XTable类

    低调发布,因为是小样版本,集成了几个简单的方法...写此类的目的一个事方便操作table二是可以引入ajax做无刷新分页啥的 当然这些还没做 只是最简单实用的方法 争取尽快完善,引入ajax元素。尽请期待。 demo地址: ...

    js操作table的特效分享

    js操作table的特效分享

    使用javascript脚本操作table

    使用javascript脚本向页面中的table添加和删除行

    JS手动改变table的宽度

    在网页设计中,JavaScript(JS)是一种常用的客户端脚本语言,用于增强用户的交互体验和动态更新页面内容。本文将深入探讨如何使用JavaScript手动改变HTML表格(table)的宽度,并结合鼠标选中文字查询功能,为用户...

    PowerTable动态JsTable

    针对Table的操作,针对Table增加/删除 行和列,向上移,向下移.etc

    js操作table行的上下移动,置顶置底

    首先,`js操作table行的上下移动,置顶置底`这个主题涉及到的主要技术是DOM操作,事件监听和数组处理。DOM(Document Object Model)是HTML和XML文档的编程接口,通过JavaScript我们可以对表格中的每一行进行操作。...

    table 使用js 高效 动态添加行

    在网页开发中,表格(Table)是展示数据的常用元素,而JavaScript(js)则提供了强大的功能来操作DOM(文档对象模型),包括动态地向表格中添加行。本篇文章将详细探讨如何使用JavaScript高效地实现表格动态添加行,...

Global site tag (gtag.js) - Google Analytics