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 相关文章推荐
用javascript做拖动布局的思路
May 31 Javascript
jquery插件之easing使用
Aug 19 Javascript
js日期时间补零的小例子
Mar 05 Javascript
extjs中form与grid交互数据(record)的方法
Aug 29 Javascript
JS 在指定数组中随机取出N个不重复的数据
Jun 10 Javascript
node.js中的fs.lchmodSync方法使用说明
Dec 16 Javascript
javascript创建对象的几种模式介绍
May 06 Javascript
vue用addRoutes实现动态路由的示例
Sep 15 Javascript
vue2.x select2 指令封装详解
Oct 12 Javascript
jQuery中内容过滤器简单用法示例
Mar 31 jQuery
vue实现城市列表选择功能
Jul 16 Javascript
js计算两个日期间的天数月的实例代码
Sep 20 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
smarty 原来也不过如此~~呵呵
2006/11/25 PHP
ThinkPHP之M方法实例详解
2014/06/20 PHP
如何让CI框架支持service层
2014/10/29 PHP
[原创]解决wincache不支持64位PHP5.5/5.6的问题(提供64位wincache下载)
2016/06/22 PHP
jQuery操作select的实例代码
2012/06/14 Javascript
table insertRow、deleteRow定义和用法总结
2014/05/14 Javascript
jquery实现在光标位置插入内容的方法
2015/02/05 Javascript
angularJS 中$attrs方法使用指南
2015/02/09 Javascript
javascript实现2016新年版日历
2016/01/25 Javascript
详解Node全局变量global模块
2017/09/28 Javascript
AngularJS实现的2048小游戏功能【附源码下载】
2018/01/03 Javascript
vue-router history模式下的微信分享小结
2018/07/05 Javascript
微信小程序如何访问公众号文章
2019/07/08 Javascript
nuxt 服务器渲染动态设置 title和seo关键字的操作
2020/11/05 Javascript
浅谈nuxtjs校验登录中间件和混入(mixin)
2020/11/06 Javascript
[48:47]VGJ.S vs NB 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/19 DOTA
[02:47]2018年度DOTA2最佳辅助位选手4号位-完美盛典
2018/12/17 DOTA
python实现C4.5决策树算法
2018/08/29 Python
Python从入门到精通之环境搭建教程图解
2019/09/26 Python
python对象转字典的两种实现方式示例
2019/11/07 Python
selenium+Chrome滑动验证码破解二(某某网站)
2019/12/17 Python
python小项目之五子棋游戏
2019/12/26 Python
Python+Opencv身份证号码区域提取及识别实现
2020/08/25 Python
POS解决方案:MUNBYN(热敏打印机、条形码扫描仪)
2020/06/09 全球购物
C#和SQL Server的面试题
2016/08/12 面试题
手术室护士自我鉴定
2013/10/14 职场文书
成品仓管员工作职责
2013/12/29 职场文书
护士自我评价
2014/02/01 职场文书
基层干部2014全国两会学习心得体会
2014/03/10 职场文书
好书伴我成长演讲稿
2014/05/14 职场文书
法定代表人身份证明书(含说明)
2014/10/02 职场文书
交通安全主题班会
2015/08/12 职场文书
小学教代会开幕词
2016/03/04 职场文书
幼儿园2016年感恩节活动总结
2016/04/01 职场文书
CSS精灵图的原理与使用方法介绍
2022/03/17 HTML / CSS
apache ftpserver搭建ftp服务器
2022/05/20 Servers