溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊(cè)×
其他方式登錄
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》

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

發(fā)布時(shí)間：2020-07-08 04:36:26 來源：網(wǎng)絡(luò) 閱讀：366 作者：huangyanxiong 欄目：web開發(fā) 
<!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(){
        /*
          一開始以為做一個(gè)可以動(dòng)態(tài)編輯的表格很簡(jiǎn)單，雖然開始的時(shí)候用javascript做過一次，
在jquery下又是不一樣的了，可是做起來之后問題真的很多，
而且還很難解決，不斷的要看文檔，但是沒有辦法，不然我現(xiàn)在還對(duì)jquery不是很熟悉
，就是希望通過自己寫簡(jiǎn)單的項(xiàng)目來試試手，增加自己對(duì)jquery的熟悉度，如果你也跟著做下去相信你會(huì)漲姿勢(shì)的了，
以下我剛寫完第一個(gè)的版本的jquery編輯表格遇到的問題，以前老師講的都是皮毛，只是知道一兩個(gè)簡(jiǎn)單的選擇器，再加一些
簡(jiǎn)單的方法，并沒有怎么深入，現(xiàn)在自己就深入了解，沒有想到j(luò)query還真多東西研究的
            這樣會(huì)存在一個(gè)問題就是表格中已經(jīng)存在一些原有的表格行數(shù)據(jù)并且沒有按過添加按鈕時(shí)時(shí)就不能進(jìn)行編輯和刪除，需要對(duì)代碼進(jìn)行調(diào)整
        */
            /*
                給添加按鈕定義一個(gè)點(diǎn)擊事件，并且獲取用戶值創(chuàng)建表格行進(jìn)行存儲(chǔ)
            */
            $('#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>');
            console.info($('form[name="form1"]'));
            /*
                為刪除按鈕添加點(diǎn)擊事件并刪除表格行
            */
            $("input[name='delInput']").click(function(){
                if (confirm('確定要?jiǎng)h除嗎')) {
                    $(this).parent().parent().remove();  //jquery最大特點(diǎn)可以自己刪除自己
                };
            });
                                                      
            /*
                為刪除按鈕添加點(diǎn)擊事件并編輯和保存表格行
            */
            $("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;
                    };
                });
            });
    });
</script>
</html>


向AI問一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手