<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

 <head>

  <title> New Document </title>

  <style type="text/css">

        table

        {

            border-collapse: collapse;

            border: none;

            width: 200px;

        }

        td

        {

            border: solid #000 1px;

        }

    </style>

    <script>

      //获得当前域在的index ，(是第几个xxx)

      function getElementOrder(field,tableid){

        var inputs = document.getElementsByName(field.name);

        var len = inputs.length;

        var index = 0;

        for  (var i = 0 ; i < len; i++){

              if(inputs == field ){

                  index = i;

                  break;

              }

        }

        return index;

      }

   function insertRow(tableid,table_data){

   //获得tbody （创建一个table会有一个默认的 tbody 装载 tr td 这里获得tale一个tbody）

     var oTBODY     = document.getElementById(tableid).tBodies[0];//此处相当于item(0)在js中使用数组序号直接调用即可 见javascript权威指南P368

     var oTBODYData = document.getElementById(table_data).tBodies[0];

     var  len = oTBODYData.rows.length;

     //遍历data 行

     for ( var i = 0 ; i <= len; i++ ){

       oTBODY.appendChild(oTBODYData.rows[i].cloneNode(true));

     }

   } 

   function deleteRow(Field,targetTable){

      var findex = getElementOrder(Field)-1;//此处减1是因sourceTable中有一行是隐藏的

       document.getElementById(targetTable).deleteRow(findex);

   }

    </script>

 </head>

 <body>

      <table id = "table_data" class="data"  style ="display:none">

          <tr>

            <td><input type="text" name="">1</td>

            <td><input type="text" name="2"></td>

             <td><input type="text"></td>

              <td><input type="button" value="删除" onclick="deleteRow(this,'table_list');"></td>

          </tr>

      </table>

     <table id = "table_list" class ="list">

      <tr>

        <td>年龄 <td>

        <td>性别</td>

        <td><input type="button"  name ="del"  onclick="deleteRow(this)"></td>

        <td><input type="button"  value ="添加" name ="insert"  onclick="insertRow('table_list','table_data')"></td>

      </tr>

      </table>

 </body>

</html>

方法很常见了，不敲一遍谁赶说自己会呢。

js操作table的更多相关文章

  1. 第十三篇 JS 操作table表格

    JS 操作table表格 这节课难度可能高一点,因为没有提前解释if判断.for循环.这节课是直接把这两样用上了,老师先简单介绍一下: if,判断语句,判断就很简单了嘛,假如说1=1(1等于1),当然 ...

  2. js操作table倒叙显示序号的问题

    今天遇到一奇葩问题,就是在js添加table时,序号是倒叙显示的,而且数据库查出来时正序的,为什么显示是倒叙的呢? 我百度一番,终于有了结果: var newRow=table.insertRow(- ...

  3. js 操作table: insertRow()，deleteRow()，insertCell()，deleteCell()方法

    表格有几行: var trCnt = table.rows.length;  (table为Id ) 每行有几列:for (var i=0; i<trCnt; i++)              ...

  4. js操作table表格导出数据到excel方法

    js导出excel资料很少,网上也找了很多,基本都不能用,要么只能是IE用,还必须要权限,这是非常不好的.后来到github上找到table2excel.js,虽然可以用,但仍然对IE支持不够,也算不 ...

  5. js 操作table

    <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default4.aspx.cs ...

  6. 原生JS操作 table object HTMLTableSectionElement 对象,获取行数

    <tbody id="infoTab"> <tr class="fomat"> <td class="blank&quo ...

  7. js操作table中tr的顺序，实现上移下移一行的效果

    总体思路是在table外部加个div,修改div的innerHtml实现改变tr顺序的效果 具体思路是 获取当前要移动tr行的rowIndex,在table中删除掉,然后循环table的rows,到了 ...

  8. js操作表格

    js 操作table: insertRow(),deleteRow(),insertCell(),deleteCell()方法 表格有几行: var trCnt = table.rows.length ...

  9. js实现动态操作table

     本章案例为通过js,动态操作table,实现在单页面进行增删改查的操作. 简要案例如下: <%@ page language="java" contentType=&quo ...

随机推荐

  1. 程序设计入门——C语言 第7周编程练习 1多项式加法（5分）

    第7周编程练习 依照学术诚信条款,我保证此作业是本人独立完成的. 温馨提示: 1.本次作业属于Online Judge题目,提交后由系统即时判分. 2.学生可以在作业截止时间之前不限次数提交答案,系统 ...

  2. js函数前面写上分号的原因

    说个之前先说,网站上传一些文件,考虑到性能问题,会用一些压缩软件来压缩代码(grunt,glup,webpack,etc..),这时候就可能出现一个问题.看下面代码 (function a(){... ...

  3. CSS3--transform

    transform:向元素应用2D或3D转换,该属性允许我们对属性旋转,缩放,移动,或倾斜. transfrom:none:定义不进行转换 transfrom:matrix(n,n,n,n,n,n); ...

  4. Jquery mobile 新手问题总汇

    1页面缩放显示问题 问题描述: 页面似乎被缩小了,屏幕太宽了. 解决办法: 在head标签内加入: <meta name="viewport" content="w ...

  5. web sql database数据存储位置

    Q1: 数据存储在哪儿? Web Storage / Web SQL Database / Indexed Database 的数据都存储在浏览器对应的用户配置文件目录(user profile di ...

  6. uva 10934（dp)

    题意:k个水球,现在在一个n层建筑物上,水球可能在某一层层以上扔下去会破掉,现在求一个最少的次数使得用这k个水球能确定出哪一层. 思路:假设有i个小球,还可以实验j次时,第一个小球从x处扔下去,如果破 ...

  7. [原创]WinForm分页控件制作

    先简单说一下思路: 1.做一个分页控件的导航类,即记录总页数.当前页.每页记录数,下一页.上一页.跳转等操作的页数变更. class PageNavigation{/// <summary> ...

  8. PDF 补丁丁 0.5.0.2078 测试版发布：不用打字，也能加书签

    新增功能: 在书签编辑器加书签,不再需要自己输文本. 书签编辑器的阅读界面增加了识别文本字符的功能,可使用该功能在添加书签时识别文本. 右键点击文本内容,可插入书签(对于扫描版的文档,在激活识别引擎后 ...

  9. Java设计模式 工厂模式概念解析

    定义:工厂模式专门负责将大量有共同接口的类实例化.工厂模式可以动态决定将哪一个类实例化,而不必事先知道每次要实例化哪一个类. 三种形态: 简单工厂模式:又称静态工厂方法 工厂方法模式:又称多态性工厂模 ...

  10. （转）redis 3.0的集群部署

    一:关于redis cluster 1:redis cluster的现状 reids-cluster计划在redis3.0中推出,可以看作者antirez的声明:http://antirez.com/ ...