zoukankan      html  css  js  c++  java
  • javascript的部分功能实现

    在表格中实现删除、添加和确定功能。在javascript中找准节点是很重要的一个环节,浏览器的不同代表的节点就不同了,比如火狐和谷歌浏览器换行也是一个节点,在IE浏览器中换行不算是一个节点,这个要理解清楚:对我我这个做的还部完美,还需要改进:

      <html>
    <head lang="en">
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            table{
                900px;
                height: 400px;
                margin:0px auto;
            }
            table td{
                150px;
                height: 100px;
            }
            input{
                border: none;
            }

        </style>

    <script type="text/javascript">

        function fun1(){
            var tr=document.getElementsByTagName("tr");
            var i=0;
            for(i=0;i<3;i++){
                tr[0].cells[i].innerHTML="";
            }
        }
        function fun2(){
            var tr=document.getElementsByTagName("tr");
            var i=0;
            for(i=0;i<3;i++){
                tr[1].cells[i].innerHTML="";
            }
        }
        function fun3(){
            var tr=document.getElementsByTagName("tr");
            var i=0;
            for(i=0;i<3;i++){
                tr[2].cells[i].innerHTML="";
            }
        }
        function fun4(){
            var tr=document.getElementsByTagName("tr");
            var i=0;
            for(i=0;i<3;i++){
                tr[3].cells[i].innerHTML="";
            }
        }
        var ip=document.getElementsByTagName("input");
        function fun5(){
            for(var i=0;i<3;i++){
                ip[i].removeAttribute("readonly");
            }
        }

        function fun6(){
            for(var i=5;i<8;i++){
                ip[i].removeAttribute("readonly");
            }
        }
        function fun7(){
            for(var i=10;i<13;i++){
                ip[i].removeAttribute("readonly");
            }
        }
        function fun8(){
            for(var i=15;i<18;i++){
                ip[i].removeAttribute("readonly");
            }
        }


        function fun9(){
            var body =document.getElementsByTagName("tbody")[0];
            var tr =document.getElementsByTagName("tr");
             var  tr1=document.createElement("tr");
            tr1.innerHTML="<td></td>" +
                            "<td></td>" +
                            "<td></td>" +
                            "<td></td>" +
                            "<td></td>" +
                            "<td></td>"
            body.appendChild(tr1);
        }
    </script>


    </head>
    <body>
    <table border="1" cellpadding="0" cellspacing="0">
        <tbody>
        <tr>
            <td><input value="1111111111111" readonly="readonly"/></td>
            <td><input value="222222222222" readonly="readonly"/></td>
            <td><input value="333333333333" readonly="readonly"/></td>
            <td><input type="button" value="删除" onclick="fun1()"/></td>
            <td><input type="button" value="修改" onclick="fun5()"/></td>
            <td><a href="">确定</a></td>
        </tr>
        <tr>
            <td><input value="44444444" readonly="readonly"/></td>
            <td><input value="5555555555" readonly="readonly"/></td>
            <td><input value="666666666" readonly="readonly"/></td>
            <td><input type="button" value="删除" onclick="fun2()"/></td>
            <td><input type="button" value="修改" onclick="fun6()"/></td>
            <td><a href="">确定</a></td>
        </tr>
        <tr>
            <td><input value="7777777777" readonly="readonly"/></td>
            <td><input value="88888888888" readonly="readonly"/></td>
            <td><input value="99999999999" readonly="readonly"/></td>
            <td><input type="button" value="删除" onclick="fun3()"/></td>
            <td><input type="button" value="修改" onclick="fun7()"/></td>
            <td><a href="">确定</a></td>
        </tr>
        <tr>
            <td><input value="aaaaaaaaa" readonly="readonly"/></td>
            <td><input value="bbbbbbbb" readonly="readonly"/></td>
            <td><input value="ccccccc" readonly="readonly"/></td>
            <td><input type="button" value="删除" onclick="fun4()"/></td>
            <td><input type="button" value="修改" onclick="fun8()"/></td>
            <td><a href="">确定</a></td>
        </tr>
        </tbody>
        <tr>
            <td colspan="6"><input type="button" value="添加" onclick="fun9()"/></td>
        </tr>

    </table>

    </body>
    </html>

    在这当中也是需要注意的地方就是就是对单词的把控,,对于我来说单词是最重要的环节,对于这个单词的部熟悉就会连错都找不到,很痛苦的回忆。。

  • 相关阅读:
    SpringBoot连接数据库
    String、StringBuffer、StringBulider的区别和解析
    异常This application has no explicit mapping for /error
    node使用
    JS总结defer与async(一)
    前端项目搭建与知识框架
    git ssh配置总结
    JS算法
    JS数据结构
    Http与Http2与Https区别和联系
  • 原文地址:https://www.cnblogs.com/wangjunjunjiayuan/p/4510677.html
Copyright © 2011-2022 走看看