基于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 EasyUI API 中文文档 - Tree树使用介绍
Nov 19 Javascript
用js来获取上传的文件名纯粹是为了美化而用
Oct 23 Javascript
用js正确判断用户名cookie是否存在的方法
Jan 28 Javascript
jQuery trigger()方法用法介绍
Jan 13 Javascript
基于jQuery.Hz2Py.js插件实现的汉字转拼音特效
May 07 Javascript
javascript HTML+CSS实现经典橙色导航菜单
Feb 16 Javascript
详解基于webpack搭建react运行环境
Jun 01 Javascript
详解angularjs popup-table 弹出框表格指令
Sep 20 Javascript
详解Vue微信授权登录前后端分离较为优雅的解决方案
Jun 29 Javascript
微信小程序如何实现点击图片放大功能
Jan 21 Javascript
ES6使用新特性Proxy实现的数据绑定功能实例
May 11 Javascript
JS的时间格式化和时间戳转换函数示例详解
Jul 27 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的宝库目录--PEAR
2006/10/09 PHP
php 多线程上下文中安全写文件实现代码
2009/12/28 PHP
php删除文件夹及其文件夹下所有文件的函数代码
2013/01/23 PHP
php实现图片缩放功能类
2013/12/18 PHP
twig里使用js变量的方法
2016/02/05 PHP
thinkphp项目部署到Linux服务器上报错“模板不存在”如何解决
2016/04/27 PHP
使用PHP json_decode可能遇到的坑与解决方法
2017/08/03 PHP
js优化针对IE6.0起作用(详细整理)
2012/12/25 Javascript
js读取配置文件自写
2014/02/11 Javascript
jquery模拟LCD 时钟的html文件源代码
2014/06/16 Javascript
Js 正则表达式知识汇总
2014/12/02 Javascript
jQuery中dequeue()方法用法实例
2014/12/29 Javascript
基于jQuery实现文字打印动态效果
2017/04/21 jQuery
微信小程序canvas写字板效果及实例
2017/06/15 Javascript
React应用中使用Bootstrap的方法
2017/08/15 Javascript
JS写XSS cookie stealer来窃取密码的步骤详解
2017/11/20 Javascript
vue组件中的样式属性scoped实例详解
2018/10/30 Javascript
JavaScript学习笔记之基于定时器实现图片无缝滚动功能详解
2019/01/09 Javascript
微信小程序bindinput与bindsubmit的区别实例分析
2019/04/17 Javascript
解决Angularjs异步操作后台请求用$q.all排列先后顺序问题
2019/11/29 Javascript
JavaScript队列结构Queue实现过程解析
2020/03/07 Javascript
Postman如何实现参数化执行及断言处理
2020/07/28 Javascript
JS JQuery获取data-*属性值方法解析
2020/09/01 jQuery
不依任何赖第三方,单纯用vue实现Tree 树形控件的案例
2020/09/21 Javascript
Python 新建文件夹与复制文件夹内所有内容的方法
2018/10/27 Python
opencv实现图片模糊和锐化操作
2018/11/19 Python
pyQT5 实现窗体之间传值的示例
2019/06/20 Python
python笔记之mean()函数实现求取均值的功能代码
2019/07/05 Python
Python解释器以及PyCharm的安装教程图文详解
2020/02/26 Python
基于python实现FTP文件上传与下载操作(ftp&amp;sftp协议)
2020/04/01 Python
CSS3教程(1):什么是CSS3
2009/04/02 HTML / CSS
2014年教师政治学习材料
2014/06/02 职场文书
2014年卫生院工作总结
2014/12/03 职场文书
学校元旦晚会开场白
2014/12/14 职场文书
丽江古城导游词
2015/02/03 职场文书
通过Python把学姐照片做成拼图游戏
2022/02/15 Python