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 相关文章推荐
超级强大的表单验证
Jun 26 Javascript
基于jquery的tab切换 js原理
Apr 01 Javascript
两个listbox实现选项的添加删除和搜索
Mar 01 Javascript
Jquery模仿Baidu、Google搜索时自动补充搜索结果提示
Dec 26 Javascript
如何编写高质量JS代码
Dec 28 Javascript
jQuery实现点击按钮弹出可关闭层的浮动层插件
Sep 19 Javascript
jQuery实现的文字hover颜色渐变效果实例
Feb 20 Javascript
DropDownList实现可输入可选择(两种版本可选)
Dec 07 Javascript
微信小程序 登录实例详解
Jan 16 Javascript
Vue中 key keep-alive的实现原理
Sep 18 Javascript
微信小程序中weui用法解析
Oct 21 Javascript
微信小程序选择图片控件
Jan 19 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+xslt在windows平台上
2006/10/09 PHP
一篇不错的PHP基础学习笔记
2007/03/18 PHP
ThinkPHP使用UTFWry地址库进行IP定位实例
2014/04/01 PHP
php实现两个数组相加的方法
2015/02/17 PHP
php实现购物车功能(以大苹果购物网为例)
2017/03/09 PHP
Laravel框架分页实现方法分析
2018/06/12 PHP
php 提交表单 关闭layer弹窗iframe的实例讲解
2018/08/20 PHP
JavaScript高级程序设计 客户端存储学习笔记
2011/09/10 Javascript
jQuery筛选器children()案例详解(图文)
2013/02/17 Javascript
js图片自动切换效果处理代码
2013/05/07 Javascript
对于this和$(this)的个人理解
2013/09/08 Javascript
jquery仿搜索自动联想功能代码
2014/05/23 Javascript
Node.js中使用Log.io在浏览器中实时监控日志(等同tail -f命令)
2014/09/17 Javascript
JQuery调用绑定click事件的3种写法
2015/03/28 Javascript
Node.js对MongoDB数据库实现模糊查询的方法
2017/05/03 Javascript
react native实现往服务器上传网络图片的实例
2017/08/07 Javascript
React BootStrap用户体验框架快速上手
2018/03/06 Javascript
微信小程序商品详情页的底部弹出框效果
2020/11/16 Javascript
详解webpack+ES6+Sass搭建多页面应用
2018/11/05 Javascript
js图数据结构处理 迪杰斯特拉算法代码实例
2019/09/11 Javascript
js实现简易计算器功能
2019/10/18 Javascript
angular8和ngrx8结合使用的步骤介绍
2019/12/01 Javascript
[43:33]EG vs Spirit Supermajor 败者组 BO3 第一场 6.4
2018/06/05 DOTA
[41:52]DOTA2-DPC中国联赛 正赛 CDEC vs Dynasty BO3 第二场 2月22日
2021/03/11 DOTA
Python tkinter模块中类继承的三种方式分析
2017/08/08 Python
Django中如何防范CSRF跨站点请求伪造攻击的实现
2019/04/28 Python
python基于pdfminer库提取pdf文字代码实例
2019/08/15 Python
Python任务自动化工具tox使用教程
2020/03/17 Python
Python操作Jira库常用方法解析
2020/04/10 Python
python 引用传递和值传递详解(实参,形参)
2020/06/05 Python
python中return不返回值的问题解析
2020/07/22 Python
通信工程毕业生自荐信
2013/11/01 职场文书
学校七一活动方案
2014/01/19 职场文书
讲文明树新风公益广告宣传方案
2014/02/25 职场文书
2014年创卫工作总结
2014/11/24 职场文书
python spilt()分隔字符串的实现示例
2021/05/21 Python