<!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-mysql操作存储过程

    java代码: @RequestMapping(value = "/testProcedure", method = RequestMethod.GET) public @Resp ...

  2. python画图

    正弦图像: #coding:utf-8import numpy as npimport matplotlib.pyplot as pltx=np.linspace(0,10,1000)y=np.sin ...

  3. 撤销git reset soft head操作

    一不小心在eclipse的git库中执行了Reset Soft(HEAD ONLY)操作,不料界面中竟然没有找到撤销方法(于是心中五味俱全,经过一番折腾,无果还是回归Git本身),最终通过命令行,很快 ...

  4. 网易云音乐PC端刷曲快捷键

    文章首发于szhshp的第三边境研究所(szhshp.org), 转载请注明 网易云音乐PC端刷曲快捷键   好吧我承认我特别懒 云音乐其实做的还不错,FM推荐的算法明显比虾米好. 虾米可以听的曲子都 ...

  5. AngularJS的$watch用法

    $watch简单使用 $watch是一个scope函数,用于监听模型变化,当你的模型部分发生变化时它会通知你. $watch(watchExpression, listener, objectEqua ...

  6. 四种主要网络IO虚拟化模型

    本文主要为大家简要介绍VMware.Redhat.Citrix.Microsoft主要虚拟化厂商使用的4种主要的虚拟化IO模型 (emulation.para-virtualization.pass- ...

  7. jquery 基础-Ajax应用

    使用load()方案异步请求数据 调用格式:load(url,[data],[callback]) 参数url为加载服务器地址,可选项data参数为请求时发送的数据,callback参数为数据请求成功 ...

  8. 简述alert和console.log的区别

    生活中还是得有发现美好和差别的眼睛~~ 学习前端那么久既然还不知道alert和console.log的差别~~~~ 蓝瘦,香菇~~~ 本菜鸟一直以为alert和console.log其实是一样的用法, ...

  9. 2016年2月16日开始，每天一篇，记录学习心得，【基本技能篇】>>开篇《如何阅读一本书——心得》

    如何阅读一本书——心得 ——2016年2月12日 要达到阅读的所有目的,就必须在阅读不同书籍的时候,运用适当的不同速度.读的太快或太慢,都一无所获. 四个阅读层次:①基础阅读,具有基本阅读的能力,包括 ...

  10. centOS 6.7 中安装matlab R2014b

    参考资料: [1] http://www.centoscn.com/image-text/config/2014/1222/4354.html 系统: centOS 6.7 2.6.32-573.el ...