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 相关文章推荐
js获取元素在浏览器中的绝对位置
Jul 24 Javascript
封装了一个js图片轮换效果的函数
Sep 28 Javascript
Ext JS添加子组件的误区探讨
Jun 28 Javascript
用JavaScript实现动画效果的方法
Jul 20 Javascript
详细解读AngularJS中的表单验证编程
Jun 19 Javascript
javascript入门教程基础篇
Nov 16 Javascript
Javascript在IE和Firefox浏览器常见兼容性问题总结
Aug 03 Javascript
angular实现图片懒加载实例代码
Jun 08 Javascript
Js判断H5上下滑动方向及滑动到顶部和底部判断的示例代码
Nov 15 Javascript
js中this对象用法分析
Jan 05 Javascript
vue非父子组件通信问题及解决方法
Jun 11 Javascript
vue移动端模态框(可传参)的实现
Nov 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
php下通过伪造http头破解防盗链的代码
2010/07/03 PHP
Zend Framework数据库操作方法实例总结
2016/12/11 PHP
用jquery来定位
2007/02/20 Javascript
javascript 写类方式之八
2009/07/05 Javascript
jQuery 处理表单元素的代码
2010/02/15 Javascript
Jquery动态替换div内容及动态展示的方法
2015/01/23 Javascript
javascript实现模拟时钟的方法
2015/05/13 Javascript
浅谈javascript中的call、apply、bind
2016/03/06 Javascript
webpack写jquery插件的环境配置
2017/12/21 jQuery
react脚手架如何配置less和ant按需加载的方法步骤
2018/11/28 Javascript
微信小程序下拉框搜索功能的实现方法
2019/07/31 Javascript
vue vant中picker组件的使用
2020/11/03 Javascript
Vue仿百度搜索功能
2020/12/28 Vue.js
[03:05]《我与DAC》之xiao8:DAC与BG
2018/03/27 DOTA
请不要重复犯我在学习Python和Linux系统上的错误
2016/12/12 Python
Pycharm学习教程(1) 定制外观
2017/05/02 Python
深入理解Python分布式爬虫原理
2017/11/23 Python
python实现协同过滤推荐算法完整代码示例
2017/12/15 Python
django的auth认证,authenticate和装饰器功能详解
2019/07/25 Python
tensorflow指定CPU与GPU运算的方法实现
2020/04/21 Python
python+opencv实现车道线检测
2021/02/19 Python
HTML5之SVG 2D入门8—文档结构及相关元素总结
2013/01/30 HTML / CSS
美国职棒大联盟官方网上商店:MLBShop.com
2017/11/12 全球购物
泰国Robinson百货官网:购买知名品牌的商品
2020/02/08 全球购物
中间件的定义
2016/08/09 面试题
入党申请书自我鉴定
2013/10/12 职场文书
实习单位推荐信范文
2013/11/27 职场文书
中国梦我的梦演讲稿
2014/04/23 职场文书
舞蹈专业求职信
2014/06/13 职场文书
求职教师自荐书
2014/06/19 职场文书
2015年妇女工作总结
2015/05/14 职场文书
亮剑观后感
2015/06/05 职场文书
导游词之唐山景点
2019/12/18 职场文书
css3 利用transform-origin 实现圆点分布在大圆上布局及旋转特效
2021/04/29 HTML / CSS
零基础学java之方法的定义与调用详解
2022/04/10 Java/Android
Python万能模板案例之matplotlib绘制直方图的基本配置
2022/04/13 Python