基于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 相关文章推荐
如何让动态插入的javascript脚本代码跑起来。
Jan 09 Javascript
javascript学习笔记(二) js一些基本概念
Jun 18 Javascript
选择复选框按钮置灰否则按钮可用
May 22 Javascript
今天抽时间给大家整理jquery和ajax的相关知识
Nov 17 Javascript
将List对象列表转换成JSON格式的类实现方法
Jul 04 Javascript
Vue系列:通过vue-router如何传递参数示例
Jan 16 Javascript
vue的.vue文件是怎么run起来的(vue-loader)
Dec 10 Javascript
ES6 如何改变JS内置行为的代理与反射
Feb 11 Javascript
浅谈JS和jQuery的区别
Mar 27 jQuery
layui 弹出层回调获取弹出层数据的例子
Sep 02 Javascript
微信小程序实现菜单左右联动
May 19 Javascript
浅谈克隆 JavaScript
Nov 02 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
详细介绍:Apache+PHP+MySQL配置攻略
2006/09/05 PHP
ThinkPHP多语言支持与多模板支持概述
2014/08/22 PHP
在Mac上编译安装PHP7的开发环境
2015/07/28 PHP
Laravel框架控制器的middleware中间件用法分析
2019/09/30 PHP
PHP+Redis事务解决高并发下商品超卖问题(推荐)
2020/08/03 PHP
JSON 学习之完全手册 图文
2007/05/29 Javascript
JavaScript 函数参数是传值(byVal)还是传址(byRef) 分享
2013/07/02 Javascript
javascript正则表达式参数/g与/i及/gi的使用指南
2014/08/27 Javascript
Javascript原型链和原型的一个误区
2014/10/22 Javascript
莱鸟介绍javascript onclick事件
2016/01/06 Javascript
javascript cookie的简单应用
2016/02/24 Javascript
JS中使用apply、bind实现为函数或者类传入动态个数的参数
2016/04/26 Javascript
js获取页面及个元素高度、宽度的代码
2016/04/26 Javascript
JavaScript创建对象的七种方式(推荐)
2017/06/26 Javascript
js与jQuery实现的用户注册协议倒计时功能实例【三种方法】
2017/11/09 jQuery
vue组件编写之todolist组件实例详解
2018/01/22 Javascript
解决VUE中document.body.scrollTop为0的问题
2018/09/15 Javascript
vue-cli3中vue.config.js配置教程详解
2019/05/29 Javascript
使用axios请求接口,几种content-type的区别详解
2019/10/29 Javascript
JavaScript进制转换实现方法解析
2020/01/18 Javascript
vue组件实现移动端九宫格转盘抽奖
2020/10/16 Javascript
Python中实现switch功能实例解析
2018/01/11 Python
Python 实例方法、类方法、静态方法的区别与作用
2019/08/14 Python
Python中断多重循环的几种方式详解
2020/02/10 Python
关于Django Models CharField 参数说明
2020/03/31 Python
Python远程方法调用实现过程解析
2020/07/28 Python
土木工程毕业生自荐信
2013/11/12 职场文书
中学门卫岗位职责
2013/12/26 职场文书
幼儿园大班教学反思
2014/02/10 职场文书
《这儿真好》教学反思
2014/02/22 职场文书
《数星星的孩子》教学反思
2014/04/11 职场文书
广告宣传策划方案
2014/05/21 职场文书
发布会邀请函
2015/01/31 职场文书
人工作失职检讨书
2015/05/05 职场文书
2015年全国保险公众宣传日活动方案
2015/05/06 职场文书
2016教师政治学习心得体会
2016/01/23 职场文书