JScript实现表格的简单操作


Posted in Javascript onAugust 15, 2017

本文实例为大家分享了JScript实现表格的简单操作,供大家参考,具体内容如下

实现思路:

1、添加时:获取当前列表的行数,在当前一行添加下一行;
2、用insertCell()方法添加一行,下标从0开始,
3、若要给新一行添加类型、响应事件,就用setAttribute()方法,类似于键值对,并用appendChild()方法将数据保存到新一行
4、删除时:获取需要删除行的当前行数this,然后获取父节点,把整一行删掉remove(),而不是单单删除某一行的单个数据
5、修改时:获取当前修改行的行数索引,点击修改时,把表格状态转换为文本格式,并把“修改”改为“确定”

实现代码:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title></title>
    <style>
      table{
        border-top: 1px solid #ccc;
        border-left: 1px solid #ccc;
        width: 400px;
      }
      td,th{
        border-right:1px solid #ccc ;
        border-bottom: 1px solid #ccc;
      }
    </style>
    <script>
      function add(){
        var table = document.getElementById("order");
        var index = table.rows.length;//表格行数
        var row = table.insertRow(index);//插入一个行并返回新一行


        var c0 = row.insertCell(0);
        var b0 = document.createElement("input");
        b0.setAttribute("type","checkbox");
        b0.setAttribute("onclick","seclect("+index+")");
        b0.setAttribute("name","sel");
        c0.appendChild(b0);

        var c1 = row.insertCell(1);//在新一行插入一列,并返回新一列
        c1.innerHTML = prompt("请输入商品名称","");

        var c2 = row.insertCell(2);//在新一行插入一列,并返回新一列
        c2.innerHTML = prompt("输入数量","");

        var c3 = row.insertCell(3);//在新一行插入一列,并返回新一列
        c3.innerHTML = prompt("输入价格","");

        var c4 = row.insertCell(4);
        var b1 = document.createElement("input");
        b1.setAttribute("type","button");
        b1.setAttribute("value","删除");
        b1.setAttribute("onclick","del(this)");

        var b2 = document.createElement("input");//创建按钮
        b2.setAttribute("type","button");
        b2.setAttribute("value","修改");
        b2.setAttribute("style","margin-left: 5px");
        b2.setAttribute("onclick","update("+index+")");

        c4.appendChild(b1);//把按钮添加到操作的单元格中
        c4.appendChild(b2);
      }

      function del(but){
        //var table = document.getElementById("order");
        but.parentNode.parentNode.remove();//根据节点的层级关系删除行
      }

      function update(index){
        var table = document.getElementById("order");
        //获得修改按钮
        var cell=table.rows[index].cells[4];

        cell.lastChild.setAttribute("value","确定");
        //为按钮重新绑定事件
        cell.lastChild.setAttribute("onclick","edit("+index+")");

        //修改数量
        var cellNumer = table.rows[index].cells[2];
        var txt = document.createElement("input"); //创建一个文本框
        txt.setAttribute("value",cellNumer.innerHTML);//设置文本框的值
        txt.setAttribute("size",5);//文本框长度
        cellNumer.innerHTML = "";//把单元格的数据清除
        cellNumer.appendChild(txt); //把文本框加入到单元格
      }

      function edit(index){
        var table = document.getElementById("order");

        var cell = table.rows[index].cells[4];

        cell.lastChild.setAttribute("value","修改");
        cell.lastChild.setAttribute("onclick","update("+index+")");

        //把单元格中的文本框删除
        var cellNumer = table.rows[index].cells[2];
        var num = cellNumer.firstChild.value;//取文本框的值
        cellNumer.removeChild(cellNumer.firstChild);//删除文本框
        cellNumer.innerHTML = num;
      }

      function allSelect(ch){
        var item = document.getElementsByTagName("input"); //取所有的input标签
        for(var i=0;i<item.length;i++){ //循环每一个
          if(item[i].type==ch.type){ //判断每一个标签的类型是否为CheckBox
            item[i].checked = ch.checked; //复选框的选中与全选的复选框选中相同
          }
        }

      }
      function seclect(sh){
        var item = document.getElementsByName("sel"); 
        var all = document.getElementById("all");
        var tag = true;
        for(var i=0;i<item.length;i++){//判断是否全部选中
          if(item[i].checked == false){
            tag = false;
            break;
          }
        }
        all.checked = tag;
      }
    </script>
  </head>
  <body>
    <center>
      <table id="order" >
        <tr>
          <th>
            <input type="checkbox" onclick="allSelect(this)" id="all"/>全选
          </th>
            <th>商品名称</th>
            <th>数量</th>
            <th>单价</th>
            <th>操作</th>
          </tr>
        <tr>
          <td><input type="checkbox" onclick="seclect(this)" name="sel"/></td>
          <td>娃哈哈</td>
          <td>10</td>
          <td>2</td>
          <td><input value="删除" type="button" onclick="del(this)"style="margin-right:5px ;"/><input value="修改" type="button" onclick="update(1)"/></td>
        </tr>

      </table>
      <button onclick="add()">添加商品</button>
    </center>
  </body>
</html>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript css在IE和Firefox中区别分析
Feb 18 Javascript
JS 有名函数表达式全面解析
Mar 19 Javascript
js给页面加style无效果的解决方法
Jan 20 Javascript
JavaScript中的公有、私有、特权和静态成员用法分析
Nov 20 Javascript
JavaScript函数节流概念与用法实例详解
Jun 20 Javascript
微信小程序 数据遍历的实现
Apr 05 Javascript
微信小程序的生命周期的详解
Oct 19 Javascript
vue.js图片转Base64上传图片并预览的实现方法
Aug 02 Javascript
一看就会的vuex实现登录验证(附案例)
Jan 09 Javascript
JS一次前端面试经历记录
Mar 19 Javascript
利用Vue的v-for和v-bind实现列表颜色切换
Jul 17 Javascript
js+canvas实现刮刮奖功能
Sep 13 Javascript
AngularJS日程表案例详解
Aug 15 #Javascript
jQuery实现菜单栏导航效果
Aug 15 #jQuery
js实现网页的两个input标签内的数值加减(示例代码)
Aug 15 #Javascript
JScript实现地址选择功能
Aug 15 #Javascript
jQuery实现腾讯信用界面(自制刻度尺)样式
Aug 15 #jQuery
关于vue.js发布后路径引用的问题解决
Aug 15 #Javascript
JavaScript中使用Async实现异步控制
Aug 15 #Javascript
You might like
smarty中js的调用方法示例
2014/10/27 PHP
Mootools 1.2教程 正则表达式
2009/09/15 Javascript
再论Javascript下字符串连接的性能
2011/03/05 Javascript
深入理解JavaScript系列(7) S.O.L.I.D五大原则之开闭原则OCP
2012/01/15 Javascript
提高javascript效率 一次判断,而不要次次判断
2012/03/30 Javascript
JavaScript打印iframe内容示例代码
2013/08/20 Javascript
IE网页js语法错误2行字符1、FF中正常的解决方法
2013/09/09 Javascript
javascript进行数组追加方法小结
2014/06/16 Javascript
JavaScript中使用Object.create()创建对象介绍
2014/12/30 Javascript
js实现背景图片感应鼠标变化的方法
2015/02/28 Javascript
浅谈JSON.parse()和JSON.stringify()
2015/07/14 Javascript
分享javascript、jquery实用代码段
2016/10/20 Javascript
Bootstrap图片轮播效果详解
2017/10/17 Javascript
vue实现仿淘宝结账页面实例代码
2017/11/08 Javascript
vue下拉列表功能实例代码
2018/04/08 Javascript
jquery获取file表单选择文件的路径、名字、大小、类型
2019/01/18 jQuery
vue使用nprogress实现进度条
2019/12/09 Javascript
windows下python模拟鼠标点击和键盘输示例
2014/02/28 Python
Django如何实现内容缓存示例详解
2017/09/24 Python
python 矩阵增加一行或一列的实例
2018/04/04 Python
更换Django默认的模板引擎为jinja2的实现方法
2018/05/28 Python
python通过zabbix api获取主机
2018/09/17 Python
python分别打包出32位和64位应用程序
2020/02/18 Python
详解python logging日志传输
2020/07/01 Python
6种非常炫酷的CSS3按钮边框动画特效
2016/03/16 HTML / CSS
三星加拿大官方网上商店:Samsung CA
2020/12/18 全球购物
在数据文件自动增长时,自动增长是否会阻塞对文件的更新
2014/05/01 面试题
管道维修工岗位职责
2013/12/27 职场文书
正科级干部考察材料
2014/05/29 职场文书
2014年社区妇联工作总结
2014/12/02 职场文书
行政助理岗位职责
2015/02/10 职场文书
十八大观后感
2015/06/12 职场文书
小学生优秀作文范文(六篇)
2019/07/10 职场文书
SpringBoot整合阿里云视频点播的过程详解
2021/12/06 Java/Android
Python实现归一化算法详情
2022/03/18 Python
Python时间操作之pytz模块使用详解
2022/06/14 Python