JS表格的动态操作完整示例


Posted in Javascript onJanuary 13, 2020

本文实例讲述了JS表格的动态操作。分享给大家供大家参考,具体如下:

<html>
    <head>
        <title>js-表格的动态操作</title>
        <meta charset="UTF-8"/>
        <style type="text/css">
            #ta tr{
                height: 20px;
            }
            #t1{
                font-weight: bold;
                /*align-content: center;*/
                /*不能设置文本内容居中*/
            }
        </style>
        <script type="text/javascript">
            function delectOper(btn){
                //获取table对象,我们用其进行其对子元素的操作
                var ta=document.getElementById("ta")
                //获取其父类对象
                var tr=btn.parentNode.parentNode;  //我们进行删除操作是删除其所在的行,所以我们用两次parent操作,第一层得到其所在的列(单元格),再进一层得到其所在的行对象
                //执行删除操作
                ta.deleteRow(tr.rowIndex);  //进行删除操作时,我们用父类对象删除子类对象,
                //注:对于div等对象我们可以使用remove方法,但是对于表格的属性我们利用delete进行操作,而且我们利用他的rowIndex(行号)而不是其id亦或是对象
                //我们没法对每一个行设置一个id所以用这种方法(通过调入对象找到其父类对象)更加的方便
            }
            function changeOper(n){
//                var n=n;
                //获取修改的位置对象
                var cell=document.getElementById("cell"+n);
                //进行一定的限制(只有是数字的情况下才能进行拼接)
                if(!isNaN(Number(cell.innerHTML))){//isNAN如果是true则表示数值不是数字,如果不添加就会产生连续点击修改时出现把源码拼接上的情况
                //修改对象的类型
                cell.innerHTML="<input type='text' value='"+cell.innerHTML+"' onblur='changeOper2(this,this.parentNode)'/>" //利用value='"+cell.innerHTML+"'可以实现内容的拼接注意:其内部的值是"+cell.innerHTML+"一个拼接量
                //注意格式:在""内部的要用'',        //不知道为什么在内部不能直接把cell和n当参数传出去,但是可以传this对象,所以对应的我们利用this,简介传出其父对象
                }  //还有一个bug:当用户输入的值是字符(不是数字),其也会进行value的赋值,但是无法再触发修改按键,只能检索原对象的内容类型,无法检索用户的
            }
            function changeOper2(inp,cell){
                //获取修改位置对象
//                var cell=document.getElementById("cell"+n);
                //修改对象的类型
                cell.innerHTML=inp.value;  //通过对象获得用户修改获得value值
            }
            //明白了:document可以调用任何的id,(好比其他都是全局变量一样),但是他的局限是获取的方法有限,必须有特定的属性才能获取
            //document。innerHTML是对其内部的内容进行重写。
        </script>
    </head>
    <body>
        <h3 align="center">表格的动态操作</h3>
        <hr />
        <table border="1px" id="ta" align="center">  <!--align可以直接把整个表格居中-->
            <tr id="t1" align="center">
                <td width="200px">Animation</td>
                <td width="100px">上映年份</td>
                <td width="100px">评分(10分)</td>
                <td width="200px">投币</td>
                <td width="200px">操作</td>
            </tr>
            <tr align="center">
                <td>clannad</td>
                <td>2008</td>
                <td>9.9</td>
                <td id="cell2">100</td>
                <td>
                    <input type="button" name="" id="" value="修改" onclick="changeOper(2)"/>
                    <input type="button" name="" id="" value="删除" onclick="delectOper(this)"/>
                </td>
            </tr>
            <tr align="center">
                <td>月色真美</td>
                <td>2017</td>
                <td>9.4</td>
                <td id="cell3">70</td>
                <td>
                    <input type="button" name="" id="" value="修改" onclick="changeOper(3)"/>
                    <input type="button" name="" id="" value="删除" onclick="delectOper(this)"/>
                </td>
            </tr>
            <tr align="center">
                <td>境界的彼方</td>
                <td>2013</td>
                <td>9.4</td>
                <td id="cell4">60</td>
                <td>
                    <input type="button" name="" id="" value="修改" onclick="changeOper(4)"/>
                    <input type="button" name="" id="" value="删除" onclick="delectOper(this)"/>
                </td>
            </tr>
        </table>
    </body>
</html>

运行效果:

JS表格的动态操作完整示例

感兴趣的朋友可以使用在线HTML/CSS/JavaScript代码运行工具:http://tools.3water.com/code/HtmlJsRun测试上述代码运行效果。

更多关于JavaScript相关内容可查看本站专题:《JavaScript操作DOM技巧总结》、《JavaScript页面元素操作技巧总结》、《JavaScript事件相关操作与技巧大全》、《JavaScript查找算法技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript错误与调试技巧总结》

希望本文所述对大家JavaScript程序设计有所帮助。

Javascript 相关文章推荐
二级域名或跨域共享Cookies的实现方法
Aug 07 Javascript
javascript 字符 Escape,encodeURI,encodeURIComponent
Jul 09 Javascript
jquery事件机制扩展插件 jquery鼠标右键事件
Dec 21 Javascript
JS实现图片翻书效果示例代码
Sep 09 Javascript
javascript正则表达式定义(语法)总结
Jan 08 Javascript
Vue结合原生js实现自定义组件自动生成示例
Jan 21 Javascript
MUI 上拉刷新/下拉加载功能实例代码
Apr 13 Javascript
解决vue router使用 history 模式刷新后404问题
Jul 19 Javascript
基于JavaScript实现幸运抽奖页面
Jul 05 Javascript
使用Node搭建reactSSR服务端渲染架构
Aug 30 Javascript
微信小程序开发之tabbar图标和颜色的实现
Oct 17 Javascript
原生JS实现多条件筛选
Aug 19 Javascript
JavaScript实现模态对话框实例
Jan 13 #Javascript
JS动态图片的实现方法完整示例
Jan 13 #Javascript
js实现拖动缓动效果
Jan 13 #Javascript
Vue.js中的高级面试题及答案
Jan 13 #Javascript
深入理解redux之compose的具体应用
Jan 12 #Javascript
2019年度web前端面试题总结(主要为Vue面试题)
Jan 12 #Javascript
html2canvas属性和使用方法以及如何使用html2canvas将HTML内容写入Canvas生成图片
Jan 12 #Javascript
You might like
全国FM电台频率大全 - 19 广东省
2020/03/11 无线电
PHP新手上路(二)
2006/10/09 PHP
php5数字型字符串加解密代码
2008/04/24 PHP
PHP实现的汉字拼音转换和公历农历转换类及使用示例
2014/07/01 PHP
跟我学Laravel之请求(Request)的生命周期
2014/10/15 PHP
PHP程序员常见的40个陋习,你中了几个?
2014/11/20 PHP
php基于curl扩展制作跨平台的restfule 接口
2015/05/11 PHP
PHP实现分布式memcache设置web集群session同步的方法
2018/04/10 PHP
使用Js让Html中特殊字符不被转义
2013/11/05 Javascript
JavaScript实现在数组中查找不同顺序排列的字符串
2014/09/26 Javascript
jquery渐隐渐显的图片幻灯闪烁切换实现方法
2015/02/26 Javascript
很全面的JavaScript常用功能汇总集合
2016/01/22 Javascript
bootstrap模态框垂直居中效果
2016/12/03 Javascript
jQuery插件FusionCharts绘制2D双折线图效果示例【附demo源码】
2017/04/14 jQuery
Javascript实现时间倒计时效果
2017/07/15 Javascript
基于匀速运动的实例讲解(侧边栏,淡入淡出)
2017/10/17 Javascript
vue.js-div滚动条隐藏但有滚动效果的实现方法
2018/03/03 Javascript
jQuery实现基本隐藏与显示效果的方法详解
2018/09/05 jQuery
jQuery实现根据身份证号获取生日、年龄、性别等信息的方法
2019/01/09 jQuery
vue中filters 传入两个参数 / 使用两个filters的实现方法
2019/07/15 Javascript
JS XMLHttpRequest原理与使用方法深入详解
2020/04/30 Javascript
浅谈Python接口对json串的处理方法
2018/12/19 Python
Python设置matplotlib.plot的坐标轴刻度间隔以及刻度范围
2019/06/25 Python
python根据多个文件名批量查找文件
2019/08/13 Python
Python如何实现FTP功能
2020/05/28 Python
html5手机端页面可以向右滑动导致样式受影响的问题
2018/06/20 HTML / CSS
澳大利亚领先的皮肤诊所:Skin Matrix(抗衰老、痤疮专家、药妆护肤)
2018/05/20 全球购物
什么是TCP/IP
2014/07/27 面试题
业务经理岗位职责
2013/11/11 职场文书
领导检查欢迎词
2014/01/14 职场文书
淘宝店铺营销方案
2014/02/13 职场文书
2014光棍节单身联谊活动策划书
2014/10/10 职场文书
大学四年个人总结
2015/03/03 职场文书
搞笑欢迎词大全
2015/09/30 职场文书
演讲稿之我的初心我的成长
2019/08/12 职场文书
bose降噪耳机音能消除人声吗
2022/04/19 数码科技