基于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 相关文章推荐
jQuery 页面 Mask实现代码
Jan 09 Javascript
javascript学习笔记(十) js对象 继承
Jun 19 Javascript
JavaScript中的作用域链和闭包
Jun 30 Javascript
jQuery实现table隔行换色和鼠标经过变色的两种方法
Jun 15 Javascript
Lua表达式和控制结构学习笔记
Dec 15 Javascript
php+ajax+jquery实现点击加载更多内容
May 03 Javascript
BootStrap中关于Select下拉框选择触发事件及扩展
Nov 22 Javascript
[js高手之路]设计模式系列课程-发布者,订阅者重构购物车的实例
Aug 29 Javascript
bootstrap table.js动态填充单元格数据的多种方法
Jul 18 Javascript
JS实现网站吸顶条
Jan 08 Javascript
Electron整合React使用搭建开发环境的步骤详解
Jun 07 Javascript
再也不怕 JavaScript 报错了,怎么看怎么处理都在这儿
Dec 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
yii框架源码分析之创建controller代码
2011/06/28 PHP
php实现mysql数据库分表分段备份
2015/06/18 PHP
两种php给图片加水印的实现代码
2020/04/18 PHP
PHP基于rabbitmq操作类的生产者和消费者功能示例
2018/06/16 PHP
在vs2010中调试javascript代码方法
2011/02/11 Javascript
Javascript 面向对象(二)封装代码
2012/05/23 Javascript
JQuery中对Select的option项的添加、删除、取值
2013/08/25 Javascript
jquery下拉select控件操作方法分享(jquery操作select)
2014/03/25 Javascript
深入探密Javascript数组方法
2015/01/08 Javascript
nodejs事件的监听与触发的理解分析
2015/02/12 NodeJs
Javascript json object 与string 相互转换的简单实现
2016/09/27 Javascript
jquery删除table当前行的实例代码
2016/10/07 Javascript
Bootstrap CSS布局之表格
2016/12/17 Javascript
图片懒加载插件实例分享(含解析)
2017/01/09 Javascript
基于Node.js的WebSocket通信实现
2017/03/11 Javascript
JavaScript 上传文件(psd,压缩包等),图片,视频的实现方法
2017/06/19 Javascript
angularjs实现猜大小功能
2017/10/23 Javascript
浅谈PDF.js使用心得
2018/06/07 Javascript
vue导出html、word和pdf的实现代码
2018/07/31 Javascript
VUE2.0+ElementUI2.0表格el-table实现表头扩展el-tooltip
2018/11/30 Javascript
Vue 使用beforeEach实现登录状态检查功能
2019/10/31 Javascript
详解nginx配置vue h5 history去除#号
2020/11/09 Javascript
[56:29]Secret vs Optic 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/19 DOTA
Collatz 序列、逗号代码、字符图网格实例
2017/06/22 Python
python实现简单名片管理系统
2018/11/30 Python
Django Celery异步任务队列的实现
2019/07/24 Python
python matplotlib库绘制条形图练习题
2019/08/10 Python
社区版pycharm创建django项目的方法(pycharm的newproject左侧没有项目选项)
2020/09/23 Python
Python基于tkinter canvas实现图片裁剪功能
2020/11/05 Python
英国女性时尚鞋类的潮流制造者:Koi Footwear
2018/10/19 全球购物
党员教师四风自我剖析材料
2014/09/30 职场文书
又涨知识了,自律到底多重要?
2019/06/27 职场文书
Python识别花卉种类鉴定网络热门植物并自动整理分类
2022/04/08 Python
vue项目proxyTable配置和部署服务器
2022/04/14 Vue.js
原生JS实现分页
2022/04/19 Javascript
Win11任务栏无法正常显示 资源管理器不停重启的解决方法
2022/07/07 数码科技