基于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 相关文章推荐
Exjs 入门篇
Apr 07 Javascript
javascript实现的弹出层背景置灰-模拟(easyui dialog)
Dec 27 Javascript
jQuery中的read和JavaScript中的onload函数的区别
Aug 27 Javascript
自定义jQuery插件方式实现强制对象重绘的方法
Mar 23 Javascript
jquery实现带渐变淡入淡出并向右依次展开的多级菜单效果实例
Aug 22 Javascript
为jQuery-easyui的tab组件添加右键菜单功能的简单实例
Oct 10 Javascript
JS中位置与大小的获取方法
Nov 22 Javascript
详解微信小程序 wx.uploadFile 的编码坑
Jan 23 Javascript
微信小程序开发之从相册获取图片 使用相机拍照 本地图片上传
Apr 18 Javascript
es6 字符串String的扩展(实例讲解)
Aug 03 Javascript
小程序实现短信登录倒计时
Jul 12 Javascript
使用p5.js临摹动态图片
Nov 04 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 页面跳转到另一个页面的多种方法方法总结
2009/07/07 PHP
PHP自动选择 连接本地还是远程数据库
2010/12/02 PHP
php不写闭合标签的好处
2014/03/04 PHP
PHP二维数组矩形转置实例
2016/07/20 PHP
PHP中in_array函数使用的问题与解决办法
2016/09/11 PHP
PHP 实现重载
2021/03/09 PHP
javascript 打印页面代码
2009/03/24 Javascript
jQuery 页面 Mask实现代码
2010/01/09 Javascript
分享8款优秀的 jQuery 加载动画和进度条插件
2012/10/24 Javascript
jquery提交form表单简单示例分享
2014/03/03 Javascript
jQuery 中国省市两级联动选择附图
2014/05/14 Javascript
ztree获取当前选中节点子节点id集合的方法
2015/02/12 Javascript
Javascript调用函数方法的几种方式介绍
2015/03/20 Javascript
jQuery点击按钮弹出遮罩层且内容居中特效
2015/12/14 Javascript
JavaScript用JSONP跨域请求数据实例详解
2017/01/06 Javascript
vuejs指令详解
2017/02/07 Javascript
vue-ajax小封装实例
2017/09/18 Javascript
怎样在vue项目下添加ESLint的方法
2019/05/16 Javascript
Vue项目打包部署到iis服务器的配置方法
2019/10/14 Javascript
解决angular 使用原生拖拽页面卡顿及表单控件输入延迟问题
2020/04/21 Javascript
Python网络编程使用select实现socket全双工异步通信功能示例
2018/04/09 Python
python实现按长宽比缩放图片
2018/06/07 Python
python使用rpc框架gRPC的方法
2018/08/24 Python
为什么str(float)在Python 3中比Python 2返回更多的数字
2018/10/16 Python
python引入不同文件夹下的自定义模块方法
2018/10/27 Python
Python3和PyCharm安装与环境配置【图文教程】
2020/02/14 Python
纯CSS3制作漂亮带动画效果的主机价格表
2015/04/25 HTML / CSS
印度网上药店:1mg
2017/10/13 全球购物
主持人演讲稿
2014/05/13 职场文书
感恩教育月活动总结
2014/07/07 职场文书
三潭印月的导游词
2015/02/12 职场文书
青春雷锋观后感
2015/06/10 职场文书
新郎结婚感言
2015/07/31 职场文书
Python机器学习之PCA降维算法详解
2021/05/19 Python
mybatis 解决从列名到属性名的自动映射失败问题
2021/06/30 Java/Android
MySQL8.0升级的踩坑历险记
2021/11/01 MySQL