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 相关文章推荐
基于jQuery的仿flash的广告轮播代码
Nov 04 Javascript
javascript tips提示框组件实现代码
Nov 19 Javascript
JavaScript Array Flatten 与递归使用介绍
Oct 30 Javascript
利用jquery动画特效和css打造的侧边弹出垂直导航
Apr 04 Javascript
JS实现表格数据各种搜索功能的方法
Mar 03 Javascript
JQuery EasyUI的使用
Feb 24 Javascript
Vee-Validate的使用方法详解
Sep 22 Javascript
JS中用EL表达式获取上下文参数值的方法
Mar 28 Javascript
React 组件间的通信示例
Jun 14 Javascript
详解react-refetch的使用小例子
Feb 15 Javascript
angular异步验证防抖踩坑实录
Dec 01 Javascript
vue实现数字滚动效果
Jun 29 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 Apache2.2.11及Php5.2.9-1的安装与配置方法
2009/06/08 PHP
Php 构造函数construct的前下划线是双的_
2009/12/08 PHP
在PHP中操作Excel实例代码
2010/04/29 PHP
浅析PHP页面局部刷新功能的实现小结
2013/06/21 PHP
6种php上传图片重命名的方法实例
2013/11/04 PHP
jQuery的实现原理的模拟代码 -3 事件处理
2010/08/03 Javascript
JavaScript初学者需要了解10个小技巧
2010/08/25 Javascript
jquery 定位input元素的几种方法小结
2013/07/28 Javascript
详解vue项目的构建,打包,发布全过程
2017/11/23 Javascript
浅析Vue项目中使用keep-Alive步骤
2018/07/27 Javascript
layui实现点击按钮给table添加一行
2018/08/10 Javascript
微信小程序实现时间预约功能
2018/11/27 Javascript
说说Vue.js中的functional函数化组件的使用
2019/02/12 Javascript
layui 根据后台数据动态创建下拉框并同时默认选中的实例
2019/09/02 Javascript
layui实现把数据表格时间戳转换为时间格式的例子
2019/09/12 Javascript
浅析Vue 中的 render 函数
2020/02/28 Javascript
js实现表格数据搜索
2020/08/09 Javascript
Python列表生成器的循环技巧分享
2015/03/06 Python
Python中几个比较常见的名词解释
2015/07/04 Python
Python的语言类型(详解)
2017/06/24 Python
python 判断是否为正小数和正整数的实例
2017/07/23 Python
Django实现快速分页的方法实例
2017/10/22 Python
详解Python中的Numpy、SciPy、MatPlotLib安装与配置
2017/11/17 Python
Python Django框架url反向解析实现动态生成对应的url链接示例
2019/10/18 Python
Python爬虫程序架构和运行流程原理解析
2020/03/09 Python
python super()函数的基本使用
2020/09/10 Python
浅析Python requests 模块
2020/10/09 Python
Python logging自定义字段输出及打印颜色
2020/11/30 Python
国税会议欢迎词
2014/01/16 职场文书
《望洞庭》教学反思
2014/02/16 职场文书
初中班主任寄语
2014/04/04 职场文书
学生请假条格式
2014/04/11 职场文书
群众路线自我剖析材料
2014/10/08 职场文书
房屋所有权证明
2015/06/19 职场文书
2016年秋季开学典礼新闻稿
2015/11/25 职场文书
2016感恩父亲节主题广播稿
2015/12/18 职场文书