<!DOCTYPE>

 <html>

 <head>

 <meta charset=utf-8 />

 <title>动态表格</title>

 <!-- 增加表格头的样式   -->

 <style type="text/css">

         #list th{

             background-color:#06F;

             }

 </style>

 </head>  

 <body>

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

     <thead>

       <!-- 创建表格头 -->

     <tr id="list">

         <th>选中</th>

         <th>编号</th>

         <th>姓名</th>

         <th>密码</th>

         <th>年龄</th>

         <th>地址</th>

         <th>操作</th>

     </tr>

        <!-- 添加全部删除按钮， -->

     <tr>

         <td ><input type="checkbox" onclick="checkAll(this)" /></td>

         <td colspan="6" ><a href="javascript:void(0)" onclick="delAll()">全部删除</a></td>

     </tr>

     </thead>

     <tbody id="listbody"></tbody>

 </table>

  <!-- 用于画一个横线 -->

 <hr/>

   <!-- 创建form表单  -->

 <form >

     <table align="center" border="1" width="300px">

         <tr>

             <th >编号</th>

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

         </tr>

         <tr>

             <th>姓名</th>

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

         </th>

         <tr>

             <th>密码</th>

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

         </tr>

         <tr>

             <th>年龄</th>

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

         </tr>

         <tr>

             <th>住址</th>

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

         </tr>

         <tr>

             <td colspan="2" align="center">

                 <input type="reset" value="重置" align="center" />

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

             </td>

         </tr>  

     </table>  

 </form>  

 </body>

 <script type="text/javascript">

     function addlist(){

         //获取用户输入

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

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

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

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

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

         //在上面的列表中添加一行，把内容放在该行1

         /*

          <tr>

             <td><input type="checkbox" name="item"/></td>

             <td>1</td>

             <td>张三</td>

             <td>123456</td>

             <td>20</td>

             <td>广州天河</td>

             <td><a href="javascript:void(0)" onclick="delOne(this)">删除</a></td>

                 javascript:void(0): 相当于让href属性失效！！

         </tr>

         */

         //创建一个tr

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

         //创建td

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

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

         input.setAttribute("type","checkbox");

         input.setAttribute("name","item");

         td1.appendChild(input);  

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

         td2.innerHTML = id;  

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

         td3.innerHTML = name;  

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

         td4.innerHTML = pass;  

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

         td5.innerHTML = age;  

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

         td6.innerHTML = address;  

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

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

         a.setAttribute("href","javascript:void(0)");//相当于让href属性失效！

         a.setAttribute("onclick","delone(this)")

         a.innerHTML = "删除";

         td7.appendChild(a);

         //将创建的td添加到tr中

         tr.appendChild(td1);

         tr.appendChild(td2);

         tr.appendChild(td3);

         tr.appendChild(td4);

         tr.appendChild(td5);

         tr.appendChild(td6);

         tr.appendChild(td7);

         //使用appendChild（tr）方法，将tr添加到listbody中

         //其中获取的listbody是要将表格添加的位置的id

         var listbody = document.getElementById("listbody");

         listbody.appendChild(tr);  

         }

         //删除单行

         function delone(d){

             var tr = d.parentNode.parentNode;

             var listbody  = document.getElementById("listbody");

             listbody.removeChild(tr);  

             }

             //全选  

             function checkAll(c){

                 //得到全选按钮的状态

                 var status = c.checked;

                 //得到name=item的标签

                 var items = document.getElementsByName("item");

                 for(var i=0;i<items.length;i++){

                     //将全选按钮的状态给所有的items

                     items[i].checked=status;  

                     }

                 }

                 //删除选中部分，注意变量，每删除一个，要将变量减一，否则，将导致变量溢出，浏览器死机

         function delAll(){  

             var list = document.getElementById("listbody");

             //拿到所有的item

             var items = document.getElementsByName("item");

             for(var j=0;j<items.length;j++){  

                 if(items[j].checked)//如果item被选中

                 {  

                     var tr = items[j].parentNode.parentNode;

                     list.removeChild(tr);

                     j--;

                 }

             }

             }  

 </script>

 </html>

JS创建表格完整的更多相关文章

  1. 如何用js创建表格？

    1.用js创建表格 <script> function createTable(){ //创建表格 //创建对象 //window下面的属性方法可以把window去掉或者写上 var ta ...

  2. js创建表格

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

  3. 使用JS创建表格以及隔行换色（包括隔N行换色）

    <html> <head> <title></title> <style> table{ width:800px; border-colla ...

  4. js创建table表格

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

  5. js/jq动态创建表格的行与列

    之前做了一个项目,需求是能动态创建表格行,动态创建表格的列,度了很多资料,都没有动态创建列的插件,所以自己动手写了一个 需求大概是(下图) 1.动态添加一行.2.动态添加一列,3.删除行.4.删除列, ...

  6. js动态创建表格,删除行列的小例子

    js动态创建表格,删除行列的实例代码. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" &quo ...

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

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

  8. js如何动态创建表格（两种方法）

    js如何动态创建表格(两种方法) 一.总结 一句话总结: 1.方法一:写好创建表格的html代码,将之赋值给div的innerHTML. 2.方法二.直接用创建好的table元素的方法insertRo ...

  9. 一段完整的创建表格的SQL代码

    一段完整的创建表格的SQL代码 使用SQL语句创建一张表,不仅可以可以快速熟悉SQL语句,还可以从这看出一个人对该技能点的熟悉程度. 这里先说明几点: PRIMARY KEY:主键,一张表中只允许有一 ...

随机推荐

  1. JDK中主要包的介绍

    java.lang——包含一些Java语言的核心类,如String.Math.Integer.System和Thread,提供常用功能.java.net——包含执行与网络相关的操作的类和接口.java ...

  2. 《剑指offer》面试题21 包含min函数的栈 Java版

    (min函数的作用是返回栈内最小值) 首先这个栈要具有普通栈所具有的push()和pop()方法,那么内部一定包含一个Stack.至于还要能实现min函数,而且还是在O(1)时间复杂度内,我们不得不考 ...

  3. 洛谷 P1073 最优贸易 & [NOIP2009提高组]（反向最短路）

    传送门 解题思路 很长的题,实际上在一个有向图(点有点权)中求一个从起点1到终点n的路径,使得这条路径上点权最大的点与点权最小的点的差值最大(要求必须从点权较小的点能够走到点权较大的点). ——最短路 ...

  4. 【数据库运维】数据库（server）的时区设置及世界主要地区的时区

    [时区设置不当会有什么问题] 当进行海外项目运维的时候,常常会遇到时区设置的问题.假设时区设置不当 或者 同样项目的server之间的时区不一致,都会有导致项目的数据异常的风险. 假设数据表的字段使用 ...

  5. git Windows终端安装教程

    1.下载网址:https://gitforwindows.org/ 2.双击压缩包出现: 3.点击下一步后,选择安装路径: 根据自己的需求选择路径 4.选择安装的组件,建议全选 [每一条解析:] Ad ...

  6. MongoDB的使用学习之（一）开篇

    本人是菜鸟-1级,整理这个系列,之所以用整理,而不是写,是因为本人不是从头自己读源码,一个一个字母翻译过来的,而是记录整个学习过程,查看别人好的文章,收集好的资料,并有自己的一些项目代码,并从中得到点 ...

  7. Python之列表、元组、字典、集合及字符串的详细使用

    1.列表 列表相当与C++中的数组,是有序的项目, 通过索引进行查找,但使用起来却方便很多,具体的操作看代码,自己实践一次就非常简单了. 注:列表一般用中括号“[ ]” #列表(数组) name_li ...

  8. PyCharm使用技巧总结

    PyCharm高频使用快捷键 快速修复:ALT + ENTER 搜索: 双击Shif 垂直分隔窗口: ALT + V 另起一行: SHIFT + ENTER 删除当前插入符所在的行: Ctrl + Y ...

  9. hdu 4625 Dice（概率DP）

    Dice Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/65536 K (Java/Others) Total Submi ...

  10. ffmpeg windows下编译安装

    安装msys2 更新源使下载速度更快 进入msys64/etc/pacman.d/目录中,分别在三个文件中增加mirrorlist.mingw32Server = http://mirrors.ust ...