基于javascipt-dom编程 table对象的使用


Posted in Javascript onApril 22, 2013

排名练习:向表格添加数据,当编号遇到重复给予提示并且无法添加,而且按排名顺序添加数据

参考代码:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>ggggg</title>
<link rel="stylesheet" type="text/css" href="">
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<!--js代码可以放置在任意位置,按照先后顺序依次执行 一般放在head标签之间-->
<script type="text/javascript">
    function test(){
        //获得表格对象
        var mytable=document.getElementById("table1");
        //判断插入是否重复的排名
        //遍历
        //定义变量要插入的位置
        var insertW=mytable.rows.length;
        for(var i=1;i<mytable.rows.length;i++){
            //取出每一行
            var eRows=mytable.rows[i];
            //判断输入的排名是否重复
            if(eRows.cells[0].innerText==no.value){
                window.alert("与排名 "+eRows.cells[0].innerText+" 重复");
                return ;//阻止代码往下面执行
            }
            //进行排序 查找要插入的位置
            if(parseInt(no.value)>parseInt(eRows.cells[0].innerText)){
                insertW=i;
                //window.alert(insertW);
            }
            //window.alert("ok");
        }
        
        //排序后的插入
        var eachRow=mytable.insertRow(insertW+1);    
        //每行添加数据
        eachRow.insertCell(0).innerText=document.getElementById("no").value;
        eachRow.insertCell(1).innerText=username.value;
        eachRow.insertCell(2).innerText=nickname.value;
    }
</script>
</head>
<body>
    <table id="table1" border="1">
        <tr><td>排名</td><td>姓名</td><td>外号</td></tr>
        <tr><td>1</td><td>宋江</td><td>及时雨</td></tr>
        <tr><td>2</td><td>卢俊义</td><td>玉麒麟</td></tr>
        <tr><td>10</td><td>test</td><td>test</td></tr>
    </table>
    <br/><br/>
    排名:<input id="no" type="text" name="no"><br/>
    姓名:<input id="username" type="text" name="username"><br/>
    外号:<input id="nickname" type="text" name="nickname"><br/>
    <input type="button" value="添加" onclick="test()"><br/>
</body>
</html>

基于javascipt-dom编程 table对象的使用

Javascript 相关文章推荐
IE bug table元素的innerHTML
Jan 11 Javascript
用JSON做数据传输格式中的一些问题总结
Dec 21 Javascript
浮动的div自适应居中显示的js代码
Dec 23 Javascript
jquery easyui combox一些实用的小方法
Dec 25 Javascript
关闭浏览器窗口弹出提示框并且可以控制其失效
Apr 15 Javascript
javascript与css3动画结合使用小结
Mar 11 Javascript
js实现多行文本框统计剩余字数功能
Mar 28 Javascript
js+html获取系统当前时间
Nov 10 Javascript
react.js组件实现拖拽复制和可排序的示例代码
Aug 20 Javascript
微信小程序使用swiper组件实现类3D轮播图
Aug 29 Javascript
浅析Angular 实现一个repeat指令的方法
Jul 21 Javascript
JavaScript享元模式原理与用法实例详解
Mar 09 Javascript
用js实现小球的自由移动代码
Apr 22 #Javascript
jquery打开直接跳到网页最下面、最低端实现代码
Apr 22 #Javascript
防止浏览器记住用户名及密码的简单实用方法
Apr 22 #Javascript
js播放wav文件(源码)
Apr 22 #Javascript
如何将一个String和多个String值进行比较思路分析
Apr 22 #Javascript
『JavaScript』限制Input只能输入数字实现思路及代码
Apr 22 #Javascript
『jQuery』名称冲突使用noConflict方法解决
Apr 22 #Javascript
You might like
php写的带缓存数据功能的mysqli类
2012/09/06 PHP
php读取der格式证书乱码解决方法
2015/06/22 PHP
PHP压缩图片功能的介绍
2019/03/21 PHP
Prototype 学习 工具函数学习($A方法)
2009/07/12 Javascript
js实现浏览器窗口大小被改变时触发事件的方法
2015/02/02 Javascript
JavaScript设计模式学习之“类式继承”
2015/03/12 Javascript
JavaScript中Window对象的属性及事件
2015/12/25 Javascript
Vue 自定义动态组件实例详解
2018/03/28 Javascript
layer弹出层父子页面事件相互调用方法
2018/08/17 Javascript
使用jQuery给Table动态增加行、清空table的方法
2018/09/05 jQuery
javascript实现简易聊天室
2019/07/12 Javascript
深入了解Hybrid App技术的相关知识
2019/07/17 Javascript
浅谈layui数据表格判断问题(加入表单元素),设置单元格样式
2019/10/26 Javascript
ES6 Generator基本使用方法示例
2020/06/06 Javascript
vue 表单输入框不支持focus及blur事件的解决方案
2020/11/17 Vue.js
[04:21]狐狸妈带你到现场 DOTA2 TI中国区预选赛线下赛路线指引
2014/05/22 DOTA
python如何为创建大量实例节省内存
2018/03/20 Python
Pandas 数据框增、删、改、查、去重、抽样基本操作方法
2018/04/12 Python
Scrapy基于selenium结合爬取淘宝的实例讲解
2018/06/13 Python
python变量赋值方法(可变与不可变)
2019/01/12 Python
利用python在excel里面直接使用sql函数的方法
2019/02/08 Python
python 实现selenium断言和验证的方法
2019/02/13 Python
Python3多目标赋值及共享引用注意事项
2019/05/27 Python
分享8个非常流行的 Python 可视化工具包
2019/06/05 Python
python使用装饰器作日志处理的方法
2019/07/11 Python
基于Python的微信机器人开发 微信登录和获取好友列表实现解析
2019/08/21 Python
浅谈Python3识别判断图片主要颜色并和颜色库进行对比的方法
2019/10/25 Python
使用Python绘制台风轨迹图的示例代码
2020/09/21 Python
python Matplotlib基础--如何添加文本和标注
2021/01/26 Python
北京大学自荐信范文
2014/01/28 职场文书
汉语言文学职业规划
2014/02/14 职场文书
消防工作实施方案
2014/06/09 职场文书
2014年中秋节活动总结
2014/08/29 职场文书
机动车交通事故协议书
2015/01/29 职场文书
小学生暑假安全公约
2015/07/14 职场文书
日元符号 ¥
2022/02/17 杂记