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 相关文章推荐
jQuery 选择器理解
Mar 16 Javascript
javascript cookie操作类的实现代码小结附使用方法
Jun 02 Javascript
JavaScript访问样式表代码
Oct 15 Javascript
一个JQuery写的点击上下滚动的小例子
Aug 27 Javascript
jQuery实现div浮动层跟随页面滚动效果
Feb 11 Javascript
Linux下使用jq友好的打印JSON技巧分享
Nov 18 Javascript
JavaScript闭包详解
Feb 02 Javascript
JS+CSS3实现超炫的散列画廊特效
Jul 16 Javascript
JS仿QQ好友列表展开、收缩功能(第二篇)
Jul 07 Javascript
Angular PWA使用的Demo示例
Jan 31 Javascript
JavaScript判断浏览器运行环境的详细方法
Jun 30 Javascript
jQuery实现简单飞机大战
Jul 05 jQuery
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
php打印输出棋盘的实现方法
2014/12/23 PHP
在Laravel5.6中使用Swoole的协程数据库查询
2018/06/15 PHP
PHP让网站移动访问更加友好方法
2019/02/14 PHP
php7 图形用户界面GUI 开发示例
2020/02/22 PHP
javascript 构建一个xmlhttp对象池合理创建和使用xmlhttp对象
2010/01/15 Javascript
ExtJS 学习专题(一) 如何应用ExtJS(附实例)
2010/03/11 Javascript
jQuery获取文本节点之 text()/val()/html() 方法区别
2011/03/01 Javascript
jquery快捷动态绑定键盘事件的操作函数代码
2013/10/17 Javascript
js取float型小数点后两位数的方法
2014/01/18 Javascript
JavaScript使用function定义对象并调用的方法
2015/03/23 Javascript
javascript控制层显示或隐藏的方法
2015/07/22 Javascript
javascript与Python快速排序实例对比
2015/08/10 Javascript
初步了解javascript面向对象
2015/11/09 Javascript
js操作数据库实现注册和登陆的简单实例
2016/05/26 Javascript
彻底学会Angular.js中的transclusion
2017/03/12 Javascript
微信小程序 数据遍历的实现
2017/04/05 Javascript
JQuery实现定时刷新功能代码
2017/05/09 jQuery
JavaScript基于activexobject连接远程数据库SQL Server 2014的方法
2017/07/12 Javascript
Webpack性能优化 DLL 用法详解
2017/08/10 Javascript
浅谈vue-router2路由参数注意的问题
2017/11/08 Javascript
JavaScript简单实现动态改变HTML内容的方法示例
2018/12/25 Javascript
完美解决Pycharm无法导入包的问题 Unresolved reference
2018/05/18 Python
Python第三方Window模块文件的几种安装方法
2018/11/22 Python
matplotlib实现数据实时刷新的示例代码
2021/01/05 Python
美国著名的婴儿学步鞋老品牌:Robeez
2016/08/20 全球购物
早晨薰衣草在线女性精品店:Morning Lavender
2021/01/04 全球购物
中文专业毕业生自荐书范文
2014/01/04 职场文书
财务工作者先进事迹材料
2014/01/17 职场文书
三年大学生活自我鉴定
2014/01/21 职场文书
高三高考决心书
2014/03/11 职场文书
工作失职自我检讨书
2015/05/05 职场文书
史上最牛辞职信
2015/05/13 职场文书
盗窃罪辩护词范文
2015/05/21 职场文书
羊脂球读书笔记
2015/06/30 职场文书
Navicat for MySQL的使用教程详解
2021/05/27 MySQL
Python基本知识点总结
2022/04/07 Python