基于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 相关文章推荐
用倒置滤镜把div倒置,再把table倒置。
Jul 31 Javascript
Jquery 基础学习笔记
May 29 Javascript
JS 操作符整理[推荐收藏]
Nov 15 Javascript
用Javascript评估用户输入密码的强度实现代码
Nov 30 Javascript
jQuery 关于伪类选择符的使用说明
Apr 24 Javascript
实例讲解JS中setTimeout()的用法
Jan 28 Javascript
HTML5 js实现拖拉上传文件功能
Nov 20 Javascript
JS条形码(一维码)插件JsBarcode用法详解【编码类型、参数、属性】
Apr 19 Javascript
vue如何自动化打包测试环境和正式环境的dist/test文件
Jun 06 Javascript
微信小程序跳转到其他网页(外部链接)的实现方法
Sep 20 Javascript
node.js使用fs读取文件出错的解决方案
Oct 23 Javascript
js对象简介与基本用法示例
Mar 13 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/08/03 PHP
PHP生成sitemap.xml地图函数
2013/11/13 PHP
设置php页面编码的两种方法示例介绍
2014/03/03 PHP
php中通用的excel导出方法实例
2017/12/30 PHP
JavaScript 调试器简介
2009/02/21 Javascript
Javascript中的变量使用说明
2010/05/18 Javascript
js中访问html中iframe的文档对象的代码[IE6,IE7,IE8,FF]
2011/01/08 Javascript
JavaScript DOM节点添加示例
2014/07/16 Javascript
transport.js和jquery冲突问题的解决方法
2015/02/10 Javascript
js实现仿京东2级菜单效果(带延时功能)
2015/08/27 Javascript
javascript伸缩型菜单实现代码
2015/11/16 Javascript
基于JavaScript实现瀑布流布局(二)
2016/01/26 Javascript
浅谈Angularjs link和compile的使用区别
2016/10/21 Javascript
Angular2学习笔记——详解NgModule模块
2016/12/02 Javascript
Node.js制作简单聊天室
2017/01/12 Javascript
详解JS构造函数中this和return
2017/09/16 Javascript
Vue 样式绑定的实现方法
2019/01/15 Javascript
node后端服务保活的实现
2019/11/10 Javascript
python ddt实现数据驱动
2018/03/14 Python
python 实现A*算法的示例代码
2018/08/13 Python
使用pandas实现csv/excel sheet互相转换的方法
2018/12/10 Python
python3 selenium自动化 frame表单嵌套的切换方法
2019/08/23 Python
HTML5 Web Workers之网站也能多线程的实现
2013/04/24 HTML / CSS
canvas简易绘图的实现(海绵宝宝篇)
2018/07/04 HTML / CSS
香港优质食材和美酒专门店:FoodWise
2017/09/01 全球购物
秘书专业自荐信范文
2013/12/26 职场文书
十佳美德少年事迹材料
2014/02/05 职场文书
计算机应届毕业生自荐信范文
2014/02/23 职场文书
大四毕业生自荐书
2014/07/05 职场文书
2015年乡镇食品安全工作总结
2015/10/22 职场文书
2019年大学生学年自我鉴定!
2019/03/25 职场文书
创业计划书之便利店
2019/09/05 职场文书
何时使用Map来代替普通的JS对象
2021/04/29 Javascript
python 如何在list中找Topk的数值和索引
2021/05/20 Python
安装harbor作为docker镜像仓库的问题
2022/06/14 Servers
Python实战实现爬取天气数据并完成可视化分析详解
2022/06/16 Python