`
qfdyitian
  • 浏览: 1367 次
  • 性别: Icon_minigender_1
  • 来自: 北京
最近访客 更多访客>>
社区版块
存档分类
最新评论

js 操作table

    博客分类:
  • js
js 
阅读更多
最近把系统前台页面做点功能优化,好几年没写过js了,头顿时很大,经过一系列狂整,总算给做出来了。


      //删除行
  function deleteCurrentRow(obj){

  if(confirm("确实要删除吗?")) {

  var tr=obj.parentNode.parentNode;
  var tbody=tr.parentNode;
  tbody.removeChild(tr);
       }else{

       }
  }



table 行上移下移

//上移
function moveUp(src)
{  
//上移一行     
  var rowIndex=src.parentElement.parentElement.rowIndex;
  if (rowIndex>=2)
    change_row(rowIndex-1,rowIndex);      
}

function moveDown(src){
//下移一行
  var rowIndex=src.parentElement.parentElement.rowIndex;
  var tl = document.getElementById("categoryTable");
  if (rowIndex<tl.rows.length-1){
    change_row(rowIndex+1,rowIndex);
  }
 
}
function change_row(line1,line2)
{
//执行交换
  categoryTable.rows[line1].swapNode(categoryTable.rows[line2]);
}



//删除table所有行
function delAllMyRow(){ 
     var mytable = document.getElementById("mybody"); 
     var rowlen=mytable.rows.length; 
     for(var i=rowlen-1;i>=0;i--){ 
         mytable.deleteRow(i); 
     } 
}



往table 里面插入一行

function selectedChargePackage(value) {

var tab = window.parent.frames.frame1.document.getElementById("categoryTable") ;
//表格行数
     var rows = tab.rows.length ;

  //添加一行
     var newTr =window.parent.frames.frame1.document.getElementById("mybody").insertRow();

      //表格列数
    // var cells = tab.rows.item(0).cells.length ;
    // alert("行数"+rows+"列数"+cells);
    
     //添加四列
     var newTd0 = newTr.insertCell();
     var newTd1 = newTr.insertCell();
     var newTd2 = newTr.insertCell();
     var newTd3 = newTr.insertCell();
    
     
     //设置列内容和属性
     newTd0.innerHTML= rows;
     newTd1.innerHTML= idValue + tempArray[0] + ",";
     newTd2.innerHTML= nameValue + tempArray[1] + ",";
     newTd3.innerHTML ="<a href='#' onclick='moveUp(this)' cellpadding='3' cellspacing='1' bgcolor='#c7dffc' style='margin-top:5px; margin-bottom:5px;'>上移</a> " +
            "<a href='#' onclick='moveDown(this)' cellpadding='3' cellspacing='1' bgcolor='#c7dffc' style='margin-top:5px; margin-bottom:5px;'>下移</a> " +
            "<a href='#' onclick='deleteCurrentRow(this)'  cellpadding='3' cellspacing='1' bgcolor='#c7dffc' style='margin-top:5px; margin-bottom:5px;'>删除</a>";
   
}


获取table 指定行和列的数据

function submitChargePackage() {
    var categoryTable = document.getElementById("mybody");
    var rows=categoryTable.rows;
     // alert("行数:" + rows.length);

     for(var i=0;i<rows.length;i++){
        // var uu = rows[i].cells.length;
         //alert(rows[i].cells[j].innerHTML);
    idList = rows[i].cells[1].innerHTML;
    nameList = rows[i].cells[2].innerHTML;
    chargePackageIdList = chargePackageIdList + idList;
    chargePackageNameList = chargePackageNameList + nameList;
   }
  
}
分享到:
评论

相关推荐

    JS操作table大全

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

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

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

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

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

    js操作table的特效分享

    js操作table的特效分享

    js操作table导出excel

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

    javascript 操作 table

    javascript 操作 table的一个例子. 可以下去研究下

    javascript 操作table的特性.docx

    ### JavaScript操作Table的特性 #### 一、概述 在Web开发中,`&lt;table&gt;`元素是一种常见的HTML结构,用于展示数据。随着JavaScript的发展,我们可以通过脚本来动态地控制表格的行为和外观,从而实现更加丰富的用户...

    js操作table

    在JavaScript中,对HTML表格(`&lt;table&gt;`)的操作是一项常见的...在"js操作table.html"文件中,应该包含示例代码和解释,帮助读者更好地理解这些概念。你可以打开这个文件查看具体实现,结合本文的理论知识进行实践。

    js操作Table的绝大部分处理方法

    ### JS操作Table的高级技巧 #### 一、删除Table行 在网页设计中,动态地增加或删除表格行是常见的需求。通过`deleteRow()`方法,可以轻松实现这一功能。 ```javascript var infomation = document.getElementById(...

    JQuery+js操作table

    操作table,绑定某行数据到另外页面,例如修改操作,回显数据

    JS操作table的tr/td

    js操作HTML增加删除TR/TD (学前班级别的哈!)

    JS操作table

    在JavaScript(JS)中操作HTML表格...以上就是JavaScript操作HTML表格的基本知识,这些技巧在创建动态网页和Web应用时非常实用。通过熟练掌握这些操作,开发者能够创建出具有丰富交互性和动态性的表格,提高用户体验。

    javascript 操作 Table 排序

    在JavaScript中,操作HTML表格...综上所述,JavaScript操作HTML表格排序涉及数据提取、自定义比较函数、事件监听以及DOM操作等多个方面。理解这些概念并灵活运用,可以帮助我们创建功能强大且用户体验良好的表格应用。

    js操作table元素,表格的行列新增、删除汇集.txt

    根据给定的文件信息,我们可以总结出一系列关于使用JavaScript(简称JS)操作HTML中的`&lt;table&gt;`元素,尤其是对表格的行(`&lt;tr&gt;`)和列(`&lt;td&gt;`或`&lt;th&gt;`)进行增删操作的关键知识点。以下是对这些功能的详细解释: #...

    javascript操作table(增加/删除行/单元格)

    对表格的行和列进行插入/删除,并对每行添加行号

    JavaScript操作select&&table

    #### 二、JavaScript操作Table元素 在网页中,`&lt;table&gt;`元素用于创建表格。JavaScript可以用来动态地创建或修改表格,例如添加或删除行、列等。下面将介绍一些基本的操作方法。 ##### 1. 删除表格的行 ```...

    原生JS实现HTML- TABLE 自动行合并插件

    该类以纯原生JS编写,无需引入任何第三方库。 调用方法:new MergeRow(['col1','col2','col3'],data).renderTbl('td001'); 详情说明请见 mergerow.js 中的注释说明。 mergerow.html为具体事例。

    javascript 操作table的特性

    JavaScript操作table的特性主要包括以下几个方面: 1. 动态创建表格: 在JavaScript中,可以通过编程方式动态创建表格。例如,使用`document.createElement("table")`来创建一个新的table元素,然后可以通过一系列...

    js动态操作table实例

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

Global site tag (gtag.js) - Google Analytics