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 相关文章推荐
25个好玩的JavaScript小游戏分享
Apr 22 Javascript
javascript中万恶的function实例分析
May 25 Javascript
js jquery分别实现动态的文件上传操作按钮的添加和删除
Jan 13 Javascript
JavaScript面对国际化编程时的一些建议
Jun 24 Javascript
JS实现自动切换文字的导航效果代码
Aug 27 Javascript
一系列Bootstrap导航条使用方法分享
Apr 29 Javascript
Vue组件BootPage实现简单的分页功能
Sep 12 Javascript
jQuery实现可拖拽3D万花筒旋转特效
Jan 03 Javascript
vue 监听键盘回车事件详解 @keyup.enter || @keyup.enter.native
Aug 25 Javascript
vue-router的HTML5 History 模式设置
Sep 08 Javascript
JS实现省市县三级下拉联动
Apr 10 Javascript
js实现翻牌小游戏
Jul 31 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
PHP学习之PHP变量
2006/10/09 PHP
php中将网址转换为超链接的函数
2011/09/02 PHP
Yii核心组件AssetManager原理分析
2014/12/02 PHP
php中钩子(hook)的原理与简单应用demo示例
2019/09/03 PHP
JQuery 学习笔记 选择器之六
2009/07/23 Javascript
JavaScript判断DOM何时加载完毕的技巧
2012/11/11 Javascript
jquery乱码与contentType属性设置问题解决方案
2013/01/07 Javascript
JS中setInterval、setTimeout不能传递带参数的函数的解决方案
2013/04/28 Javascript
jquery text(),val(),html()方法区别总结
2013/11/04 Javascript
JS实现文字向下滚动完整实例
2015/02/06 Javascript
JavaScript中用于生成随机数的Math.random()方法
2015/06/15 Javascript
jquery简单实现幻灯片的方法
2015/08/03 Javascript
浅析Node.js 中 Stream API 的使用
2015/10/23 Javascript
javascript中arguments,callee,caller详解
2016/03/16 Javascript
JavaScript数组操作详解
2017/02/04 Javascript
JS实现同一DOM元素上onClick事件与onDblClick事件并存的解决方法
2018/06/07 Javascript
js canvas实现红包照片效果
2018/08/21 Javascript
layui弹出框Tab选项卡的示例代码
2019/09/04 Javascript
javascript实现fetch请求返回的统一拦截
2019/12/22 Javascript
python的id()函数介绍
2013/02/10 Python
Python中文竖排显示的方法
2015/07/28 Python
Python数据结构之翻转链表
2017/02/25 Python
Python3.6通过自带的urllib通过get或post方法请求url的实例
2018/05/10 Python
python实现向微信用户发送每日一句 python实现微信聊天机器人
2019/03/27 Python
Python格式化字符串f-string概览(小结)
2019/06/18 Python
Python中使用__new__实现单例模式并解析
2019/06/25 Python
python tkinter图形界面代码统计工具
2019/09/18 Python
解决Jupyter Notebook开始菜单栏Anaconda下消失的问题
2020/04/13 Python
使用Python将图片转正方形的两种方法实例代码详解
2020/04/29 Python
什么是GWT的Entry Point
2013/08/16 面试题
幼儿园教师获奖感言
2014/03/11 职场文书
师范学院毕业生求职信
2014/06/24 职场文书
计划生育证明格式范本
2014/09/12 职场文书
高中社区服务活动报告
2015/02/05 职场文书
党员干部学习心得体会
2016/01/23 职场文书
吃通javascript正则表达式
2021/04/21 Javascript