基于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实现点击按钮弹出可关闭层的浮动层插件
Sep 19 Javascript
只要1K 纯JS脚本送你一朵3D红色玫瑰
Aug 09 Javascript
angularJS深拷贝详解
Mar 23 Javascript
JS实现十字坐标跟随鼠标效果
Dec 25 Javascript
vue一个页面实现音乐播放器的示例
Feb 06 Javascript
AngularJS创建一个上传照片的指令实例代码
Feb 24 Javascript
浅谈React 服务器端渲染的使用
May 08 Javascript
Node如何后台数据库使用增删改查功能
Nov 21 Javascript
webgl实现物体描边效果的方法介绍
Nov 27 Javascript
JavaScript对象属性操作实例解析
Feb 04 Javascript
vue created钩子函数与mounted钩子函数的用法区别
Nov 05 Javascript
在vue中import()语法不能传入变量的问题及解决
Apr 01 Vue.js
用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调用wsdl文件类型的接口代码分享
2014/11/19 PHP
linux平台编译安装PHP7并安装Redis扩展与Swoole扩展实例教程
2016/09/30 PHP
stripos函数知识点实例分享
2019/02/11 PHP
使用ucenter实现多站点同步登录的讲解
2019/03/21 PHP
jquery下为Event handler传递动态参数的代码
2011/01/06 Javascript
对javascript的一点点认识总结《javascript高级程序设计》读书笔记
2011/11/30 Javascript
Jquery弹出层插件ThickBox的使用方法
2014/12/09 Javascript
javascript实现炫酷的拖动分页
2015/05/11 Javascript
JavaScript探测CSS动画是否已经完成的方法
2016/08/30 Javascript
微信小程序 下拉列表的实现实例代码
2017/03/08 Javascript
JavaScript实现图片本地预览功能【不用上传至服务器】
2017/09/20 Javascript
IntelliJ IDEA 安装vue开发插件的方法
2017/11/21 Javascript
JS防抖和节流实例解析
2019/09/24 Javascript
Vue调用后端java接口的实例代码
2019/10/28 Javascript
Vue中函数防抖节流的理解及应用实现
2020/04/24 Javascript
vue单文件组件无法获取$refs的问题
2020/06/24 Javascript
微信小程序实现发微博功能的示例代码
2020/06/24 Javascript
原生js实现点击按钮复制内容到剪切板
2020/11/19 Javascript
[45:44]完美世界DOTA2联赛PWL S2 FTD vs PXG 第一场 11.27
2020/12/01 DOTA
[54:17]DOTA2-DPC中国联赛定级赛 RNG vs iG BO3第二场 1月10日
2021/03/11 DOTA
python实现超简单端口转发的方法
2015/03/13 Python
Python实现按特定格式对文件进行读写的方法示例
2017/11/30 Python
Python实现随机漫步功能
2018/07/09 Python
pygame游戏之旅 计算游戏中躲过的障碍数量
2018/11/20 Python
python实现连续图文识别
2018/12/18 Python
python3 mmh3安装及使用方法
2019/10/09 Python
pytorch 批次遍历数据集打印数据的例子
2019/12/30 Python
家长会演讲稿范文
2014/01/10 职场文书
模具数控专业自荐信
2014/01/27 职场文书
秋天的雨教学反思
2014/04/27 职场文书
专项法律服务方案
2014/06/11 职场文书
药品营销专业毕业生自荐信
2014/07/02 职场文书
2014医学院领导干部四风对照检查材料思想汇报
2014/09/16 职场文书
股东出资证明书(正规版)
2014/09/24 职场文书
2015年感恩父亲节演讲稿
2015/03/19 职场文书
zabbix自定义监控nginx状态实现过程
2021/11/01 Servers