增删改table的元素

清华大佬耗费三个月吐血整理的几百G的资源,免费分享!....>>>

<!DOCTYPE html>
<html>
  <head>
    <title>register</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
    <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
    <meta name="apple-mobile-web-app-capable" content="yes"/>
    <link href="register.css" type="text/css" rel="stylesheet"/>
    <script type="text/javascript" src="jslib/jquery-1.6.min.js"></script>
    <script>
    function edit(){
        $('span').css('display','block');
        $('.revise').css('display','block');
        $("#edit").css("display","none");
        $("#removeedit").css("display","block");
    }
    function removeedit(){
        $('span').css('display','none');
        $('.revise').css('display','none');
        $("#edit").css("display","block");
        $("#removeedit").css("display","none");
    }
    function add(){   
         $("tbody").append($('<tr><td>' + $("#name").val() +'</td><td>'+$("#sex").val()+'</td><td>'+$("#phone").val()+'</td><td><span>删除</span></td><td><p id="revise" class="revise">修改</p></td><td><p id ="keep">保存</p></td></tr>'));
    }
    $(function(){ 
        $("#list").delegate("td span","click",function(e){
          $(this).parents("tr").remove();
        })         
    })
    $(function(){ //让input为可编辑状态
        $("#list").delegate("td #revise","click",function(a){
          $(this).parents("tr").find("input").removeAttr("disabled","disabled");
          $(this).css("display","none");
          $(this).parents("tr").find("#keep").css("display","block");
        })   
        $("#list").delegate("td #revise","click",function(a){
          $(this).parents("tr").find("select").removeAttr("disabled","disabled");
        })   
        $("#list").delegate("td #keep","click",function(a){
          $(this).parents("tr").find("input").attr("disabled","true");
          $(this).css('display','none');
        })
        $("#list").delegate("td #keep","click",function(a){
          $(this).parents("tr").find("select").attr("disabled","true");
        })  
    })
    </script>
  </head>
  <body>
    <div class="content">
        <table id ="list" border="0" cellpadding="0" cellspacing="0">
            <thead>
                <tr>
                    <th>姓名</th>
                    <th>性别</th>
                    <th>手机号</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td><input type="text" class="on" value="hello" disabled="true"/></td>
                    <td>
                        <select disabled="true">
                            <option>男</option>
                             <option>女</option>
                        </select>
                    </td>
                    <td><input type="text" class="on" value="18329137530" disabled="true"/></td>
                    <td><span>删除</span></td>
                    <td><p id="revise" class="revise">修改</p></td>
                    <td><p id ="keep" class="keep">保存</p></td>
                </tr>
                <tr>
                    <td><input class="on" type="text" value="hello" disabled="true"/></td>
                    <td>
                        <select disabled="true">
                            <option>男</option>
                             <option>女</option>
                        </select>
                    </td>
                    <td><input type="text" class="on" value="18329137530" disabled="true"/></td>
                    <td><span>删除</span></td>
                    <td><p id="revise" class="revise">修改</p></td>
                    <td><p id ="keep" class="keep">保存</p></td>
                </tr>
                <tr>
                    <td><input type="text" class="on" value="hello" disabled="true"/></td>
                    <td>
                        <select disabled="true">
                            <option>男</option>
                             <option>女</option>
                        </select>
                    </td>
                    <td><input type="text" class="on" value="18329137530" disabled="true"/></td>
                    <td><span>删除</span></td>
                    <td><p id="revise" class="revise">修改</p></td>
                    <td><p id ="keep" class="keep">保存</p></td>
                </tr>
            </tbody>
        </table>    
        <button onclick="document.getElementById('add').style.display='block'">添加</button></br>
        <button id="edit" onclick="edit()">编辑</button>
        <button id="removeedit" class = "removeedit" onclick="removeedit()">退出编辑</button>
    </div>  
    <div class="add" id="add">
        姓名:<input id="name" type="text"/ value=""></br>
        性别: <select id="sex">
                <option>男</option> 
                <option>女</option> 
              </select></br>
        电话: <input id = "phone" type="text"/></br>
        <button id = "cancel">取消</button>
            <button id = "confirm" onclick="add(),document.getElementById('add').style.display='none'">确定</button>
    </div>
  </body>
</html>