<!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. IOS判断设备是否已越狱

    转自:http://www.cnblogs.com/supercheng/archive/2012/12/05/2804166.html - (BOOL)isJailbroken { BOOL jai ...

  2. SAP采购订单历史明细报表源代码（自己收藏）

    SPAN { font-family: "Courier New"; font-size: 10pt; color: #000000; background: #FFFFFF } ...

  3. Linux乱码问题解决方案

    欢迎和大家交流技术相关问题: 邮箱: jiangxinnju@163.com 博客园地址: http://www.cnblogs.com/jiangxinnju GitHub地址: https://g ...

  4. MVC 路由介绍

    我们新建一个ASP.NET MVC Web程序的时候,会生成一个Global.asax文件.如下: using System; using System.Collections.Generic; us ...

  5. Windows Store App 网络通信 HttpWebRequest

    如果希望更好地控制HTTP请求,可以使用System.Net类库中的HttpWebRequest类,该类对HTTP协议进行了完整的封装,并且提供了很多对HTTP协议中的 Header.Content和 ...

  6. how to get soul shields in blade and soul

    These soul shields can either be obtained by E.Fleet Supply Chain or Blackram Supply Chain (4-man or ...

  7. asp.net ajax与jquery的冲突问题解决

    在网上看到有网友说,用了updatepannel这个asp.net ajax异步更新面板后,javascript或者jquery代码不起作用,实际上,可以在updatepannel的触发器中进行设置解 ...

  8. EF框架学习

    简称EF,ADO.NET Entity Framework是微软以ADO.NET为基础所发展出来的对象关系对应(O/R Mapping)解决方案,是微软的一个ORM(面向对象的对象模型和关系型数据库的 ...

  9. Strategy pattern策略模式

    在Java的集合框架中,经常需要通过构造方法传入一个比较器Comparator,或者创建比较器传入Collections的静态方法中作为方法参数,进行比较排序等,使用的是策略模式. 一.策略模式的定义 ...

  10. JAVA字符串的相关练习

    /*String s = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";//生成随机验证码 fo ...