基于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 相关文章推荐
超级24小时弹窗代码 24小时退出弹窗代码 100%弹窗代码(IE only)
Jun 11 Javascript
JS时间选择器 兼容IE6,7,8,9
Jun 26 Javascript
JavaScript 用cloneNode方法克隆节点的代码
Oct 15 Javascript
使用js获取图片原始尺寸
Dec 03 Javascript
jQuery实现查找最近父节点的方法
Jun 23 Javascript
手机端 HTML5使用photoswipe.js仿微信朋友圈图片放大效果
Aug 25 Javascript
canvas 绘制圆形时钟
Feb 22 Javascript
vue综合组件间的通信详解
Nov 06 Javascript
js实现每日签到功能
Nov 29 Javascript
vue实现抖音时间转盘
Sep 08 Javascript
解决layui轮播图有数据不显示的情况
Sep 16 Javascript
JavaScript用document.write()输出换行的示例代码
Nov 26 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
建立文件交换功能的脚本(三)
2006/10/09 PHP
php 抽象类的简单应用
2011/09/06 PHP
yii2高级应用之自定义组件实现全局使用图片上传功能的方法
2016/10/08 PHP
Yii2实现增删改查后留在当前页的方法详解
2017/01/13 PHP
Jquery Ajax的Get方式时需要注意URL地方
2011/04/07 Javascript
c#和Javascript操作同一json对象的实现代码
2012/01/17 Javascript
Moment.js 不容错过的超棒Javascript日期处理类库
2012/04/15 Javascript
妙用Jquery的val()方法
2012/06/27 Javascript
jQuery事件 delegate()使用方法介绍
2012/10/30 Javascript
angularjs实现与服务器交互分享
2014/06/24 Javascript
jQuery移动页面开发中的触摸事件与虚拟鼠标事件简介
2015/12/03 Javascript
基于jquery实现轮播特效
2016/04/22 Javascript
jquery获取点击控件的绝对位置简单实例
2016/10/13 Javascript
jQuery插件HighCharts绘制2D金字塔图效果示例【附demo源码下载】
2017/03/09 Javascript
JS实现禁止用户使用Ctrl+鼠标滚轮缩放网页的方法
2017/04/28 Javascript
微信小程序封装http访问网络库实例代码
2017/05/24 Javascript
Vue组件之全局组件与局部组件的使用详解
2017/10/09 Javascript
js遍历详解(forEach, map, for, for...in, for...of)
2019/08/28 Javascript
vue+elementUI(el-upload)图片压缩,默认同比例压缩操作
2020/08/10 Javascript
[02:44]DOTA2英雄基础教程 钢背兽
2013/12/19 DOTA
[01:21]2018DOTA2亚洲邀请赛4.5采访 打DOTA2也能有女朋友?
2018/04/06 DOTA
[50:27]OG vs LGD 2018国际邀请赛淘汰赛BO3 第一场 8.26
2018/08/30 DOTA
python模拟鼠标拖动操作的方法
2015/03/11 Python
Python图像处理之简单画板实现方法示例
2018/08/30 Python
Python读取指定日期邮件的实例
2019/02/01 Python
python实现整数的二进制循环移位
2019/03/08 Python
python Event事件、进程池与线程池、协程解析
2019/10/25 Python
python关闭占用端口方式
2019/12/17 Python
python中round函数如何使用
2020/06/19 Python
python利用后缀表达式实现计算器功能
2021/02/22 Python
HTML5中5个简单实用的API
2014/04/28 HTML / CSS
德国高尔夫商店:Par71.de
2020/11/29 全球购物
2014幼儿园小班工作总结
2014/11/10 职场文书
4S店收银员岗位职责
2015/04/07 职场文书
车辆安全隐患排查制度
2015/08/05 职场文书
SQL Server数据库的三种创建方法汇总
2023/05/08 MySQL