基于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 相关文章推荐
3Z版基于jquery的图片复选框(asp.net+jquery)
Apr 12 Javascript
jquery定时滑出可最小化的底部提示层特效代码
Oct 02 Javascript
3种Jquery限制文本框只能输入数字字母的方法
Dec 03 Javascript
jQuery实现div拖拽效果实例分析
Feb 20 Javascript
Bootstrap每天必学之轮播(Carousel)插件
Apr 25 Javascript
Javascript表单特效之十大常用原理性样例代码大总结
Jul 12 Javascript
浅谈javascript控制HTML5的全屏操控,浏览器兼容的问题
Oct 10 Javascript
AngularJs表单校验功能实例代码
Feb 09 Javascript
微信小程序+腾讯地图开发实现路径规划绘制
May 22 Javascript
微信小程序报错: thirdScriptError的错误问题
Jun 19 Javascript
Jquery 获取相同NAME 或者id删除行操作
Aug 24 jQuery
vue实现简易音乐播放器
Aug 14 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文本转图片自动换行的方法
2013/03/13 PHP
thinkphp的c方法使用示例
2014/02/24 PHP
PHP实现将视频转成MP4并获取视频预览图的方法
2015/03/12 PHP
php生成验证码函数
2015/10/20 PHP
详解WordPress中添加和执行动作的函数使用方法
2015/12/29 PHP
php多线程并发实现方法
2016/09/30 PHP
JavaScript 在线压缩和格式化收藏
2009/01/16 Javascript
ASP.NET jQuery 实例2 (表单中使用回车在TextBox之间向下移动)
2012/01/13 Javascript
jQuery插件的写法分享
2013/06/12 Javascript
在JavaScript中判断整型的N种方法示例介绍
2014/06/18 Javascript
Javascript模块化编程详解
2014/12/01 Javascript
JS+DIV实现鼠标划过切换层效果的方法
2015/05/25 Javascript
js实现图片无缝滚动
2015/12/23 Javascript
json对象转为字符串,当做参数传递时加密解密的实现方法
2016/06/29 Javascript
详解ES6中的let命令
2020/04/05 Javascript
详解前后端分离之VueJS前端
2017/05/24 Javascript
JavaScript伪数组用法实例分析
2017/12/22 Javascript
JavaScript寄生组合式继承实例详解
2018/01/06 Javascript
vue项目创建步骤及路由router
2020/01/14 Javascript
JS实现图片懒加载(lazyload)过程详解
2020/04/02 Javascript
Ant-design-vue Table组件customRow属性的使用说明
2020/10/28 Javascript
利用python发送和接收邮件
2016/09/27 Python
python3用PIL把图片转换为RGB图片的实例
2019/07/04 Python
python爬虫之快速对js内容进行破解
2019/07/09 Python
AUC计算方法与Python实现代码
2020/02/28 Python
解决windows下python3使用multiprocessing.Pool出现的问题
2020/04/08 Python
python 一维二维插值实例
2020/04/22 Python
Python flask框架实现浏览器点击自定义跳转页面
2020/06/04 Python
Python读取Excel一列并计算所有对象出现次数的方法
2020/09/04 Python
Pycharm学生免费专业版安装教程的方法步骤
2020/09/24 Python
中专生自我鉴定书范文
2013/12/28 职场文书
挖掘机司机岗位职责
2014/02/12 职场文书
《走一步再走一步》教学反思
2014/02/15 职场文书
初中作文评语大全
2014/04/23 职场文书
2014年房地产销售工作总结
2014/12/01 职场文书
行政文员岗位职责
2015/02/04 职场文书