基于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 相关文章推荐
IE6图片加载的一个BUG解决方法
Jul 13 Javascript
从零开始学习jQuery (二) 万能的选择器
Oct 01 Javascript
jquery加载页面的方法(页面加载完成就执行)
Jun 21 Javascript
JavaScript中“+”的陷阱深刻理解
Dec 04 Javascript
有关于eclipse配置spket需要注意的一些地方
Apr 07 Javascript
node.js中的http.response.end方法使用说明
Dec 14 Javascript
js document.getElementsByClassName的使用介绍与自定义函数
Nov 25 Javascript
简单理解vue中实例属性vm.$els
Dec 01 Javascript
JS实现Ajax的方法分析
Dec 20 Javascript
angularjs+bootstrap实现自定义分页的实例代码
Jun 19 Javascript
Vue.js实现可排序的表格组件功能示例
Feb 19 Javascript
vscode中的vue项目报错Property ‘xxx‘ does not exist on type ‘CombinedVueInstance<{ readyOnly...Vetur(2339)
Sep 11 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/08/20 PHP
解析php DOMElement 操作xml 文档的实现代码
2013/05/10 PHP
php如何解决无法上传大于8M的文件问题
2014/03/10 PHP
php实现数组筛选奇数和偶数示例
2014/04/11 PHP
typecho插件编写教程(五):核心代码
2015/05/28 PHP
PHP中的类型提示(type hinting)功能介绍
2015/07/01 PHP
CodeIgniter配置之database.php用法实例分析
2016/01/20 PHP
PHP实现二维数组中的查找算法小结
2018/06/09 PHP
js鼠标滑轮滚动事件绑定的简单实例(兼容主流浏览器)
2014/01/14 Javascript
原生JavaScript实现合并多个数组示例
2014/09/21 Javascript
node.js中的console用法总结
2014/12/15 Javascript
JavaScript从数组中删除指定值元素的方法
2015/03/18 Javascript
JavaScript事件代理和委托详解
2016/04/08 Javascript
JS结合bootstrap实现基本的增删改查功能
2016/07/22 Javascript
JavaScript三种绑定事件方式及相互之间的区别分析
2017/01/10 Javascript
JS实现可针对算术表达式求值的计算器功能示例
2018/09/04 Javascript
python 出现SyntaxError: non-keyword arg after keyword arg错误解决办法
2017/02/14 Python
python模块smtplib实现纯文本邮件发送功能
2018/05/22 Python
python批量解压zip文件的方法
2019/08/20 Python
python实现的生成word文档功能示例
2019/08/23 Python
关于pycharm中pip版本10.0无法使用的解决办法
2019/10/10 Python
Django中F函数的使用示例代码详解
2020/07/06 Python
vscode配置anaconda3的方法步骤
2020/08/08 Python
Lookfantastic日本官网:英国知名护肤、化妆品和头发护理购物网站
2018/04/21 全球购物
Solid & Striped官网:美国泳装品牌
2019/06/19 全球购物
Collection和Collections的区别
2016/05/02 面试题
SQL Server 2000数据库的文件有哪些,分别进行描述
2013/03/30 面试题
个人找工作自荐信格式
2013/09/21 职场文书
团日活动总结范文
2014/04/25 职场文书
社区文化建设方案
2014/05/02 职场文书
学习教师敬业奉献模范事迹材料思想汇报
2014/09/19 职场文书
前台岗位职责
2015/02/13 职场文书
汽车销售助理岗位职责
2015/04/14 职场文书
大学团日活动总结书
2015/05/11 职场文书
傲慢与偏见电影观后感
2015/06/10 职场文书
css filter和getUserMedia的联合使用
2022/02/24 HTML / CSS