创建动态表格

1.1

 <!DOCTYPE html>

 <html>

     <head>

         <meta charset="UTF-8">

         <title>TABLE01</title>

         <script type="text/javascript">

            function add() {

                var t = document.getElementById("tab");

                        var r = t.insertRow();

                       var c1 = r.insertCell();

                       var c2 = r.insertCell();

                       var c3 = r.insertCell();

                       c1.innerHTML ="<input type='text'>";

                       c2.innerHTML ="<input type='text'>";

                       c3.innerHTML = "<button onclick='del(this)' > - </button>";

            }

            function del(obj){

                var d = obj.parentNode.parentNode;

                d.parentNode.removeChild(d);

            }

         </script>

     </head>

     <body>

         <table border="1" cellpadding="0" cellspacing="2" id="tab">

             <tr>

                 <td width="150px" height="20px"> 编号 </td>

                 <td width="150px" height="20px"> 内容 </td>

                 <td width="38px" height="20px"> 删除 </td>

             </tr>

         </table>

         <button onclick="add()" > + </button>

     </body>

 </html>

1.2

 <!DOCTYPE html>

 <html>

     <head>

         <meta charset="UTF-8">

         <title>JS创建动态表格</title>

         <script type="text/javascript">

             function delrow(obj){

                 var tr = obj.parentNode.parentNode;

                 var table = document.getElementById("mytable");

                 table.deleteRow(tr.rowIndex);

             }

             var count=2;

             function addrow(){

                 var table = document.getElementById("mytable");

                 var tr = table.insertRow();  //插入一个新的  行

                 var td1 = tr.insertCell();      //插入一个新的  列

                 var td2 = tr.insertCell();

                 var td3 = tr.insertCell();

                 td1.innerHTML=count+"<input type='text'></input>";

                 td2.innerHTML="<input type='text'></input>";

                 td3.innerHTML="<input type ='button' value=' - ' onclick='delrow(this)'></input>";

                 count++;

             }

         </script>

     </head>

     <body>

         <table id = "mytable" border="1">

             <tr>

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

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

                 <td><input type ="button" value=" - " onclick="delrow(this)"></input></td>

             </tr>

         </table>

         <input type ="button" value=" + " onclick="addrow()"></input>

     </body>

 </html>

创建动态表格，添加内容

2.1

 <!DOCTYPE html>

 <html>

     <head>

         <meta charset="UTF-8">

         <title>TABLE02</title>

         <script type="text/javascript">

             function add(){

                 var name=document.getElementById("name").value;

                 var txt =document.getElementById("txt").value;

                 var t = document.getElementById("tab");

                    var r = t.insertRow();

                   var c1 = r.insertCell();

                   c1.innerHTML=name;

                   var c2 = r.insertCell();

                   c2.innerHTML=txt;

             }

         </script>

     </head>

     <body>

     <div align="center">

         <form action="#" method="post" >

             姓名: <input type="text" id="name">

             内容: <input type="text" id="txt" />

             <input type="button" value="添加" align="center" onclick="add()"/>

             <input type="reset" value="重置">

         </form>

         <br/>

         <table id="tab" border="1" align="center" width="500PX">

         </table>

     </div>

     </body>

 </html>

2.2

 <!DOCTYPE html>

 <html>

     <head>

     <meta charset="UTF-8">

     <title>JS 创建动态表格传值</title>

     <script type="text/javascript">

         function addrow(){

             var name = document.getElementById("name").value;

             var num = document.getElementById("num").value;

             var table=document.getElementById("mytable");

             var tbody=document.createElement("tbody");

             var tr=document.createElement("tr");

             var td_name=document.createElement("td");

             var td_num=document.createElement("td");

             td_name.appendChild(document.createTextNode(name))

             td_num.appendChild(document.createTextNode(num))

             tr.appendChild(td_name);

             tr.appendChild(td_num);

             tbody.appendChild(tr);

             table.appendChild(tbody);

         }

     </script>

     </head>

     <body>

         姓名<input type="text" id="name">

         编号<input type="text" id="num"><br/>

         <input type="button" value="增加" onclick="addrow()">

         <table id="mytable" border="1" >

             <tr>

                 <td>姓名</td>

                 <td>编号</td>

             </tr>

         </table>

     </body>

 </html>

JS 创建动态表格练习的更多相关文章

  1. js创建table表格

    //js创建table表格var tr;var cell;for(var i=0;i<10;i++){ //创建一个tr tr=document.createElement('tr'); doc ...

  2. 【ASP.NET Web API教程】2.3.5 用Knockout.js创建动态UI

    原文:[ASP.NET Web API教程]2.3.5 用Knockout.js创建动态UI 注:本文是[ASP.NET Web API系列教程]的一部分,如果您是第一次看本博客文章,请先看前面的内容 ...

  3. JavaScript 创建动态表格

    JavaScript 创建动态表格 版权声明:未经授权,严禁转载! 案例代码 <div id="data"></div> <script> va ...

  4. JQuery Easyui/TopJUI 用JS创建数据表格并实现增删改查功能

    JQuery Easyui/TopJUI 用JS创建数据表格并实现增删改查功能 html <table id="productDg"></table> &l ...

  5. js的动态表格的增删改查思路

    1. 首先我们要知道,动态添加,肯定不是 在页面上写死得,而是通过js调用循环放入到页面上的,我们在写动态表格的时候不要先着急写,我们第一步要做的就是构思,要把自己的逻辑先弄清楚,不然的话,前面是好写 ...

  6. JS做动态表格

    在后台将数据发送过来后,你需要将这些数据做成表格,实现一般表格管理功能 例如这种数据格式, 首先要创建table 在table中添加thead  在thead中添加tr 循环数组,且创建开头的inpu ...

  7. js的动态表格的增删改查完整代码

    <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...

  8. js创建表格

    js创建一个表格,其中的表头已经有了,要从json中读取的数据一行一行地创建表格 function create_table(data){ tableNode = document.getElemen ...

  9. Java利用poi生成word(包含插入图片，动态表格，行合并)

    转(小改): Java利用poi生成word(包含插入图片,动态表格,行合并) 2018年12月20日 09:06:51 wjw_11093010 阅读数:70 Java利用poi生成word(包含插 ...

随机推荐

  1. Oracle数据库SQL语句的分类

    1986年10月,美国国家标准协会对SQL进行规范后,以此作为关系式数据库管理系统的标准语言,1987年在国际标准组织的支持下成为国际标准.不过各种通行的数据库系统其实在实践过程中都对SQL规范的作了 ...

  2. OSI模型——传输层

    OSI模型——传输层 运输层 运输层概述 运输层提供应用层端到端通信服务,通俗的讲,两个主机通讯,也就是应用层上的进程之间的通信,也就是转换为进程和进程之间的通信了,我们之前学到网络层,IP协议能将分 ...

  3. 漫漫人生路,我们该何去何从! Python让我找到了方向

    互联网寒冬 2017年冬天,是我人生中最难熬的一个冬天,其实2017年的冬天并不算太冷,比这冬日的寒风还要严寒的要属这所谓的"互联网寒冬"吧!各大厂裁员的消息充斥着互联网,互联网表 ...

  4. 使用OFBIZ的理由和不使用OFBIZ的理由

    1 使用OFBIZ的理由 1.1 什么是OFBIZ OFBIZ是由Sourceforge维护的一个最著名的开源项目之一,提供创建基于最新J2EE/XML规范和技术标准,构建大型企业级.跨平台.跨数据库 ...

  5. 12、前端知识点--MVVM模式

    1.MVVM与MVC的区别是什么? 在MVC里,View是可以直接访问Model的!从而,View里会包含Model信息,不可避免的还要包括一些业务逻辑. MVC模型关注的是Model的不变,所以,在 ...

  6. win32 socket 编程（三）——TCP/IP

    一.TCP/IP解析 TCP/IP协议的核心部分是传输层协议(TCP.UDP),网络层协议(IP)和物理接口层,这三层通常是在操作系统内核中实现.因此用户一般不涉及.编程时,编程界面有两种形式: 1. ...

  7. 01. Linux-Kali系统网卡配置

    配置网卡操作: vim /etc/network/interfaces auto eth0iface eth0 inet static 配置eth0使用默认的静态地址address 192.168.1 ...

  8. Nginx 的总结

    目录 Nginx 的产生 Nginx 的用武之地 Web 服务器对比 Nginx 的产生 Nginx 同 Apache 一样都是一种 Web 服务器.基于 REST 架构风格,以统一资源描述符(Uni ...

  9. [APIO2009]抢掠计划（Tarjan，SPFA）

    [APIO2009]抢掠计划 题目描述 Siruseri 城中的道路都是单向的.不同的道路由路口连接.按照法律的规定, 在每个路口都设立了一个 Siruseri 银行的 ATM 取款机.令人奇怪的是, ...

  10. 2018-10-10-weekly

    Algorithm 字典序排数 What 给定一个整数n,返回从1到n的字典顺序,例如,给定 n =13,返回 [1,10,11,12,13,2,3,4,5,6,7,8,9] ,尽可能的优化算法的时间 ...