<!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. mybatis动态切换数据源

    (#)背景:由于业务的需求,导致需要随时切换15个数据源,此时不能low逼的去写十几个mapper,所以想到了实现一个数据源的动态切换 首先要想重写多数据源,那么你应该理解数据源的一个概念是什么,Da ...

  2. 浅谈C#Socket

    好不容易把socket通信搞懂一点,比较喜欢做笔记,嘿嘿~ 希望共同学习,共同进步! socket通信是C#中非常基础的一个知识点,我这里用到的是基于Tcp协议的socket通信.Tcp会有三次握手连 ...

  3. PHP表单header post get

    header 是服务器以HTTP协议到浏览器前所送出的字符串 在表头与HTML文件之间需要空出一行 $_POST   $_GET 必须要有method="post" 上传文件类表单 ...

  4. 后台接收URL地址的参数

    其实很简单,只是写一下加强记忆 后台接收URL传递过来的参数有两种方法: 第一种用request接收 HttpServletRequest request = ServletActionContext ...

  5. 规则“Windows Server 2003 FILESTREAM 修补程序检查” 失败。

    近期在客户环境搭建SQL故障转移群集,操作系统为SQL Server 2012R2,数据库版本为SQL Server2008 R2,在安装过程中遇到问题:没有安装Windows Server 2003 ...

  6. drupal字段值的规律

    field_abc,则会出现field_data_field_abc这样一个表,然后有entity_id这个字段,然后有field_abc_value或者field_abc_target_id,或者f ...

  7. Pyinstaller打包Selenium脚本为exe文件执行问题

    由于同事辞职,许多运维工具的维护工作就交到我这里处理了,运维居然没人会Python脚本! 用Selenium编写的一个爬虫脚本cctv.py,需要给不懂软件的人运行.为了不让他去搭建,安装各种包,库, ...

  8. JavaScript实现输入验证（简单的用户注册）

    1.先写用户注册页面userrAdd.jsp <body> <center> <form name="f1" id="f1" ac ...

  9. 网站过滤器Filter

    实际上,Filter与Servlet及其相似,区别只是FIlter的doFilter()方法里多了一个FilterChain的参数,通过该参数可以控制是否放行用户的请求.网站有了过滤器十分的方便,可以 ...

  10. sql server 维护计划与作业关系区别

    sql server 维护计划与作业关系区别 对于二者的区别,你可以把维护计划看作是针对数据库进行维护的作业模板.自定义作业具有更广泛的用途,当然,也具有更复杂的操作.所以,如果 仅仅是做个数据库优化 ...