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 相关文章推荐
下载网站打开页面后间隔多少时间才显示下载链接地址的代码
Apr 25 Javascript
javascript:void(0)使用探讨
Aug 27 Javascript
JavaScript中的replace()方法使用详解
Jun 06 Javascript
javascript 动态样式添加的简单实现
Oct 11 Javascript
js实现颜色阶梯渐变效果(Gradient算法)
Mar 21 Javascript
微信小程序城市定位的实现实例(获取当前所在国家城市信息)
May 17 Javascript
微信小程序开发之实现自定义Toast弹框
Jun 08 Javascript
vue2.0 子组件改变props值,并向父组件传值的方法
Mar 01 Javascript
jQuery创建及操作xml格式数据示例
May 26 jQuery
浅谈layui 绑定form submit提交表单的注意事项
Oct 25 Javascript
VUEX 数据持久化,刷新后重新获取的例子
Nov 12 Javascript
前端vue+elementUI如何实现记住密码功能
Sep 20 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
PHP4实际应用经验篇(8)
2006/10/09 PHP
PHP mysql事务问题实例分析
2016/01/18 PHP
php生成图片缩略图功能示例
2017/02/22 PHP
Nginx下ThinkPHP5的配置方法详解
2017/08/01 PHP
php微信分享到朋友圈、QQ、朋友、微博
2019/02/18 PHP
Yii2框架加载css和js文件的方法分析
2019/05/25 PHP
php中的buffer缓冲区用法分析
2019/05/31 PHP
PHP简单实现图片格式转换(jpg转png,gif转png等)
2019/10/30 PHP
JavaScript 动态创建VML的方法
2009/10/14 Javascript
jquery制作弹窗提示窗口代码分享
2014/03/02 Javascript
jquery手风琴特效插件
2015/02/04 Javascript
jquery实现动态改变div宽度和高度
2015/05/08 Javascript
js判断某个字符出现的次数的简单实例
2016/06/03 Javascript
HTML页面定时跳转方法解析(2种任选)
2016/12/22 Javascript
JS中绑定事件顺序(事件冒泡与事件捕获区别)
2017/01/24 Javascript
浅谈vue.js中v-for循环渲染
2017/07/26 Javascript
JS禁止浏览器右键查看元素或按F12审查元素自动关闭页面示例代码
2017/09/07 Javascript
vue+SSM实现验证码功能
2018/12/07 Javascript
javascript设计模式 ? 命令模式原理与用法实例分析
2020/04/20 Javascript
Python爬取Coursera课程资源的详细过程
2014/11/04 Python
Python绘制3d螺旋曲线图实例代码
2017/12/20 Python
Python实现简易版的Web服务器(推荐)
2018/01/29 Python
对python append 与浅拷贝的实例讲解
2018/05/04 Python
python3 enum模块的应用实例详解
2019/08/12 Python
迷你唐卡软皮鞋:Minnetonka Moccasin
2018/05/01 全球购物
微软新西兰官方网站:Microsoft New Zealand
2018/08/17 全球购物
国际贸易专业个人求职信范文分享
2013/12/14 职场文书
开展批评与自我批评发言材料
2014/05/15 职场文书
班组长安全工作职责
2014/07/15 职场文书
群众路线剖析材料范文
2014/10/09 职场文书
学生违反校规检讨书
2014/10/28 职场文书
2015年党性分析材料
2014/12/19 职场文书
网络妈妈观后感
2015/06/08 职场文书
企业安全生产检查制度
2015/08/06 职场文书
三好学生主要事迹材料
2015/11/03 职场文书
日元符号 ¥
2022/02/17 杂记