<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>练习</title>
</head>
<script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
<style type="text/css">
    .user{
        color: #DFDFDF;
    }
    table {
    border: 1px solid black;
    /*修正单元格之间的边框不能合并*/
    border-collapse: collapse;
    width:600px;
    }
    table td {
        border: 1px solid black;
        width: 25%;
    }
    table th {
        border: 1px solid black;
        width: 25%;
    }
    tbody th {
        background-color: #A3BAE9; 
    }
</style>
<body>
    <div>
    <form name="form1" id="form1" >
        username:<input type="text" id="username" name='user'  />
        mail:<input type="text" id="mail" name="user" />
        phone:<input type="text" id="phone" name="user" />
        <input type="button" value="添加" id="add" />
        <input type="reset" value="重写" id="reset" />
    </form>
    </div>
    <div style="margin-top:50px;">
        <table  id="table">
            <tr>
                <th align="center" >username</th>
                <th align="center" >mail</th>
                <th align="center" >phone</th>
                <th align="center" >操作</th>
            </tr>
            <tr>
                <td align="center" class="userval">huangyanxiong</td>
                <td align="center" class="userval">huang@qq.com</td>
                <td align="center" class="userval">12345678912</td>
                <td align="center" class="userval">
                <input type="button" value="编辑" name="editInput" />
                <input type="button" value="删除" name="delInput" />
                </td>
            </tr>
            <tr>
                <td align="center" class="userval">huangyanxiong</td>
                <td align="center" class="userval">huang@qq.com</td>
                <td align="center" class="userval">12345678912</td>
                <td align="center" class="userval">
                <input type="button" value="编辑" name="editInput" />
                <input type="button" value="删除" name="delInput" />
                </td>
            </tr>
            <tr>
                <td align="center" class="userval">huangyanxiong</td>
                <td align="center" class="userval">huang@qq.com</td>
                <td align="center" class="userval">12345678912</td>
                <td align="center" class="userval">
                    <input type="button" value="编辑" name="editInput" />
                    <input type="button" value="删除" name="delInput" />
                </td>
            </tr>
        </table>
    </div>
</body>
<script type="text/javascript">
    $(document).ready(function(){
        /*
            1版后话:这样会存在一个问题就是表格中已经存在一些原有的表格行数据并且没有按过添加按钮时时就不能进行编辑和删除，需要对代码进行调整
            2版问题：这样会造成点击一次编辑或者删除按钮会变成两次按钮，而且代码不能复用
            3版(this):利用函数解决代码复用，但是jquery不支持这样做
            4版使用jquery的插件方案，解决代码不能复用的问题，但是没有解决点击一次变成两次的问题
            5将1234版遗留问题解决，解决方法就是 采用jquery的事件委派来解决---live();jQuery 给所有匹配的元素附加一个事件处理函数，即使这个元素是以后再添加进来的也有效。
            6版：新增功能双击可以编辑表格失败告终，搞出一堆问题，事件委派live()的特点会将所有元素都添加上事件(jquery叫冒泡)，会冒泡到dom树的最顶层，实在太夸张了，还有最后一个问题
            7版：暂时不解决6版的问题实在想不到怎么搞，完成双击编辑表格
        */
        /*
            委派点击事件给选择器匹配的编辑按钮
        */
        /*$('input[name="editInput"]').click(function(event){
            event.stopPropagation();    // do something
          }); */
        $(document).on('click','input[name="editInput"]',function(){
            var i=1;
            if ($(this).val()=='编辑') {
            $(this).parent().siblings().each(function(){
                $(this).html('<input type="text" value='+'"'+$(this).text()+'"'+'style="border-width: 0px;width:'+($(this).width()-i)+'px;height:'+($(this).height()-5)+'px;"'+' />');
                    i++;
                });
                $(this).val('保存');
                return false;
            };
            if ($(this).val()=='保存') {
                $(this).parent().siblings().each(function(){
                    $(this).text($(this).children().val());
                i++;
                });
                $(this).val('编辑');
                return false;
            };
        });
        /*
            委派点击事件给选择器匹配删除按钮
        */
        $(document).on('click','input[name="delInput"]',function(){
            if (confirm('确定要删除吗')) {
                $(this).parent().parent().remove();  //jquery最大特点可以自己删除自己
            };
        });
        /*
                给添加按钮定义一个点击事件，并且获取用户值创建表格行进行存储
        */
        $('#add').click(function(){
            var td=new Array();
            var editInput="<input type='button' value='编辑' name='editInput'/>";
            var delInput="<input type='button' value='删除' name='delInput'/>";
            var i=0;
              
            $("input[name='user']").each(function(){
                td[i]="<td align='center' class='userval'>"+$(this).val()+"</td>";  //专门获取属性值
                i++;
            });
            $('th[align="center"]').parent().after('<tr>'+td.join('')+"<td align='center'>"+editInput+' '+delInput+"</td>"+'</tr>');
            $('#reset').click();
        });
        //找到所有的需要绑定事件的td并且把这些td里面含有input 元素的td排除,并且委派双击事件  find（）方法适合找个一个元素里面包含的元素
        /*Uncaught Error: Syntax error, unrecognized expression: td[align="center"].not([object Object]) jquery-1.8.3.min.js:2
        nt.error jquery-1.8.3.min.js:2
        ut jquery-1.8.3.min.js:2
        vt jquery-1.8.3.min.js:2
        g.querySelectorAll.vt jquery-1.8.3.min.js:2
        nt jquery-1.8.3.min.js:2
        v.event.dispatch jquery-1.8.3.min.js:2
        v.event.add.o.handle.u
        */
        //editTd=$('td[align="center"]').not($('td[align="center"]').find('input').parent());  当我点击这里会提示出错，如下
        //error:Uncaught Error: Syntax error, unrecognized expression: td[align="center"].not([object Object])     只能用class来取代
        $(document).on('dblclick','td[class="userval"]',function(){
            //这个判断是防止用户再次进行双击把值清空
            if (!$(this).children().length) {
                $(this).html('<input type="text" value='+'"'+$(this).text()+'"'+'style="border-width: 0px;width:'+($(this).width())+'px;height:'+($(this).height()-1)+'px;"'+' />');
                $(this).children().focus();
                var value=$(this).children().val();
                $(this).children().val('');
                $(this).children().val(value);
                $(this).focusout(function(){
                    $(this).text($(this).children().val());
                });
            };
        });
    });
</script>
</html>