基于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 相关文章推荐
使用js对select动态添加和删除OPTION示例代码
Aug 12 Javascript
JS实现字体选色板实例代码
Nov 20 Javascript
js获取下拉列表框中的value和text的值示例代码
Jan 11 Javascript
js onmousewheel事件多次触发问题解决方法
Oct 17 Javascript
JavaScript实现把rgb颜色转换成16进制颜色的方法
Jun 01 Javascript
15个常用的jquery代码片段
Dec 19 Javascript
JavaScript使用readAsDataURL读取图像文件
May 10 Javascript
解决jQuery ajax动态新增节点无法触发点击事件的问题
May 24 jQuery
webpack 2的react开发配置实例代码
Jul 28 Javascript
Vue单页及多页应用全局配置404页面实践记录
May 22 Javascript
vue模块拖拽实现示例代码
Mar 09 Javascript
详解ES6实现类的私有变量的几种写法
Feb 10 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方法调用模式与函数调用模式简例
2011/09/20 PHP
PHP计算一年多少个星期和每周的开始和结束日期
2014/07/01 PHP
Laravel 登录后清空COOKIE的操作方法
2019/10/14 PHP
记Laravel调用Gin接口调用formData上传文件的实现方法
2019/12/12 PHP
IE Firefox 使用自定义标签的区别
2009/10/15 Javascript
jquery 学习笔记一
2010/04/07 Javascript
JavaScript中对循环语句的优化技巧深入探讨
2014/06/06 Javascript
实例分析js和C#中使用正则表达式匹配a标签
2014/11/26 Javascript
node.js中的fs.close方法使用说明
2014/12/17 Javascript
JavaScript中String.match()方法的使用详解
2015/06/06 Javascript
EasyUI创建对话框的两种方式
2016/08/23 Javascript
基于angular实现模拟微信小程序swiper组件
2017/06/11 Javascript
vue2.0 实现导航守卫(路由守卫)
2018/05/21 Javascript
JS实现可切换图片的幻灯切换效果示例
2019/05/24 Javascript
[51:15]2014 DOTA2国际邀请赛中国区预选赛 Orenda VS LGD-GAMING
2014/05/22 DOTA
python使用urllib2模块获取gravatar头像实例
2013/12/18 Python
python关键字and和or用法实例
2015/05/28 Python
关于Python中Inf与Nan的判断问题详解
2017/02/08 Python
pytorch程序异常后删除占用的显存操作
2020/01/13 Python
django中的数据库迁移的实现
2020/03/16 Python
Python多进程multiprocessing、进程池用法实例分析
2020/03/24 Python
Brasty罗马尼亚:购买手表、香水、化妆品、珠宝
2020/04/21 全球购物
电子商务专业学生的学习自我评价
2013/10/27 职场文书
自荐信不宜过于夸大
2013/11/06 职场文书
总裁办公室主任职责
2014/01/02 职场文书
2014年文学毕业生自我鉴定
2014/04/23 职场文书
路政管理求职信
2014/06/18 职场文书
银行贷款收入证明
2014/10/17 职场文书
关于学习的决心书
2015/02/05 职场文书
护士求职自荐信范文
2015/03/04 职场文书
自我工作评价范文
2015/03/06 职场文书
超市主管竞聘书
2015/09/15 职场文书
公司会议开幕词
2016/03/03 职场文书
告诉你创业计划书的8个实用技巧
2019/07/12 职场文书
vue实现水波涟漪效果的点击反馈指令
2021/05/31 Vue.js
Fluentd搭建日志收集服务
2022/09/23 Servers