`
youanyyou
  • 浏览: 197026 次
  • 性别: Icon_minigender_1
  • 来自: 长沙
社区版块
存档分类
最新评论

利用js动态操作表格行列

阅读更多

/*
*根据传进来的表结构 和相应的列,返回
*/
function getTbValueByCols(obj,colindex)
{
  var str = "";
  for(var i= 0; i < obj.rows.length; i++)
      str += obj.rows[i].cells[colindex].innerHTML+"|";
     
  if(str != "")
    str = str.substr(0,str.length-1);
  return str;
}

/*
*表的相应的列的赋值
*/
function initiTbValueByCols(obj,colindex,arrV)
{
  for(var i= 0; i < obj.rows.length; i++)
  {
     obj.rows[i].cells[colindex].innerHTML=arrV[i];
  }
}
/*
*根据对象 pos:(startP,endP),和第几列 控制合并列
*/
function mergeRow(obj,pos,columnIndex)
{
     var arrPos = pos.split(',');
     var startPos = arrPos[0];
     var endPos = arrPos[1];
     obj.rows[startPos].cells[columnIndex].rowSpan = (endPos-startPos)+1;
     var i = parseInt(startPos)+1;
     for(;i<=endPos; i++)
     {
        Element.hide(obj.rows[i].cells[columnIndex]);
     }
}
/*
*功  能:删除未显示的行
*创建人:
*/
function delHideRows(obj)
{
    var len = obj.rows.length;
    for(var i=len-1; i>-1; i--)
    {
        if(Element.visible(obj.rows[i]) == false)
          Element.remove(obj.rows[i]);
    }
}
/*
*删除表的相应的列的值
*/
function delTbValueByCols(obj,colindex)
{
  for(var i= 0; i < obj.rows.length; i++)
     obj.rows[i].cells[colindex].innerHTML='';
}
/*
*把表的相应的列值 赋给另一个表 某列
*/
function copyTbColsToOtherTbCols(objSource,colIndexSource,objTarget,colIndexTarget)
{   
for(var i=1; i <objSource.rows.length; i++)
  objTarget.rows[i-1].cells[colIndexTarget].innerHTML=trim(objSource.rows[i].cells[colIndexSource].innerHTML);
}
/*
* 把表中指定的列,以数组的形式返回,每一列之间的值 以"|"分割 最后一位是 "|"
*/
function getTbColsValue(obj,cols)
{
   var arr = new Array(obj.rows.length);
   for(var i = 0; i < obj.rows.length; i++)
   {
      for(var j = 0; j < cols.length; j++)
      {
          arr[i] += trim(obj.rows[i].cells[cols[j]].innerHTML) + "|"
      }
      if(arr[i] != null && arr[i] != "")
        arr[i] = arr[i].substr(9);   
   }
   return arr;
}
/*
* 把表中指定的列,以数组的形式返回,每一列之间的值 以"|"分割 最后一位是 "|"
*/
function getTDValue(obj,rowIndex,colsIndex)
{
   var v='';
   try
   {
     v = trim(obj.rows[rowIndex].cells[colsIndex].innerHTML)
   }
   catch(ex)
   {}
   return v;
}
/*
* 把表中指定的列,以数组的形式返回,每一列之间的值 以"|"分割 最后一位是 "|"
*/
function setTDValue(obj,rowIndex,colsIndex,v)
{
   try
   {
     obj.rows[rowIndex].cells[colsIndex].innerHTML=v;
   }
   catch(ex)
   {}
}

深圳人才网 深圳招聘网 深圳人才招聘网 深圳人才大市场 

企业、个人免费注册,获取想要的 深圳 软件工程师招聘信息 月薪最低3000-8000,更有高端猎头职位! 

www.szrcwz.com                                                                                                                                           

                  Google 提供的广告

分享到:
评论

相关推荐

    js动态生成表格行列特效.zip

    本示例"js动态生成表格行列特效.zip"提供了实现这一功能的实例代码,包括HTML5、JavaScript和CSS三部分,允许开发者创建出具有视觉吸引力且功能丰富的表格。 首先,HTML5是现代网页开发的标准,它引入了许多新特性...

    js动态生成表格行列特效

    在JavaScript编程中,动态生成表格是一项常见的任务,尤其在网页交互和数据展示中。本教程将深入探讨如何使用JavaScript来创建具有颜色效果和取色功能的动态表格。 首先,我们需要理解HTML表格的基本结构,它由`...

    js读取json数据动态生成列数不固定的表格

    在本场景中,我们关注的是如何利用js从本地的JSON数据文档中读取信息,然后根据数据结构动态生成列数不固定的表格。这涉及到几个关键的知识点: 1. **JSON数据解析**:JSON(JavaScript Object Notation)是一种轻...

    js动态创建表格

    js动态创建表格,利用dom技术动态输入行列来创建表格

    javascript 表格行列动态添加

    总之,JavaScript表格的行列动态添加是网页交互设计中的重要技能,结合formbean的String数组使用,能够灵活地处理和展示动态数据。在实际开发中,还需要考虑兼容性、错误处理和性能优化等问题,以提供更好的用户体验...

    JS控制网页动态生成任意行列数表格的方法

    为了实现这一功能,需要对JavaScript进行操作,特别是DOM(文档对象模型)操作技巧,因为动态生成的表格本质上是对DOM元素的动态操作。接下来详细分析这一过程。 首先,当用户需要在网页上生成一个表格时,他通常会...

    jquery固定表格行列

    为了解决这一问题,我们可以利用jQuery库来实现表格的固定行列功能,让表头始终保持可见,即使在滚动时也是如此。本文将详细讲解如何使用jQuery实现这个功能。 首先,确保在项目中引入jQuery库,可以使用CDN链接...

    经典JS操作添加行列(我做的)

    本项目“经典JS操作添加行列(我做的)”聚焦于如何利用JavaScript高效地向HTML表格中添加行和列。下面将详细阐述相关知识点: 1. **HTML表格基础**:首先,我们需要了解HTML的`&lt;table&gt;`元素,它是创建表格的基础。`...

    table动态增加删除行列

    使用javascript实现table动态增加删除行列。

    html+js+css固定表格行列

    通过结合HTML、CSS和JavaScript,我们可以创建一个功能完善的固定行列表格,使用户在浏览大数据集时能更方便地查看和操作。这个“SuperTables”项目就是这样一个实现,它包含了所有必要的代码和示例,可以帮助开发者...

    Javascript动态创建表格及删除行列的方法

    在JavaScript中,动态创建表格和删除行列是常见的需求,尤其在网页交互和数据展示中。以下将详细讲解如何实现这些功能。 首先,我们来看如何动态创建表格。在HTML中,表格由`&lt;table&gt;`元素定义,包含`&lt;tr&gt;`(行)和`...

    JS固定行列 适合表格列很多或者数据很长的情况

    本文将深入探讨如何利用JavaScript实现表格的固定行列。 首先,我们需要理解基本的HTML表格结构。`&lt;table&gt;`元素用于创建表格,`&lt;thead&gt;`定义表头,`&lt;tbody&gt;`包含表格的主体内容,而`&lt;tr&gt;`代表表格行,`&lt;th&gt;`是表头...

    js动态创建表格,删除行列的小例子

    以上就是通过JavaScript动态创建表格,以及删除表格中行列的基本过程和代码实现。掌握这些技能,能够极大地增强Web应用的交互性和用户体验。对于有志于学习前端开发的朋友来说,这些操作是必须熟练掌握的基础知识点...

    动态增加行列以及表格_基于prototype

    "动态增加行列以及表格_基于prototype"这个主题聚焦于如何利用Prototype JavaScript库来实现这样的功能。Prototype是一个广泛使用的JavaScript框架,它为JavaScript提供了一些类的特性,使得代码更加简洁和易于维护...

    js表格组件js表格组件

    在网页开发中,表格是一种常见的数据展示和交互元素,而JavaScript(JS)表格组件则为开发者提供了强大的工具,用于创建功能丰富的动态表格。这些组件通常包括但不限于排序、过滤、分页、编辑、列自定义等功能,大大...

    js实现的3种好看的表样式,包括顶部有表头,左侧有表头,顶部和左侧都有表头

    JavaScript可以利用DOM操作动态创建这样的表格,通过遍历数据源,为每一行和每一列添加相应的元素。同时,可以使用CSS进行样式定制,例如边框、背景色、字体等,以提升视觉效果。 2. **左侧有表头的表格** 左侧有...

    【JavaScript源代码】element表格行列拖拽的实现示例.docx

    ### JavaScript源代码:Element表格行列拖拽的实现 #### 概述 在使用Element UI进行前端开发时,可能会遇到需要实现表格数据拖拽排序的需求。然而,Element UI本身并未提供直接支持这一功能的组件或方法。为了实现...

    asp.net C#表格的添加,行列的添加

    在ASP.NET中,结合C#进行表格操作是网站开发中常见的需求之一,尤其是在动态生成或修改HTML表格结构时。从给定的文件信息来看,主要涉及的是如何在ASP.NET环境中利用C#添加表格的行和列。下面将详细阐述这一过程,...

    JS实现可编辑的表格

    例如,Handsontable 是一个强大的JavaScript表格组件,它可以轻松实现可编辑表格,并且提供了丰富的配置选项。使用Handsontable,你可以这样创建一个可编辑表格: ```javascript // 导入Handsontable库 import ...

    js原生systable表格插件.zip

    【标题】"js原生systable表格插件"是一个基于JavaScript开发的表格组件,它提供了丰富的表格功能,旨在帮助开发者在网页应用中构建高效、可定制的数据展示平台。这个插件是原生的JavaScript实现,不依赖任何外部库,...

Global site tag (gtag.js) - Google Analytics