jquery 選擇器用變量表示

阿新 • • 發佈：2019-01-17

1、變數id 新增到jquery中

var User = ["Uno", "Uname", "Usex", "Uid", "Ujob", "Udept", "Unow", "Ucphone", "Ucemail", "Uip", "Uphone", "Uhphone", "Uemail"];

$("#"+User[i])

注意：# 後面的整體作為一個變數

2、給：eq（）新增變數到選擇器中

content[i] = $("#testtable tr:eq(" + j + ") td:nth-child(2)").find("input").val();

變數用+號連線

3、一個簡單的例子，實現表格中的資料傳到對話方塊中。

<%-- any content can be specified here e.g.: --%>
<%@ page pageEncoding="UTF-8" %>
<div class="x10">
    <div class="line margin-big-bottom bg-white">
        <div class="x1"></div>
        <div class="x2"><h4 class="text-sub now_address">個人資訊</h4></div>
    </div>
    <div class="line margin-big-top">
        <div class="x1"></div>
        <div class="x2">
            <img src="../img/timg.jpg" width="128" height="128" class="img-border radius-circle" />
        </div>
        <!--個人資訊顯示，不可更改-->
        <div class="x7 self_info bg-white">
            <div class="fr margin-big-right margin-big-top"></div>
            <form>
                <fieldset>
                    <legend align="center">
                        <span class="icon-edit text-sub dialogs" id="editSelfInfo"
                              data-toggle="click" data-target="#mydialog" data-mask="1" data-width="40%">編輯</span></legend>

                    <table id="testtable">
                        <tr>
                            <td><label>人員編號：</label></td>
                            <td><input type="text" value="123" /></td>
                            <td><label>姓名：</label></td>
                            <td><input type="text" value="小方" /></td>
                        </tr>

                        <tr>
                            <td><label>性別：</label></td>
                            <td><input type="text" value="女" /></td>

                            <td><label>身份證號：</label></td>
                            <td><input type="text" value="1234567890123445" /></td>
                        </tr>

                        <tr>
                            <td><label>職務：</label></td>
                            <td><input type="text" value="部門員工" /></td>

                            <td><label>部門：</label></td>
                            <td><input type="text" value="消防部門" /></td>
                        </tr>

                        <tr>
                            <td><label>崗位：</label></td>
                            <td><input type="text" value="消防員" /></td>

                            <td><label>內線電話：</label></td>
                            <td><input type="text" value="13433452345" /></td>
                        </tr>

                        <tr>
                            <td><label>公司郵箱：</label></td>
                            <td><input type="text" value=" 
[email protected]" /></td>

                            <td><label>ip地址：</label></td>
                            <td><input type="text" value="10.10.10.10" /></td>
                        </tr>

                        <tr>
                            <td><label>個人電話：</label></td>
                            <td><input type="text" value="13222345340" /></td>

                            <td><label>住宅電話：</label></td>
                            <td><input type="text" value="2345634" /></td>
                        </tr>
                        <tr>
                            <td><label>個人郵箱：</label></td>
                            <td><input type="text" value=" 
[email protected]" /></td>
                        </tr>
                    </table>

                </fieldset>
            </form>
        </div>
        <div class="x2"> </div>
    </div>
    <div id="mydialog">
        <div class="dialog">
            <div class="dialog-head">
                <span class="close rotate-hover"></span><strong>修改個人資訊</strong>
            </div>
            <div class="dialog-body">
                <table class="modify">
                    <!--                        <tr>
                                                <td>人員編號：</td>
                                                <td><input type="text"  /></td>
                                            </tr>-->
                    <tr>
                        <td>姓名：</td>
                        <td><input type="text" placeholder="請輸入姓名" name="Uname" id="Uname" /></td>
                    </tr>
                    <tr>
                        <td>性別：</td>
                        <td>
                            <input type="radio" name="Usex" id="man" checked="checked"  value="男"/>男
                            <input type="radio" name="Usex" id="woman"  value="女">女
                        </td>
                    </tr>
                    <tr>
                        <td>身份證號：</td>
                        <td><input type="text" placeholder="請輸入身份證號" name="Uid" id="Uid" /></td>
                    </tr>

                    <tr>
                        <td>職務：</td>
                        <td><input type="text" placeholder="請輸入職務" name="Ujob" id="Ujob" /></td>
                    </tr>

                    <tr>
                        <td>部門：</td>
                        <td> <select name="Udept" id="Udept">
                                <option>部門經理</option>
                                <option>員工主管</option>
                            </select></td>
                    </tr>

                    <tr>
                        <td>崗位：</td>
                        <td><input type="text" placeholder="請輸入崗位" name="Unow"  id="Unow"/></td>
                    </tr>
                    <tr>
                        <td>內線電話：</td>
                        <td><input type="text" placeholder="請輸入內線電話" name="Ucphone" id="Ucphone" /></td>
                    </tr>
                    <tr>
                        <td>公司郵箱：</td>
                        <td><input type="text" placeholder="請輸入公司郵箱" name="Ucemail" id="Ucemail" /></td>
                    </tr>
                    <tr>
                        <td>IP地址：</td>
                        <td><input type="text" placeholder="請輸入IP地址" name="Uip" id="Uip" /></td>
                    </tr>
                    <tr>
                        <td>個人電話：</td>
                        <td><input type="text" placeholder="請輸入個人電話"  name="Uphone" id="Uphone" /></td>
                    </tr>
                    <tr>
                        <td>住宅電話：</td>
                        <td><input type="text" placeholder="請輸入住宅電話" name="Uhphone" id="Uhphone" /></td>
                    </tr>
                    <tr>
                        <td>個人郵箱：</td>
                        <td><input type="text" placeholder="請輸入個人郵箱" name="Uemail" id="Uemail" /></td>
                    </tr>
                </table>
            </div>
            <div class="dialog-foot">
                <button class="button dialog-close">
                    取消</button>
                <button class="button bg-green" id="submitBtn">
                    提交</button>
            </div>
        </div>
    </div>
</div>
<style type="text/css">


    /*表格式個人資訊*/
    .self_info table tr td{
        padding: 20px 20px;
    }
    .self_info{
        border: 1px solid #f6f6f6;
        border-radius:10px;
        box-shadow: 0px 3px 3px  rgba(225,225,225,0.8);
        margin-top: 50px;
    }
    .self_info table{
        margin: 0 auto;
    }
    .self_info span{
        cursor: pointer;
    }
    .self_info span:active{
        color: red;
    }
    /*表格編輯框   當點選編輯按鈕的時候才能編輯*/
    .self_info table input{
        border: none;
    }
    .self_info table input[type="text"]{
        color: transparent;
        text-shadow: 0 0 0 #000;
    }
    .fr{
        float: right;
    }
    fieldset{
        border: 0 none;
        border-top: 3px solid #f6f6f6;
        margin-top:20px;
    }
    .modify{
        margin: 0 auto;
    }
    .modify tr td{
        padding: 10px 20px;
    }
    .modify tr td input{
        padding-top: 2px;
        padding-bottom: 2px;
        padding-left: 10px;
        padding-right: 10px;
        border: 1px solid lightgray;
    }
    .modify tr td input:hover{
        border: 1px solid #0099CC  ;
    }
</style>




<script type="text/javascript">
    $("#editSelfInfo").click(function () {
        var User = ["Uno", "Uname", "Usex", "Uid", "Ujob", "Udept", "Unow", "Ucphone", "Ucemail", "Uip", "Uphone", "Uhphone", "Uemail"];
        var content = new Array();
        var len = User.length;
        for (var i = 0; i < len; i++) {
            var j = Math.floor(i / 2);
            var n = i % 2;
            if (n === 0) {
                content[i] = $("#testtable tr:eq(" + j + ") td:nth-child(2)").find("input").val();
                if (content[i] === "女") {
                    $("#woman").attr("checked", true);
                } else {
                    $("#man").attr("checked", true);
                }
            }
            if (n !== 0) {
                content[i] = $("#testtable tr:eq(" + j + ") td:nth-child(4)").find("input").val();
            }
            $("#"+User[i]).attr("value",content[i]);
        }
    });
    $("#submitBtn").click(function () {
        var Uname = $("#Uname").val();
        var Uid = $("#Uid").val();
        var Ujob = $("#Ujob").val();
        var Udept = $("#Udept").val();
        var Unow = $("#Unow").val();
        var Ucphone = $("#Ucphone").val();
        var Ucemail = $("#Ucemail").val();
        var Uip = $("#Uip").val();
        var Uphone = $("#Uphone").val();
        var Uhphone = $("#Uhphone").val();
        var Uemail = $("#Uemail").val();
//        var Uid = $("#Uname").val();
        $.ajax({
            type: 'post',
            url: "",
            data: {
            },
            cache: false,
            dataType: 'json',
            success: function (data) {
                //獲取返回的資料填充td
            },
            error: function () {}
        });

    });
</script>

jquery 選擇器用變量表示

1、變數id 新增到jquery中 var User = ["Uno", "Uname", "Usex", "Uid", "Ujob", "Udept", "Unow", "Ucphone", "Ucemail", "Uip", "Uphone", "Uhphone",

用一個變量表示 ----------"序號,名稱,價格"

goods = [{"name": "電腦", "price": 1999}, {"name": "滑鼠", "price": 10}, &

jQuery選擇器中的萬用字元[id*='id']及jquery選擇器總結

1.選擇器 (1)萬用字元： $("input[id^='code']");//id屬性以code開始的所有input標籤 $("input[id$='code']");//id屬性以code結束的所有input標籤 $("input[id

jQuery的選擇器中的萬用字元[id^='code']或[name^='code']及jquery選擇器總結

1. 基礎選擇器 Basics 名稱說明舉例 #id 根據元素Id選擇 $("divId") 選擇ID為divId的元素根據元素的名稱選擇, $("a") 選擇所有<a>元素根據元素的css類選擇 $(".bgRed") 選擇所用CSS類為bgRed的元素 *

分針網——IT教育：jquery選擇器的用法

jQuery選擇器是jQuery庫的一大特色，用這些選擇器不但可以省去繁瑣的JavaScript 書寫方式，還可以節省時間和效率，正是有這些jQuery選擇器，才讓我們更容易的操作JavaScript的dom。 1. 基本選擇器 ·#id 根據

jQuery選擇器絕對定位實現div覆蓋

rip jquer 絕對定位 button min 覆蓋 str fun 選擇新建html文件可以運行(jsp文件下不可運行) <!DOCTYPE html><html> <head> <meta charse

分針網——每日分享： jquery選擇器的用法

提交 -c sce fse edi scrip 偶數 http n) jQuery選擇器是jQuery庫的一大特色，用這些選擇器不但可以省去繁瑣的JavaScript 書寫方式，還可以節省時間和效率，正是有這些jQuery選擇器，才讓我們更容易的操作JavaScript的

jQuery選擇器引擎和Sizzle介紹

document 遞歸展示學院 extra 上下文和源 err sizzle p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 14.0px Arial; color: #323333 } p.p2 { margin: 0.0

jquery選擇器之元素選擇器

com eight mooc name jquery選擇器 itl 選擇器 padding jquer <!DOCTYPE html><html> <head> <meta http-equiv="Content-type"

jQuery選擇器

選擇第一個 inpu min 1.5 descend height 背景顏色 sel 1.基本選擇器 //改變id為one的元素背景顏色 $("#one").css("background","#bbffaa"); //改變class為mini的所有元素的北京顏色 $

利用jQuery選擇器快速匹配文檔中的按鈕，並為該按鈕綁定事件處理函數

body var jquery pla .org title color button ansi <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org

jquery選擇器詳解

orm visible type nbsp line style .html box con 一、基本選擇器 #box .box1 div $("#box, .box1"); 二、層級選擇器 $("div p"); //div中的所有p $("div > p");

Javascript - Jquery選擇器

n+1 上層 mage 組合 html http 相同 amp hidden 選擇器（JQuery Selector） JQuery是一個JavaScript庫，它極大地簡化了JavaScript編程。整個JQuery庫的方法都在$這個工廠函數裏，我們只需要實例化$對象，

JQuery選擇器，動畫，事件和DOM操作

out 標簽空格 jquery選擇器 ges 引用上拉定義 alt JQuery是由JS封裝的一些方法，供我們調用，可以快速的實現某些JS功能，實際是JS編寫的方法包將JQuery文件放到JS文件夾下，然後引用到<head></head>中

Jquery——選擇器

clas his col one 過濾選擇器 tex open 層級選擇器 class body 1 <body> 2 <form action=""> 3 <input class="input1" name = "name

Jquery——選擇器2

pla clas play spa one his code 選擇技術 1 $("ul li:eq(3)") 選擇器列表中等於3的元素，0開始（第四個） 1 $("ul li:lt(2)") 選擇器列表中小於2的元素，0開始 1 $("ul li:gt

jquery 選擇器

contain 實驗室當前中一 uri 另一個 enable 使用真機 set 騰訊雲·雲上實驗室：開發者零門檻，免費使用真機在線實驗！>>> 選擇器實例選取 * $("*") 所有元素 #id $("#lastname")

jQuery選擇器手冊

奇數 oat 所有 word checkbox _id -a disabled nim jQuery選擇器手冊選擇器實例選取 * $("*") 所有元素 #id $("#lastname") id="lastname" 的元素 .class $(".intr

jQuery選擇器總結

textarea 輸入運用 image 代碼子元素 index tex select 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 3

【轉】JQuery選擇器

log fieldset radi query 選擇器序號 html 數組 cnblogs 原址：http://www.cnblogs.com/onlys/articles/jQuery.html jQuery 的選擇器可謂之強大無比，這裏簡單地總結一下

jquery 選擇器用變量表示

相關推薦