jquery版本的動(dòng)態(tài)編輯表格三

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>練習(xí)</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" />
    </form>
    </div>
    <div >
        <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">huang@qq.com</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版后話:這樣會(huì)存在一個(gè)問題就是表格中已經(jīng)存在一些原有的表格行數(shù)據(jù)并且沒有按過添加按鈕時(shí)時(shí)就不能進(jìn)行編輯和刪除，需要對(duì)代碼進(jìn)行調(diào)整
            2版問題：這樣會(huì)造成點(diǎn)擊一次編輯或者刪除按鈕會(huì)變成兩次按鈕，而且代碼不能復(fù)用
            3版(this):利用函數(shù)解決代碼復(fù)用，但是jquery不支持這樣做
        */
        function  adduser(){
            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>');
        }
        function delInput(){
            $("input[name='delInput']").click(function(){
                if (confirm('確定要?jiǎng)h除嗎')) {
                    $(this).parent().parent().remove();  //jquery最大特點(diǎn)可以自己刪除自己
                };
            });
        } 
        function editInput(){
            $("input[name='editInput']").click(function(){
                var i=1;
                if ($(this).val()=='編輯') {
                $(this).parent().siblings().each(function(){
                    $(this).html('<input type="text" value='+'"'+$(this).text()+'"'+''+' />');
                        i++;
                    });
                    $(this).val('保存');
                    return false;
                };
                if ($(this).val()=='保存') {
                    $(this).parent().siblings().each(function(){
                        $(this).text($(this).children().val());
                    i++;
                    });
                    $(this).val('編輯');
                    return false;
                };
            });
        }
        $('#add').click(function(){
            adduser();
            editInput();
            delInput();
        }
        editInput();
        delInput();
    });
</script>
</html>

新聞名稱：jquery版本的動(dòng)態(tài)編輯表格三
本文鏈接：http://jinyejixie.com/article8/psijip.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供品牌網(wǎng)站設(shè)計(jì)、云服務(wù)器、小程序開發(fā)、網(wǎng)站建設(shè)、搜索引擎優(yōu)化、微信小程序

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容

成人午夜视频全免费观看高清-秋霞福利视频一区二区三区-国产精品久久久久电影小说-亚洲不卡区三一区三区一区

jquery版本的動(dòng)態(tài)編輯表格三