jquery 版本的动态编辑表格二

浏览数：22 / 时间：2015年06月09日

<!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">huangyanxiong</td>
                <td align="center">[email protected]</td>
                <td align="center">12345678912</td>
                <td align="center">
                <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版问题（this）：这样会造成点击一次编辑或者删除按钮会变成两次按钮，而且代码不能复用
        */
            /*
                给添加按钮定义一个点击事件，并且获取用户值创建表格行进行存储
            */
            $(‘#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‘>"+$(this).val()+"</td>";  //专门获取属性值
                    i++;
                });
            $(‘#table‘).append(‘<tr>‘+td.join(‘‘)+"<td align=‘center‘>"+editInput+‘ ‘+delInput+"</td>"+‘</tr>‘);
            $(‘#reset‘).click();
            //console.info($(‘form[name="form1"]‘));
            /*
                为删除按钮添加点击事件并删除表格行
            */
            $("input[name=‘delInput‘]").click(function(){
                if (confirm(‘确定要删除吗‘)) {
                    $(this).parent().parent().remove();  //jquery最大特点可以自己删除自己
                };
            });
                 
            /*
                为删除按钮添加点击事件并编辑和保存表格行
            */
            $("input[name=‘editInput‘]").click(function(){
                    var i=1;
                    if ($(this).val()==‘编辑‘) {
                    $(this).parent().siblings().each(function(){
                        $(this).html(‘<input type="text" value=‘+‘"‘+$(this).text()+‘"‘+‘style="border-width: 0px;border: #FFFFFF;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;
                    };    
                });
            });
         
            /*
                为删除按钮添加点击事件并删除表格行
            */
            $("input[name=‘delInput‘]").click(function(){
                if (confirm(‘确定要删除吗‘)) {
                    $(this).parent().parent().remove();  //jquery最大特点可以自己删除自己
                };
            });
                 
            /*
                为删除按钮添加点击事件并编辑和保存表格行
            */
            $("input[name=‘editInput‘]").click(function(){
                    var i=1;
                    if ($(this).val()==‘编辑‘) {
                    $(this).parent().siblings().each(function(){
                        $(this).html(‘<input type="text" value=‘+‘"‘+$(this).text()+‘"‘+‘style="border-width: 0px;border: #FFFFFF;width:‘+($(this).width()-i)+‘px;height:‘+($(this).height()-5)+‘px;"‘+‘ />‘);
                            i++;
                        });
                        $(this).val(‘保存‘);
                        alert(123456);
                        return false;
                    };
                    //alert(123456);
                    if ($(this).val()==‘保存‘) {
                        $(this).parent().siblings().each(function(){
                            $(this).text($(this).children().val());
                        i++;
                        });
                        $(this).val(‘编辑‘);
                        return false;
                    };    
                });
    });
</script>
</html>

本文出自 “Freax” 博客，请务必保留此出处http://freax.blog.51cto.com/6614733/1365517

jquery 版本的动态编辑表格二,古老的榕树,5-wow.com

郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。

jquery 版本的动态编辑表格二