实现的功能有Table表格添加，删除。输入，删除的全选，单行删除。

HTML代码部分

<body>

<form>

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

        <tr>

            <td><center><strong>编号</strong></center></td>

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

        </tr>

        <tr>

            <td><center><strong>姓名</strong></center></td>

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

        </tr>

        <tr>

            <td><center><strong>密码</strong></center></td>

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

        </tr>

        <tr>

            <td><center><strong>邮箱</strong></center></td>

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

        </tr>

        <tr>

            <td colspan="2">

                <center>

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

                    <input type="button" value="添加" onClick="add()">

                </center>

            </td>

        </tr>

    </table>

</form>

    <hr>

    <table border="1" width="400" align="center">

        <thead>

            <tr>

                <td>

                    <center>

                    <input type="checkbox" name="all" onClick="checkall()">

                    <input type="button" onClick="del()" value="删除">

                    </center>

                </td>

                <td><center><strong>编号</strong></center></td>

                <td><center><strong>姓名</strong></center></td>

                <td><center><strong>密码</strong></center></td>

                <td><center><strong>邮箱</strong></center></td>

            </tr>

        </thead>

        <tbody id="list">

        </tbody>

    </table>

</body>

JavaScript部分

    <script type="text/javascript">

        function add(){

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

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

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

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

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

            tr.setAttribute("align","center");

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

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

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

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

            input.setAttribute("onClick","selectItem()");

            td0.appendChild(input);

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

            td1.innerHTML=id;

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

            td2.innerHTML=name;

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

            td3.innerHTML=pass;

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

            td4.innerHTML=address;

            tr.appendChild(td0);

            tr.appendChild(td1);

            tr.appendChild(td2);

            tr.appendChild(td3);

            tr.appendChild(td4);

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

            tbody.appendChild(tr);

        }

        function checkall(){

            var inputall = document.getElementsByName("all")[0];

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

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

                inputarr[i].checked = inputall.checked;

            }

        }

        function selectItem(){

            var inputall = document.getElementsByName("all")[0];

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

            var sum = 0;

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

                if(inputarr[i].checked){

                    sum += 1;

                }

            }

            if(inputarr.length==sum){

                inputall.checked = true;

            }else{

            inputall.checked = false;

            }

        }

        function del(){

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

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

            for(var i=inputarr.length-1;i>=0;i--){

                if(inputarr[i].checked){

                    tbody.removeChild(inputarr[i].parentNode.parentNode);

                }

            }

        }

    </script>

用JavaScript写的动态表格的更多相关文章

  1. JavaScript操作DOM(动态表格处理)

    <html> <title>动态处理表格数据</title> <head> <script type="text/javascript& ...

  2. JavaScript写一个表格排序类

    依稀记得那是上个星期六的下午,我参加了网易暑期实习生招聘笔试.考得相当糟糕,编程题3个题通过了2个,简答题没做对,选择题貌似是20个题猜了6-7个,99%是挂了,唉唉唉!生活不只眼前的苟且,学习的脚步 ...

  3. JavaScript 创建动态表格

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

  4. JavaScript实现动态表格

    运行效果: 源代码: 1 <!DOCTYPE html> 2 <html lang="zh"> 3 <head> 4 <meta char ...

  5. jQuery动态表格插件 AppendGrid

    AppendGrid是一个jQuery动态表格插件,提供像填写电子表格数据一样在页面去输入结构化数据. 它允许用户在表格里增加/删除/插入/删除行,控制input/select/textarea 提交 ...

  6. 深入理解javascript中的动态集合——NodeList、HTMLCollection和NamedNodeMap

    × 目录 [1]NodeList [2]HTMLCollection [3]NamedNodeMap[4]注意事项 前面的话 一说起动态集合,多数人可能都有所了解.但是,如果再深入些,有哪些动态集合, ...

  7. 5.11-5.15javascript制作动态表格

    制作动态表格的主要是运用js中表格类的insertRow.insertCell简易添加行和列的代码,不过要注意每行添加的表格是有位置行编号的,每行的编号为rows.length-1,增加的表格内的标签 ...

  8. Vue+Element的动态表单，动态表格（后端发送配置，前端动态生成）

    Vue+Element的动态表单,动态表格(后端发送配置,前端动态生成) 动态表单生成 ElementUI官网引导 Element表单生成 Element动态增减表单,在线代码 关键配置 templa ...

  9. jQuery的下面是动态表格动态表单中的HTML代码

    动态表格动态表单中的Jquery代码 <script type="text/javascript" src="/include/jquery/jquery-1.1. ...

随机推荐

  1. RNA测序研究现状与发展

    RNA测序研究现状与发展 1 2,584 A+ 所属分类:Transcriptomics   收  藏 通常来说,某一个物种体内所有细胞里含有的DNA都应该是一模一样的,只是因为每一种细胞里所表达的R ...

  2. python 字典遍历

    dic1={"name":"kxb","age":28}for k,v in dic1.items(): print(k+",,, ...

  3. ros pluginlib 段错误

    最近在重新回看ROS插件时,运行出现了段错误,发现是boost版本问题,我目前版本是1.66,应该调整至1.58版本,如果跟其他软件使用不同的boost版本时,可以把相应版本编译到本地,不instal ...

  4. The Django Book第七章(表单)

    从Request对象中获取数据 在views函数里．我们常常写到 from django.http import HttpResponse def hello(request): return Htt ...

  5. DHT

    DHT(Distributed Hash Table,分布式哈希表)类似Tracker的根据种子特征码返回种子信息的网络.DHT全称叫分布式哈希表(Distributed Hash Table),是一 ...

  6. 【C#】解析C#程序集的加载和反射

    目录结构: contents structure [+] 程序集 程序集的加载 发现程序集中的类型 反射对类型成员的常规操作 发现类型的成员 创建类型的实例 绑定句柄减少进程的内存消耗 解析自定义特性 ...

  7. 绝对强大的三个linux指令： ar, nm, objdump

    前言如果普通编程不需要了解这些东西,如果想精确控制你的对象文件的格式或者你想查看一下文件对象里的内容以便作出某种判断,刚你可以看一下下面的工具:objdump, nm, ar.当然,本文不可能非常详细 ...

  8. linux_制作本地yum源

    新建文件夹 mkdir /root/guazai 并将本地磁盘挂载到当前文件夹 mount -o loop /dev/cdrom /root/guazai/ 新建文件夹 mkdir /mnt/loca ...

  9. R入门（二）-对象以及它们的模式和属性

    对象以及它们的模式和属性 R操作的实体在技术上说是对象.R的对象类型包括数值型,复数型,逻辑型,字符型和原味型. “原子”型对象:对象的元素都是一样的类型或模式,如逻辑向量和字符串向量. 列表对象:列 ...

  10. oracle数据库的迁移（从一台服务器到另一个台服务器，从oracle 10g到oracle 11g）

    这个过程呢,还是蛮艰难的.... 一.最初我使用的是Navicat中的数据传输来迁移的,虽说整个数据库的迁移没有成功,但传输指定的对象时还是传输成功了.所以还是记录一下吧. 1.前提连接好数据库.在指 ...