zoukankan      html  css  js  c++  java
  • javasciptdom编程 table对象 练习

    排名练习:向表格添加数据,当编号遇到重复给予提示并且无法添加,而且按排名顺序添加数据

    参考代码:

    <!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>

     

  • 相关阅读:
    CSS浮动(float、clear)通俗讲解
    JAVA 类的加载
    数据库操作 delete和truncate的区别
    正则表达式 匹配相同数字
    Oracle EBS OM 取消订单
    Oracle EBS OM 取消订单行
    Oracle EBS OM 已存在的OM订单增加物料
    Oracle EBS OM 创建订单
    Oracle EBS INV 创建物料搬运单头
    Oracle EBS INV 创建物料搬运单
  • 原文地址:https://www.cnblogs.com/pwm5712/p/3035297.html
Copyright © 2011-2022 走看看