基于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 相关文章推荐
关于 byval 与 byref 的区别分析总结
Oct 08 Javascript
jQuery $.each的用法说明
Mar 22 Javascript
js定义对象或数组直接量时各浏览器对多余逗号的处理(json)
Mar 05 Javascript
Node.js中的模块机制学习笔记
Nov 04 Javascript
jquery实现简单的无缝滚动
Apr 15 Javascript
javascript弹出窗口实现代码
Nov 12 Javascript
JavaScript设置、获取、清除单值和多值cookie的方法
Nov 17 Javascript
JavaScript实现解析INI文件内容的方法
Nov 17 Javascript
jQuery表格的维护和删除操作
Feb 03 Javascript
微信小游戏之使用three.js 绘制一个旋转的三角形
Jun 10 Javascript
javascript 数组(list)添加/删除的实现
Dec 17 Javascript
vue 根据选择的月份动态展示日期对应的星期几
Feb 06 Vue.js
用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 程序员应该使用的10个组件
2009/10/31 PHP
PHP 递归效率分析
2009/11/24 PHP
PHP中CURL方法curl_setopt()函数的参数分享
2013/01/19 PHP
解析php中的escape函数
2013/06/29 PHP
在SAE上搭建最新wordpress的方法
2014/12/21 PHP
百度工程师讲PHP函数的实现原理及性能分析(三)
2015/05/13 PHP
匹配任意字符的正则表达式写法
2010/04/29 Javascript
javascript 数组排序函数sort和reverse使用介绍
2013/11/21 Javascript
解决Jquery向页面append新元素之后事件的绑定问题
2015/03/16 Javascript
AngularJS学习笔记之依赖注入详解
2016/05/16 Javascript
移动端jQuery修正Web页面滑动时div问题的两则实例
2016/05/30 Javascript
jQuery实现6位数字密码输入框
2016/12/29 Javascript
BootStrap3中模态对话框的使用
2017/01/06 Javascript
浅谈mint-ui loadmore组件注意的问题
2017/11/08 Javascript
微信小程序导航栏滑动定位功能示例(实现CSS3的positionsticky效果)
2019/01/24 Javascript
详解vue引入子组件方法
2019/02/12 Javascript
解决Vue-cli3没有vue.config.js文件夹及配置vue项目域名的问题
2020/12/04 Vue.js
[03:12]完美世界DOTA2联赛PWL DAY6集锦
2020/11/05 DOTA
python发送邮件的实例代码(支持html、图片、附件)
2013/03/04 Python
python实现外卖信息管理系统
2018/01/11 Python
Python实现PS滤镜碎片特效功能示例
2018/01/24 Python
python range()函数取反序遍历sequence的方法
2018/06/25 Python
python实现按首字母分类查找功能
2019/10/31 Python
解决Python二维数组赋值问题
2019/11/28 Python
Python Pandas 对列/行进行选择,增加,删除操作
2020/05/17 Python
selenium框架中driver.close()和driver.quit()关闭浏览器
2020/12/08 Python
SpringBoot首页设置解析(推荐)
2021/02/11 Python
HTML5 本地存储实现购物车功能
2017/09/07 HTML / CSS
人力资源部培训专员岗位职责
2014/01/02 职场文书
学生实习介绍信
2014/01/15 职场文书
致跳高运动员加油稿
2014/02/12 职场文书
出国英文推荐信
2014/05/10 职场文书
2015年安康杯竞赛活动总结
2015/03/26 职场文书
2015年国庆节演讲稿范文
2015/07/30 职场文书
2016大一新生军训感言
2015/12/08 职场文书
创业方案:赚钱的烧烤店该怎样做?
2019/07/05 职场文书