<!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. centos 7 编译zabbix 3.2.2

    已有LNMP环境. 1.安装zabbix需要的依赖包,红色部门的包官方yum源没有,需要自己下载 yum install net-snmp fping iksemel net-snmp-devel   ...

  2. USB传输协议。——Arvin

    问题一:USB的传输线结构是如何的呢? 答案一:一条USB的传输线分别由地线.电源线.D+.D-四条线构成,D+和D-是差分输入线,它使用的是3.3V的电压(注意哦,与CMOS的5V电平不同),而电源 ...

  3. c# webapi发布到windows server 2008 r2 iis上提示404错误

    项目服务端是一组RestFul风格的webapi,发布到本机的iis没有问题,但是发布到服务器以后就提示404错误.本机是win10的,服务器是windows server 2008 R2 64位.之 ...

  4. C# 必看书籍

    C# in Depth:讲的是C#的东西.CLR via C#:讲的是运行时的东西.Framework Design Guideline:讲的是你要如何设计一个类库才能跟.NET浑然一体.——“赵三本 ...

  5. SQL SERVER与SSIS 数据类型对应关系

  6. HashSet和HashMap的区别

    HashSet和HashMap的区别.Java的HashSet类是由哈希表支持.它不保证 set 的迭代顺序:特别是它不保证该顺序恒久不变.此类允许使用 null 元素.HashSet类为基本操作提供 ...

  7. centos7查看端口命令

    查看Centos端口命令: # netstat -lntp #查看监听(Listen)的端口# netstat -antp #查看所有建立的TCP连接其他关于查看服务器网络信息命令:1.查看Linux ...

  8. I:trainage Ditches

    总时间限制: 1000ms 内存限制: 65536kB描述Every time it rains on Farmer John's fields, a pond forms over Bessie's ...

  9. OptionsMenu

    菜单是用户界面中最常见的元素之一,使用非常频繁,在Android中,菜单被分为如下三种,选项菜单(OptionsMenu).上下文菜单(ContextMenu)和子菜单(SubMenu),今天这讲是O ...

  10. shell脚本中的几个括号总结(小括号/大括号/花括号)--from:http://www.cnblogs.com/hanyan225/archive/2011/10/06/2199652.html

    在Shell中的小括号,大括号结构和有括号的变量,命令的用法如下: 1.${var}2.$(cmd)3.()和{}4.${var:-string},${var:+string},${var:=stri ...