jQuery之模態(tài)編輯框?qū)嵗ㄎ谋精@取值與設(shè)置值）-創(chuàng)新互聯(lián)

代碼

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jquery3.js"></script>
    <style>
        .modal{
            position: fixed;
            top: 50%;
            left: 50%;
            height: 400px;
           width: 400px;
            margin-left: -250px;
            margin-top: -250px;
            background-color: #dddddd;
            z-index: 10;
        }
        .shadow{
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            opacity: 0.6;
            background-color: black;
            z-index: 9;
        }
        .hide{
            display: none;
        }
    </style>
</head>
<body>
    <input type="button" onclick="addElement()" value="添加">
    <table border="1">
        <thead>
        <tr>
            <th >序號(hào)</th>
            <th >IP</th>
            <th >端口</th>
            <th >操作</th>
        </tr>
        </thead>
        <tbody>
        <tr>
            <td>1</td>
            <td>1.1.1.1</td>
            <td>80</td>
            <td><a class="edit">編輯</a> | <a class="delete">刪除</a></td>
        </tr>
        <tr>
            <td>2</td>
            <td>2.2.2.2</td>
            <td>80</td>
            <td><a class="edit">編輯</a> | <a class="delete">刪除</a></td>
        </tr>
        <tr>
            <td>3</td>
            <td>3.3.3.3</td>
            <td>80</td>
            <td><a class="edit">編輯</a> | <a class="delete">刪除</a></td>
        </tr>
        </tbody>
    </table>
    <div class="shadow hide"></div>
    <div class="modal hide">
        <div>
            <span>序號(hào)：</span><label id="id"></label>
            <input id="hostname" name="hostname" type="test">
            <input id="port" name="port" type="test">
            <br>
            <input type="button" value="提交" onclick="subbiteData()">
            <input type="button" value="取消" onclick="cancalModal()">
        </div>
    </div>

    <script>
        function addElement() {
            $(".shadow,.modal").removeClass('hide')
            $("#hostname").val("")
            $("#port").val("")

        }
        function cancalModal() {
            $(".shadow,.modal").addClass('hide')
        }
        $('.edit').click(function () {
            $(".shadow,.modal").removeClass('hide')
            //this當(dāng)表當(dāng)前點(diǎn)擊的標(biāo)簽
            var tds = $(this).parent().prevAll()
            //獲取<td>內(nèi)容</td>獲取中間的內(nèi)容
            //賦值給input標(biāo)簽中的value值
            //$(tds[0]).text()         獲取文本內(nèi)容
            //$(tds[0]).text('xxx')    設(shè)置文本內(nèi)容
            //(..).val()               獲取相對(duì)應(yīng)類型的value值
            //(..).val(..)             設(shè)置相對(duì)應(yīng)類型的value值
            var port = ($(tds[0]).text())
            var hostname = ($(tds[1]).text())
            var id = ($(tds[2]).text())
            //其中一種比較簡(jiǎn)易的寫法
            // $("#hostname").val(hostname)
            // $("#port").val(port)
            //通過(guò)獲取標(biāo)簽屬性操作
            $('.modal input[name="hostname"]').val(hostname)
            $('.modal input[name="port"]').val(port)
            $("#id").text(id)

        })
        function subbiteData() {
            //暫沒提交功能
            var id = $("#id").text()
            console.log(id)

        }
    </script>
</body>
</html>

展示

jQuery 之 模態(tài)編輯框?qū)嵗ㄎ谋精@取值與設(shè)置值）

成都創(chuàng)新互聯(lián)公司專注為客戶提供全方位的互聯(lián)網(wǎng)綜合服務(wù)，包含不限于成都網(wǎng)站建設(shè)、成都網(wǎng)站制作、界首網(wǎng)絡(luò)推廣、微信小程序、界首網(wǎng)絡(luò)營(yíng)銷、界首企業(yè)策劃、界首品牌公關(guān)、搜索引擎seo、人物專訪、企業(yè)宣傳片、企業(yè)代運(yùn)營(yíng)等，從售前售中售后，我們都將竭誠(chéng)為您服務(wù)，您的肯定，是我們大的嘉獎(jiǎng)；成都創(chuàng)新互聯(lián)公司為所有大學(xué)生創(chuàng)業(yè)者提供界首建站搭建服務(wù)，24小時(shí)服務(wù)熱線：18982081108，官方網(wǎng)址：muchs.cn

另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內(nèi)外云服務(wù)器15元起步，三天無(wú)理由+7*72小時(shí)售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國(guó)服務(wù)器、虛擬主機(jī)、免備案服務(wù)器”等云主機(jī)租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡(jiǎn)單易用、服務(wù)可用性高、性價(jià)比高”等特點(diǎn)與優(yōu)勢(shì)，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場(chǎng)景需求。

當(dāng)前題目：jQuery之模態(tài)編輯框?qū)嵗ㄎ谋精@取值與設(shè)置值）-創(chuàng)新互聯(lián)
本文地址：http://muchs.cn/article22/deggjc.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站策劃、微信公眾號(hào)、靜態(tài)網(wǎng)站、品牌網(wǎng)站建設(shè)、軟件開發(fā)、網(wǎng)頁(yè)設(shè)計(jì)公司

廣告

聲明：本網(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í)需注明來(lái)源： 創(chuàng)新互聯(lián)

小程序開發(fā)