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>

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

原文地址:https://www.cnblogs.com/wangjunjunjiayuan/p/4510677.html