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>

     

  • 相关阅读:
    Anaconda和Miniconda的安装
    并联谐振电路频率阻抗及计算曲线带宽案例摘要
    TEM波
    Android Studio实现简单考试应用程序
    android studio实现简单考试应用程序
    Android Studio的简易计算器界面设计
    时谐变换
    简要理解什么是趋肤效应
    c盘清理
    如何把Visual Studio完全安装在其他磁盘
  • 原文地址:https://www.cnblogs.com/pwm5712/p/3035297.html
Copyright © 2011-2022 走看看