基于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 相关文章推荐
greybox——不开新窗口看新的网页
Feb 20 Javascript
div浮层,滚动条移动,位置保持不变的4种方法汇总
Dec 11 Javascript
Node.js实现在目录中查找某个字符串及所在文件
Sep 03 Javascript
jQuery中find()方法用法实例
Jan 07 Javascript
js实现异步循环实现代码
Feb 16 Javascript
js表单处理中单选、多选、选择框值的获取及表单的序列化
Mar 08 Javascript
基于BootStrap Metronic开发框架经验小结【八】框架功能总体界面介绍
May 12 Javascript
AngularJS下对数组的对比分析
Aug 24 Javascript
获取JavaScript异步函数的返回值
Dec 21 Javascript
vue 纯js监听滚动条到底部的实例讲解
Sep 03 Javascript
JavaScript实现Tab选项卡切换
Feb 13 Javascript
jquery html添加元素/删除元素操作实例详解
May 20 jQuery
用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防CC攻击实现代码
2011/12/29 PHP
一个基于phpQuery的php通用采集类分享
2014/04/09 PHP
php+mysql实现简单的增删改查功能
2015/07/13 PHP
PHP计算加权平均数的方法
2015/07/16 PHP
laravel框架的安装与路由实例分析
2019/10/11 PHP
一个对于Array的简单扩展
2006/10/03 Javascript
extjs中grid中嵌入动态combobox的应用
2011/01/01 Javascript
快速排序 php与javascript的不同之处
2011/02/22 Javascript
jQuery判断元素是否是隐藏的代码
2011/04/24 Javascript
js与jquery中获取当前鼠标的x、y坐标位置的代码
2011/05/23 Javascript
JavaScript 产生不重复的随机数三种实现思路
2012/12/13 Javascript
把input初始值不写value的具体实现方法
2013/07/04 Javascript
javascript分页代码实例分享(js分页)
2013/12/13 Javascript
前台js对象在后台转化java对象的问题探讨
2013/12/20 Javascript
jquery简单实现外部链接用新窗口打开的方法
2015/05/30 Javascript
jQuery ztree实现动态树形多选菜单
2016/08/12 Javascript
jQuery 常见小例汇总
2016/12/14 Javascript
js实现带简单弹性运动的导航条
2017/02/22 Javascript
vue 解决computed修改data数据的问题
2019/11/06 Javascript
Python实现批量压缩图片
2018/01/25 Python
Python实现一个数组除以一个数的例子
2019/07/20 Python
Python大数据之从网页上爬取数据的方法详解
2019/11/16 Python
Numpy与Pytorch 矩阵操作方式
2019/12/27 Python
python如何实现复制目录到指定目录
2020/02/13 Python
Python函数参数分类原理详解
2020/05/28 Python
基于Python编写一个计算器程序,实现简单的加减乘除和取余二元运算
2020/08/05 Python
Python 代码调试技巧示例代码
2020/08/11 Python
快速解决pymongo操作mongodb的时区问题
2020/12/05 Python
MYPROTEIN澳大利亚官方网站:欧洲运动营养品牌
2019/06/26 全球购物
酒店大堂副理的职责范文
2014/02/13 职场文书
计算机专业求职信
2014/06/02 职场文书
大学生推广普通话演讲稿
2014/09/21 职场文书
2015年学校医务室工作总结
2015/07/20 职场文书
Opencv实现二维直方图的计算及绘制
2021/07/21 Python
Python torch.flatten()函数案例详解
2021/08/30 Python
Android Canvas绘制文字横纵向对齐
2022/06/05 Java/Android