2. 程式人生 > >3.29 學前端 jquery之操作元素之擴充套件

3.29 學前端 jquery之操作元素之擴充套件

阿新 • • 發佈：2019-02-07
$(function(){ BindSingleCheck('#edit_mode', '#tb1'); }); function BindSingleCheck(mode, tb){ $(tb).find(':checkbox').bind('click', function(){ var $tr = $(this).parent().parent(); if($(mode).hasClass('editing')){ if($(this).prop('checked')){ RowIntoEdit($tr); }else
{ RowOutEdit($tr); } } }); } function CreateSelect(attrs,csses,option_dict,item_key,item_value,current_val){ var sel= document.createElement('select'); $.each(attrs,function(k,v){ $(sel).attr(k,v); }); $.each(csses,function(k,v){ $(sel).css(k,v); }); $.each(option_dict,function
(k,v){ var opt1=document.createElement('option'); var sel_text = v[item_value]; var sel_value = v[item_key]; if(sel_value==current_val){ $(opt1).text(sel_text).attr('value', sel_value).attr('text', sel_text).attr('selected',true).appendTo($(sel)); }else
{ $(opt1).text(sel_text).attr('value', sel_value).attr('text', sel_text).appendTo($(sel)); } }); return sel; } STATUS = [ {'id': 1, 'value': "線上"}, {'id': 2, 'value': "下線"} ]; BUSINESS = [ {'id': 1, 'value': "車上會"}, {'id': 2, 'value': "二手車"} ]; function RowIntoEdit($tr){ $tr.children().each(function(){ if($(this).attr('edit') == "true"){ if($(this).attr('edit-type') == "select"){ var select_val = $(this).attr('sel-val'); var global_key = $(this).attr('global-key'); var selelct_tag = CreateSelect({"onchange": "MultiSelect(this);"}, {}, window[global_key], 'id', 'value', select_val); $(this).html(selelct_tag); }else{ var orgin_value = $(this).text(); var temp = "<input value='"+ orgin_value+"' />"; $(this).html(temp); } } }); } function RowOutEdit($tr){ $tr.children().each(function(){ if($(this).attr('edit') == "true"){ if($(this).attr('edit-type') == "select"){ var new_val = $(this).children(':first').val(); var new_text = $(this).children(':first').find("option[value='"+new_val+"']").text(); $(this).attr('sel-val', new_val); $(this).text(new_text); }else{ var orgin_value = $(this).children().first().val(); $(this).text(orgin_value); } } }); } function CheckAll(mode, tb){ if($(mode).hasClass('editing')){ $(tb).children().each(function(){ var tr = $(this); var check_box = tr.children().first().find(':checkbox'); if(check_box.prop('checked')){ }else{ check_box.prop('checked',true); RowIntoEdit(tr); } }); }else{ $(tb).find(':checkbox').prop('checked', true); } } function CheckReverse(mode, tb){ if($(mode).hasClass('editing')){ $(tb).children().each(function(){ var tr = $(this); var check_box = tr.children().first().find(':checkbox'); if(check_box.prop('checked')){ check_box.prop('checked',false); RowOutEdit(tr); }else{ check_box.prop('checked',true); RowIntoEdit(tr); } }); }else{ // $(tb).children().each(function(){ var tr = $(this); var check_box = tr.children().first().find(':checkbox'); if(check_box.prop('checked')){ check_box.prop('checked',false); }else{ check_box.prop('checked',true); } }); } } function CheckCancel(mode, tb){ if($(mode).hasClass('editing')){ $(tb).children().each(function(){ var tr = $(this); var check_box = tr.children().first().find(':checkbox'); if(check_box.prop('checked')){ check_box.prop('checked',false); RowOutEdit(tr); }else{ } }); }else{ $(tb).find(':checkbox').prop('checked', false); } } function EditMode(ths, tb){ if($(ths).hasClass('editing')){ $(ths).removeClass('editing'); $(tb).children().each(function(){ var tr = $(this); var check_box = tr.children().first().find(':checkbox'); if(check_box.prop('checked')){ RowOutEdit(tr); }else{ } }); }else{ $(ths).addClass('editing'); $(tb).children().each(function(){ var tr = $(this); var check_box = tr.children().first().find(':checkbox'); if(check_box.prop('checked')){ RowIntoEdit(tr); }else{ } }); } }

相關推薦

3.29 學前端 jquery之操作元素之CSS操作

3.2 CSS操作 3.2.1(樣式) css("{color:'red',backgroud:'blue'}") 3.2.2(位置) offset() position() scrollTop

3.29 學前端 jquery之操作元素之文件處理

3.3 文件處理 內部插入 $("#c1").append("<b>hello</b>");//把hello插入#c1到最後一項 $("p").appendTo("div

3.29 學前端 jquery之操作元素之擴充套件

$(function(){ BindSingleCheck('#edit_mode', '#tb1'); }); function BindSingleCheck(mode, tb){ $(tb).find(':checkbox').bind('click', function(){

3.24 學前端 CSS之選擇器

二 css的選擇器（Selector） 選擇器”指明瞭{}中的“樣式”的作用物件，也就是“樣式”作用於網頁中的哪些元素 1 基礎選擇器 × //通用元素選擇器 *{ margin:0; padding:0; } //匹配任何元素 E //

3.26 學前端 JavaScript之控制語句

控制語句 if 控制語句 功能說明 如果表示式的值為true則執行語句1, 否則執行語句2 //if-else基本格式 if (表示式){ 語句１; ......; } else{

小白學前端-----------jQuery

一.jQuery 1.jQuery基本使用 1.1文件就緒事件 $(document).ready(function(){ code... }) //簡寫 $(function(){ code... }) 1.2 jQueryDOM和原生DOM j

小白學前端------------jQuery動畫

一.jQuery動畫 1.1 基本效果 引數詳解 speed:三種預定速度之一的字串("slow","normal",or"fast")或表示動畫時長的毫秒數值(如：1000) easing : (Optional) 用來指定切換效果，預設是"swing

3.24 學前端 http協議

一 HTTP概述 HTTP（hypertext transport protocol），即超文字傳輸協議。這個協議詳細規定了瀏覽器和全球資訊網伺服器之間互相通訊的規則。 HTTP就是一個通訊規則，通訊規則規定了客戶端傳送給伺服器的內容格式，也規定了伺服器傳送

從零開始學 Web 之 jQuery（二）獲取和操作元素的屬性

eight images idt 隱藏 lis 屬性 ner master lin 大家好，這裏是「 從零開始學 Web 系列教程 」，並在下列地址同步更新...... github：https://github.com/Daotin/Web 微信公眾號：Web前端之巔

從零開始學 Web 之 jQuery（五）操作元素其他屬性，為元素繫結事件

一、操作元素的寬和高 1、方法一 元素.css("width"); 元素.css("height"); 最後得到的是字串型別的，比如 200px。 如果我們在設定為原來寬高2倍的時候，就要先把獲取的寬高轉換成數字型別，再乘以2，這樣操作比較麻煩，有沒有簡單的方法呢？ 2、方法二 元素.width(屬性

從零開始學 Web 之 HTML5（二）表單，多媒體新增內容，新增獲取操作元素，自定義屬性

器） user 對比 style 按鈕 ont mp3 url -- 大家好，這裏是「 從零開始學 Web 系列教程 」，並在下列地址同步更新...... github：https://github.com/Daotin/Web 微信公眾號：Web前端之巔 博客園：ht

前端之JQuery：JQuery屬性操作

lec 圖片 code info boot class clas url 如果 Jquery2--屬性相關的操作 知識點總結 1、屬性 屬性（如果你的選擇器選出了多個對象，那麽默認只會返回出第一個屬性）、 attr(屬性名|

前端之JQuery：JQuery屬性操作 Jquery2--屬性相關的操作

Jquery2--屬性相關的操作   知識點總結  1、屬性 屬性（如果你的選擇器選出了多個物件，那麼預設只會返回出第一個屬性）

3、學什麼技術之前端開發JS程式碼規範語法

學什麼技術之前端開發JS程式碼規範語法JS程式碼規範一（語法&格式篇）基本原則所有的程式碼都要符合可維護性原則 —— 簡單、便於閱讀。部分編碼原則是與效能原則相悖的, 如果遇到這種情況, 請優先遵守語法規範。 (注: 如果確實有不確定的 情況或者效能影響很大, 請聯絡

jQuery-DOM操作之復制、替換、包裹節點

code 操作 所有 喜歡 傳遞 pen 傳遞參數 含義 新元素 1、復制節點 clone() $(function(){ $(‘ul li‘).click(function() { $(this).clone().

jquery 獲取及操作元素 （常用）

.com pre img htm color hello fun 文檔 wid jquery 獲取元素 參考：http://www.w3school.com.cn/jquery/jquery_selectors.asp 1.(1)$(document).ready()

Directx9.0 學習教程3 -圖形學之創建點 線 三角形 等

d3d custom 發現 介紹 data- directx 組成 water 詳細 1、首先 介紹點的表示方法 struct CUSTOMVERTEX { float x,y,z; }; CUSTOMVERTEX Vertices[] = { {-5.0

jquery如何判斷元素是否被點擊、屬性操作、class操作

data 標誌位 .html 適用於 all true href 獲取 點擊狀態 1、通過點擊事件發生後，改變標誌位的值，記錄點擊狀態 1 function(){ 2 var isClick = false; 3 $(‘#test‘).click(function(){i

JQuery操作元素的屬性與樣式及位置

空格 clas col 修改 name ava 移位 ack osi <script type="text/javascript" src="JQuery/jquery-1.5.1.js"></script> <script type="te

剛學前端，最近遇到一個jQuery的問題，還請路過的大神幫忙解決下

gin next 比較 切換 () pla java point back 我打算做一個自動輪播圖，效果如圖所示，小圓點點擊效果已經OK，我想讓圖片上那個左右按鈕與小圓點對應實現一個圖片點擊輪播（首尾相連）。 之後再添加一個時間輪播效果（首尾相連）。 以下是css代碼 &