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 代码也可以变得优美的实现方法
Jun 22 Javascript
基于jquery的图片懒加载js
Jun 30 Javascript
仿当当网淘宝网等主流电子商务网站商品分类导航菜单
Sep 25 Javascript
js中函数调用的两种常用方法使用介绍
Jul 17 Javascript
jquery实现的点击翻书效果代码
Nov 04 Javascript
jquery基础知识第一讲之认识jquery
Mar 17 Javascript
javascript检查某个元素在数组中的索引值
Mar 30 Javascript
JS获取填报扩展单元格控件的值的解决办法
Jul 14 Javascript
Javascript实现简易天数计算器
May 18 Javascript
Vue点击切换Class变化,实现Active当前样式操作
Jul 17 Javascript
vue 在methods中调用mounted的实现操作
Aug 07 Javascript
手把手教你从零开始react+antd搭建项目
Jun 03 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
人尽可用的Windows技巧小贴士之下篇
2007/03/22 PHP
php笔记之:php数组相关函数的使用
2013/04/26 PHP
PHP7.0版本备注
2015/07/23 PHP
PHP实现动态执行代码的方法
2016/03/25 PHP
PHP 匿名函数与注意事项详细介绍
2016/11/26 PHP
PHP的RSA加密解密方法以及开发接口使用
2018/02/11 PHP
Thinkphp 框架扩展之行为扩展原理与实现方法分析
2020/04/23 PHP
javascript 清空form表单中某种元素的值
2009/12/26 Javascript
JavaScript setTimeout和setInterval的使用方法 说明
2010/03/25 Javascript
用js实现table单元格高宽调整,兼容合并单元格(兼容IE6、7、8、FF)实例
2013/06/25 Javascript
在线一元二次方程计算器实例(方程计算器在线计算)
2013/12/22 Javascript
JQuery实现table行折叠效果以JSON做数据源
2014/05/26 Javascript
js变量、作用域及内存详解
2014/09/23 Javascript
javascript将DOM节点添加到文档的方法实例分析
2015/08/04 Javascript
基于JavaScript实现通用tab选项卡(通用性强)
2016/01/07 Javascript
基于JavaScript实现快速转换文本语言(繁体中文和简体中文)
2016/03/07 Javascript
D3.js实现直方图的方法详解
2016/09/25 Javascript
输入框点击时边框变色效果的实现方法
2016/12/26 Javascript
bootstrap网格系统使用方法解析
2017/01/13 Javascript
ES6新特性之Symbol类型用法分析
2017/03/31 Javascript
nodejs实现的连接MySQL数据库功能示例
2018/01/25 NodeJs
AJAX在JQuery中的应用详解
2019/01/30 jQuery
jQuery插件实现非常实用的tab栏切换功能【案例】
2019/02/18 jQuery
jquery实现淡入淡出轮播图效果
2020/12/13 jQuery
Python中线程编程之threading模块的使用详解
2015/06/23 Python
Canvas多边形绘制的实现方法
2019/08/05 HTML / CSS
Java程序员面试题
2013/07/15 面试题
《我的伯父鲁迅先生》教学反思
2014/02/12 职场文书
《夹竹桃》教学反思
2014/04/20 职场文书
大学生就业自荐书
2014/06/16 职场文书
防灾减灾日活动总结
2014/08/26 职场文书
购房委托书
2014/10/15 职场文书
2015年老干部工作总结
2015/04/23 职场文书
python实现Thrift服务端的方法
2021/04/20 Python
gateway与spring-boot-starter-web冲突问题的解决
2021/07/16 Java/Android
MySQL数据库实验实现简单数据库应用系统设计
2022/06/21 MySQL