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去掉字符串里的所有空格
Feb 08 Javascript
JS之小练习代码
Oct 12 Javascript
放弃用你的InnerHTML来输出HTML吧 jQuery Tmpl不详细讲解
Apr 20 Javascript
浅谈JavaScript中Date(日期对象),Math对象
Feb 05 Javascript
jQuery实现精美的多级下拉菜单特效
Mar 14 Javascript
JavaScript汉诺塔问题解决方法
Apr 21 Javascript
Vue表单实例代码
Sep 05 Javascript
详解vue更改头像功能实现
Apr 28 Javascript
mui js控制开关状态、修改switch开关的值方法
Sep 03 Javascript
JavaScript获取某一天所在的星期
Sep 05 Javascript
vue实现公共方法抽离
Jul 31 Javascript
vue中重定向redirect:‘/index‘,不显示问题、跳转出错的完美解决
Sep 28 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
Ajax+PHP 边学边练之四 表单
2009/11/27 PHP
php编程实现获取excel文档内容的代码实例
2011/06/28 PHP
PHP计数器的实现代码
2013/06/08 PHP
ThinkPHP的MVC开发机制实例解析
2014/08/23 PHP
PHP中调用SVN命令更新网站方法
2015/01/07 PHP
Swoole-1.7.22 版本已发布,修复PHP7相关问题
2015/12/31 PHP
php微信公众号开发之秒杀
2018/10/20 PHP
javascript css styleFloat和cssFloat
2010/03/15 Javascript
基于Jquery的跨域传输数据(JSONP)
2011/03/10 Javascript
jQuery 源码分析笔记(7) Queue
2011/06/19 Javascript
用Javascript评估用户输入密码的强度(Knockout版)
2011/11/30 Javascript
JavaScript自定义DateDiff函数(兼容所有浏览器)
2012/03/01 Javascript
Ext JS 4实现带week(星期)的日期选择控件(实战一)
2013/08/21 Javascript
JS实现为排序好的字符串找出重复行的方法
2016/03/02 Javascript
Javascript自执行匿名函数(function() { })()的原理浅析
2016/05/15 Javascript
用jquery获取自定义的标签属性的值简单实例
2016/09/17 Javascript
jQuery无缝轮播图代码
2016/12/22 Javascript
JS 验证密码 不能为空,必须含有数字、字母、特殊字符,长度在8-12位
2017/06/21 Javascript
Vue全局分页组件的实现代码
2018/08/10 Javascript
浅谈express.js框架中间件(middleware)
2019/04/07 Javascript
使用python 获取进程pid号的方法
2014/03/10 Python
Python多层嵌套list的递归处理方法(推荐)
2016/06/08 Python
python笔记_将循环内容在一行输出的方法
2019/08/08 Python
kafka-python 获取topic lag值方式
2019/12/23 Python
python爬虫学习笔记之pyquery模块基本用法详解
2020/04/09 Python
利用scikitlearn画ROC曲线实例
2020/07/02 Python
HTML利用九宫格原理进行网页布局
2020/03/13 HTML / CSS
俄罗斯隐形眼镜和眼镜在线商店:Cronos
2020/06/02 全球购物
Ibatis如何使用动态表名
2015/07/12 面试题
Kingsoft金山公司C/C++笔试题
2016/05/10 面试题
资深生产主管自我评价
2013/09/22 职场文书
环保倡议书100字
2014/05/15 职场文书
开发房地产协议书
2014/09/14 职场文书
英语感谢信范文
2015/01/20 职场文书
承德避暑山庄导游词
2015/02/03 职场文书
python爬虫--selenium模块
2021/03/31 Python