<address id="ttjl9"></address>

      <noframes id="ttjl9"><address id="ttjl9"><nobr id="ttjl9"></nobr></address>
      <form id="ttjl9"></form>
        <em id="ttjl9"><span id="ttjl9"></span></em>
        <address id="ttjl9"></address>

          <noframes id="ttjl9"><form id="ttjl9"></form>

          首頁

          js高效修改對象數組里的對象屬性名

          前端達人

          有些時候,我們前端從后端拿過來的JSON對象數據,某些字段并不是前端想要的,需要對一些字段名進行重命名。一般修改對象數組的對象屬性名,最簡便的就是通過遍歷對象數組的方法進行修改,但是用這個方法,如果處理的數據量很大,它的執行效率是非常低的。下面介紹一個更高效的方法,即通過正則的方法進行過濾修改。

          JSON.parse(JSON.stringify(data).replace(/name/g, 'new_name')) //data為數組,name為修改前,new_name為修改后

          解釋:1)JSON.stringify()把json對象轉成json字符串;

                    2)使用正則的replace()方法替換屬性名;

                    3)JSON.parse()把json字符串又轉成json對象。

          修改多個屬性:當要修改多個屬性名時,多次調用replace方法,可以鏈式調用。如下面說明

          JSON.parse(JSON.stringify(data).replace(/name1/g, 'new_name1').replace(/name2/g, 'new_name2').replace(/name3/g, 'new_name3')...)




          藍藍設計建立了UI設計分享群,每天會分享國內外的一些優秀設計,如果有興趣的話,可以進入一起成長學習,請掃碼ben_lanlan,報下信息,會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作,也請與我們聯系。

          文章來源:博客園

          分享此文一切功德,皆悉回向給文章原作者及眾讀者.
          免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們取得聯系,我們立即更正或刪除。

          藍藍設計www.syprn.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務

          js中push(),pop(),unshift(),shift()的用法小結

          前端達人

          1、push()、pop()和unshift()、shift()

          這兩組同為對數組的操作,并且會改變數組的本身的長度及內容。

          不同的是 push()、pop() 是從數組的尾部進行增減,unshift()、shift() 是從數組的頭部進行增減。

          var arr = [1, 2];

          2、push()和unshift()

          向數組的 尾部/頭部 添加若干元素,并返回 數組的 新長度;

          arr.push(3,4);         //返回 arr 的新長度 4

          arr ;                        // arr = [1,2,3,4];

          arr.unshift(0,0.5);    // 返回 arr 的新長度 6

          arr ;                       // arr = [0,0.5,1,2,3,4];

          3、pop()和shift()

          從數組的 尾部/頭部 刪除1個元素(刪且只刪除1個),并返回 被刪除的元素;空數組是繼續刪除,不報錯,但返回undefined;

          arr.pop();      //返回 4;

          arr ;          // arr = [0,0.5,1,2,3];

          arr.pop();      //返回 3;

          arr ;         // arr = [0,0.5,1,2];

          arr.shift();      // 返回 0 ;

          arr ;        // arr = [0.5,1,2]

          PS: pop()和shift() 不接受傳參,即使傳了參數也沒什么卵用~~;

          arr.pop(3) ;           // 返回 2;永遠返回最后一個;

          arr ;        // arr = [0.5,1];

          arr.shift(1);    // 返回 0.5; 永遠返回第一個;

          arr ;        // arr = [1];

          arr.pop() ;     // 返回 1;

          arr ;        // arr = [];

          arr.shift()     // 返回 undefined;

          arr ;        // arr = [];

           


          藍藍設計建立了UI設計分享群,每天會分享國內外的一些優秀設計,如果有興趣的話,可以進入一起成長學習,請掃碼ben_lanlan,報下信息,會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作,也請與我們聯系。

          文章來源:博客園

          分享此文一切功德,皆悉回向給文章原作者及眾讀者.
          免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們取得聯系,我們立即更正或刪除。

          藍藍設計www.syprn.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務

          ajax異步調用直接返回頁面,并顯示

          前端達人

           <script type="text/javascript">
                  $("#search").click(function(event){  
                        var key = $("#key").val();
                      
                       //alert(key);
                      
                        $.post("search.do?method=s", {keyword : key}, function(data){  
                            document.write(data);//將一個是 ajax返回的html頁面直接打?。ń忉尣@示成)頁面
                            //alert(jQuery('div', data).html());    
                            //alert(data.output);
                      });
                  });
              </script>



          document.write(data)?。。?!

          一句話搞定!??!

          轉自:csdn

          藍藍設計建立了UI設計分享群,每天會分享國內外的一些優秀設計,如果有興趣的話,可以進入一起成長學習,請掃碼ben_lanlan,報下信息,會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作,也請與我們聯系。

          文章來源:csdn

          分享此文一切功德,皆悉回向給文章原作者及眾讀者.
          免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們取得聯系,我們立即更正或刪除。

          藍藍設計www.syprn.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 平面設計服務


          頁面局部刷新三種方法

          前端達人

          頁面局部刷新

          1.使用ajax實現小部分的內容局部刷新
          $.ajax({
          url:“http://localhost:8080/intoHomepage.do”,
          type:“post”,
          data:{name:“mydata”},
          success:function (result) {
          if(result){ //對后端返回的數據result進行處理
          $(".testchange").html(“將對應的class=testchange的標簽內容進行修改。還可以通過一些父類和子類選擇函數進行操作更新數據如:find()、chidren()、parent()等”);
          }
          },
          error:function () {
          alert(“出現錯誤!”);
          }
          }
          );

          1. 如果要對大部分內容進行刷新建議使用iframe標簽進行整體刷新。
          2. 對于點擊不同的按鈕(或其他的標簽)局部刷新可以使用" 隱藏方式",比如事先準備好幾種不同的內容,
            < button id=“b1”>按鈕1< /button>
            < button id=“b2”>按鈕2< /button>
            < button id=“b3”>按鈕3< /button>
            < div >
            < di v class=“test01”>
            < p> this is test01 < /p>
            < /div>
            < di v class=“test02” style="display:none ">
            < p> this is test02 < /p>
            < /div>
            < di v class=“test03” style="display:none ">
            < p> this is test03 < /p>
            < /div>
            < /div>

          點擊按鈕觸發事件(onclick()或其他事件)對需要刷新的部分內容進行css屬性display:none(/block)設置只顯示一個div的內容




          藍藍設計建立了UI設計分享群,每天會分享國內外的一些優秀設計,如果有興趣的話,可以進入一起成長學習,請掃碼ben_lanlan,報下信息,會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作,也請與我們聯系。

          文章來源:csdn

          分享此文一切功德,皆悉回向給文章原作者及眾讀者.
          免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們取得聯系,我們立即更正或刪除。

          藍藍設計www.syprn.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務

          jquery實現input輸入框實時輸入觸發事件代碼(最全)

          前端達人

          第一種辦法

          $('#productName').bind('input propertychange', function() { console.log(123); }); 
          
          • 1
          • 2
          • 3

          第二種辦法

          //鍵盤事件 $('input').keydown(function() { console.log(123); }); 
          
          • 1
          • 2
          • 3
          • 4

          第三種辦法

          <input type="text" oninput="myFunction()"> 
          
          • 1
          <script> function myFunction() { console.log(111); } </script> 
          
          • 1
          • 2
          • 3
          • 4
          • 5

          如果您覺得本篇對你有幫助,可以點關注,給個贊,支持一下,過程有遇到什么問題也歡迎評論私信,進行交流


          藍藍設計建立了UI設計分享群,每天會分享國內外的一些優秀設計,如果有興趣的話,可以進入一起成長學習,請掃碼藍小助,報下信息,藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作,也請與我們聯系。




          文章來源:csdn

          分享此文一切功德,皆悉回向給文章原作者及眾讀者.
          免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們取得聯系,我們立即更正或刪除。

          藍藍設計www.syprn.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 平面設計服務

          jquery更改輸入框type為密碼框password

          前端達人

          很蛋疼的一個問題:


           <input type="text" id="e1" value="123" />



          用juqery將文本框變成密碼框


          
          
          1. $(document).ready(function(){
          2. $("#e1").val("hello world!");
          3. $("#e1").click(function(){
          4. alert('11');
          5. $("#e1").attr("type","password");
          6. $("#e1").attr("value","ni mei de ");
          7. });
          8. });



          執行的結果:彈出11,文本框沒有變!


          然后百度一下,發現type的t要大寫,即Type偷笑


          
          
          1. $(document).ready(function(){
          2. $("#e1").val("hello world!");
          3. $("#e1").click(function(){
          4. alert('11');
          5. if(e1.disabled)
          6. ("#e1").attr("Type","password");
          7. $("#e1").attr("value","ni mei de ");
          8. });
          9. });


          效果就有了! 疑問


          藍藍設計建立了UI設計分享群,每天會分享國內外的一些優秀設計,如果有興趣的話,可以進入一起成長學習,請掃碼藍小助,報下信息,藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作,也請與我們聯系。



          文章來源:csdn

          分享此文一切功德,皆悉回向給文章原作者及眾讀者.
          免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們取得聯系,我們立即更正或刪除。

          藍藍設計www.syprn.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務


          iframe子頁面調用父頁面js函數

          前端達人

          1、iframe子頁面調用父頁面js函數



          子頁面調用父頁面函數只需要寫上window.praent就可以了。比如調用a()函數,就寫成:

          復制代碼 代碼如下:

          window.parent.a();



          子頁面取父頁面中的標簽中的值,比如該標簽的id為“test”,則:

          復制代碼 代碼如下:

          window.parent.document.getElementById("test").value;

          jQuery方法為:

          $(window.parent.document).contents().find("test").val();



          但是我在chrome瀏覽器下卻發現此方法無效了!查了半天才了解,在chrome 5+中,window.parent無法在file://協議中運行,但是發布了之后http://協議下是可以運行的。此方法支持ie、firefox瀏覽器。



          2、iframe父頁面調用子頁面js函數

          復制代碼 代碼如下:

          這個就稍微復雜一些,下面的方法支持ie和firefox瀏覽器:

          document.getElementById('ifrtest').contentWindow.b();

          子頁面取父頁面中的標簽中的值,比如該標簽的id為“test”,則:

          document.getElementById("test").value;







          注:ifrtest是iframe框架的id,b()為子頁面js函數。contentWindow屬性是指定的frame或者iframe所在的window對象,IE下可以省略。




          藍藍設計建立了UI設計分享群,每天會分享國內外的一些優秀設計,如果有興趣的話,可以進入一起成長學習,請掃碼藍小助,報下信息,藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作,也請與我們聯系。

          截屏2021-05-13 上午11.41.03.png



          文章來源:csdn

          分享此文一切功德,皆悉回向給文章原作者及眾讀者.
          免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們取得聯系,我們立即更正或刪除。

          藍藍設計www.syprn.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務


          關于JS中作用域的銷毀和不銷毀的情況總結

          前端達人

          window全局作用域->頁面關掉才銷毀
          函數執行會形成私有的作用域

          1)作用域的銷毀
          一般情況下,函數執行形成一個私有的作用域,當執行完成后就銷毀了->節省內存空間

          2)作用域的不立即銷毀
          function fn(){
          var i=10;
          return function(n){
          console.log(n+i++);
          }
          }
          fn()(15);//->先執行fn,有一個私有的變量i=10,返回一個堆內存地址 xxxfff111,我們發現這個地址還用到了一次,那么當前的這個fn形成私有作用域(A)就不能立即銷毀了,xxxfff111(15)->輸出25,A中的i變為11;當xxxfff111執行完了,發現這個地址沒用了,瀏覽器就把A、xxxfff111都釋放了

          fn()(20);//->在執行fn的時候一切都從新開始了,和上面的步驟是一樣的->輸出30

          3)作用域的不銷毀:形成一個私有作用域,里面的內容被外面占用了
          function fn(){
          var i=10;
          return function(n){
          console.log(n+i++);
          }
          }
          var f=fn();//->fn執行形成一個私有的作用域A,A中有一個私有的變量i=10,A中返回一個地址xxxfff11,被外面的f占用了,那么當前的A就不能銷毀了
          f(15);//->輸出25,讓A中的i=11
          f(20);//->輸出31,讓A中的i=12
          ...
          當我們知道f用完的時候,為了優化性能,我們讓f=null,這樣的話A中的xxxfff111沒人占用了,瀏覽器會把A和xxxfff111都釋放了


          幾種不銷毀常用到的形式:
          1)函數執行,返回一個引用數據類型的值,并且在函數的外面被別人接收了,那么當前函數形成的私有作用域就不在銷毀了-->例如上面的案例

          2)在函數執行的時候,里面的一個小函數的地址賦值給了我們的外面元素的點擊事件,那么當前小函數也相當于被外面占用了,大函數執行形成的私有的作用域也不銷毀了
          //每一次循環都執行自執行函數形成一個私有的作用域(循環三次就有三個作用域,每一個作用域中都有一個i,第一個存儲的是0,第二個存數的是1..),在每一個私有的作用域中都把里面的函數綁定給了外面元素的點擊事件,這樣的話每一次形成的作用域都不銷毀了(三個不銷毀的作用域)
          var oLis=document.getElementsByTagName("li");
          for(var i=0;i<oLis.length;i++){
          ~function(i){
          oLis[i].onclick=function(){
          tabChange(i);
          }
          }(i);
          }

          3)在使用setTimeout實現輪詢動畫的時候,我們如果move需要傳遞參數值,那么像下面這樣的寫法會行成很多的不銷毀的作用域,非常的耗性能
          function move(tar){
          <js code>

          //window.setTimeout(move,10); ->第二次執行move的時候我們沒有給它傳值(這樣寫不行)
          window.setTimeout(function(){
          move(tar);
          },10);//->這樣寫實現了,但是每一次執行定時器都會形成一個私有的所用域(匿名函數形成的)A,在A中使用了上級作用域中的tar的值,而且執行了move又形成了一個小的作用域(而在小的作用域中會使用tar的值),這樣每一次定時器形成的A都不能銷毀了
          }
          move(100);//->第一次這樣執行傳遞100

          //解決辦法:
          function move(tar){
          ~function _move(){
          <js code>
          window.setTimeout(_move,10);
          }();
          }
          move(100);//->第一次這樣執行傳遞100


          JS中內存空間釋放的問題(堆內存、棧內存)
          [谷歌瀏覽器]
          我們開辟一個內存,可能或有一些其他的變量等占用了這個內存,谷歌瀏覽器都會間隔一段時間看這個內存還有沒有被占用,如果發現有沒有被占用的內存了,就自己幫我們回收了(內存釋放)

          [火狐和IE]
          我們開個內存,當我們引用了它,就在內存中記錄一個數,增加一個引用瀏覽器就把這個數+1,減少一個引用,瀏覽器就把這個數-1...當減到零的時候瀏覽器就把這個內存釋放了;但是有些情況下(尤其是IE)記著記著就弄亂了,內存就不能釋放了-->瀏覽器的內存泄露

          var obj={};
          我們養成一個好的習慣,當我們obj這個對象使用完成了,我們手動的obj=null (null空對象指針),瀏覽器會自己把剛才的堆內存釋放掉

          標簽: javascript




          藍藍設計建立了UI設計分享群,每天會分享國內外的一些優秀設計,如果有興趣的話,可以進入一起成長學習,請掃碼藍小助,報下信息,藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作,也請與我們聯系。

          截屏2021-05-13 上午11.41.03.png



          文章來源:博客園

          分享此文一切功德,皆悉回向給文章原作者及眾讀者.
          免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們取得聯系,我們立即更正或刪除。

          藍藍設計www.syprn.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務


          jquery ui 中 datepicker的漢化

          前端達人

          首先上 html代碼

          
          
          1. <!--為防止一個頁面出現多個id 我們改用class
          2. 為防止手工填寫格式出錯 我們設置屬性為 readonly
          3. 只能選 ,不能填 ok
          4. -->
          5. <input type="text" class="datepicker" readonly="readonly"/>



          然后是jquery ui 初始化部分代碼

          
          
          1. //日期格式改變
          2. $( ".datepicker" ).datepicker({dateFormat: "yy-mm-dd"});
          3. //星期格式漢化
          4. $( ".datepicker" ).datepicker( "option", "dayNamesMin",[ "日", "一", "二", "三", "四", "五", "六" ] );
          5. //月份格式漢化
          6. $( ".datepicker" ).datepicker( "option", "monthNames", [ "一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月" ] );



          注:jquery ui 的設置有兩種,一種是在初始化的時候就填入參數

          另一種是在初始化之后,在設置參數。這里為了說明參數選項,我們選擇的第二種方式來講解。



          效果圖: 



          官方說明地址: http://api.jqueryui.com/datepicker/#option-altFormat

          下載地址:http://download.jqueryui.com/download


          藍藍設計建立了UI設計分享群,每天會分享國內外的一些優秀設計,如果有興趣的話,可以進入一起成長學習,請掃碼藍小助,報下信息,藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作,也請與我們聯系。

          截屏2021-05-13 上午11.41.03.png



          文章來源:csdn

          分享此文一切功德,皆悉回向給文章原作者及眾讀者.
          免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們取得聯系,我們立即更正或刪除。

          藍藍設計www.syprn.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 平面設計服務

          datatable 拖動列寬 鼠標拖動列寬

          前端達人


          本篇博客所用到的技術也是從別的博客學習到的,但目前找不到那篇博客的鏈接了。

          1.普通表格實現拖動列寬

          var tabSize = tabSize || {}; tabSize.init = function (id) { //用來存儲當前更改寬度的Table Cell,避免快速移動鼠標的問題 var tTD; // 獲取需要修改列寬的表格 var table = document.getElementById(id); var headTh = table.rows[0]; for (j = 0; j < headTh.cells.length; j++) { headTh.cells[j].onmousedown = function () { //記錄單元格 tTD = this; if (event.offsetX > tTD.offsetWidth - 10) { tTD.mouseDown = true; tTD.oldX = event.x; tTD.oldWidth = tTD.offsetWidth; } }; headTh.cells[j].onmouseup = function () { //結束寬度調整 if (tTD == undefined) tTD = this; tTD.mouseDown = false; tTD.style.cursor = 'default'; }; headTh.cells[j].onmousemove = function () { //更改鼠標樣式 if (event.offsetX > this.offsetWidth - 10) this.style.cursor = 'col-resize'; else this.style.cursor = 'default'; //取出暫存的Table Cell if (tTD == undefined) tTD = this; //調整寬度 if (tTD.mouseDown != null && tTD.mouseDown == true) { tTD.style.cursor = 'default'; if (tTD.oldWidth + (event.x - tTD.oldX) > 0) tTD.width = tTD.oldWidth + (event.x - tTD.oldX); //調整列寬 tTD.style.width = tTD.width + 'px'; tTD.style.cursor = 'col-resize'; // 調整滾動表格的每個cell for (k = 0; k < table.rows.length; k++) { table.rows[k].cells[tTD.cellIndex].style.width = tTD.style.width; } } }; } }; // 調用 // 鼠標拖動列寬 setTimeout(function () { // 1.html代碼里就是一個普通的table元素 // 2.傳入table元素的id tabSize.init('documentList'); }, 600); 
          
          • 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
          • 33
          • 34
          • 35
          • 36
          • 37
          • 38
          • 39
          • 40
          • 41
          • 42
          • 43
          • 44
          • 45
          • 46
          • 47
          • 48
          • 49
          • 50
          • 51
          • 52
          • 53
          • 54
          • 55
          • 56

          在這里插入圖片描述
          在這里插入圖片描述
          在這里插入圖片描述

          2.datatable實現鼠標拖動列寬

          1. 項目中用到datatable插件的地方,都是需要上下滾動的;而datatable插件實現上下滾動,是生成了兩個div各包含了一個table,一個表格里只包含thead并且固定?。悾篸ataTables_scrollHead),另一個實現table內容滾動(類:dataTables_scrollBody) 。
          2. 那么,若要實現鼠標拖動列寬的話,則需要:表頭綁定鼠標事件→事件觸發時兩個表格的對應列的寬度都要改變
          3. 若這個datatable表格原本沒有滾動條的話,在鼠標拖動列寬的時候,會出現滾動條,其中,datatable定義時,“scrollX”: true。在這里插入圖片描述
            在這里插入圖片描述
          var tabSize = tabSize || {}; tabSize.init = function (id,headTableWrapperId) { //用來存儲當前更改寬度的Table Cell,避免快速移動鼠標的問題 var tTD; // 獲取需要修改列寬的表格 var table = document.getElementById(id); // 獲取固定頭部的表格 var tableHead = $('#'+ headTableWrapperId + ' .dataTables_scrollHeadInner table')[0]; // 獲取表格頭部th var headTh = tableHead.rows[0]; for (j = 0; j < headTh.cells.length; j++) { headTh.cells[j].onmousedown = function () { //記錄單元格 tTD = this; if (event.offsetX > tTD.offsetWidth - 10) { tTD.mouseDown = true; tTD.oldX = event.x; tTD.oldWidth = tTD.offsetWidth; } }; headTh.cells[j].onmouseup = function () { //結束寬度調整 if (tTD == undefined) tTD = this; tTD.mouseDown = false; tTD.style.cursor = 'default'; }; headTh.cells[j].onmousemove = function () { //更改鼠標樣式 if (event.offsetX > this.offsetWidth - 10) this.style.cursor = 'col-resize'; else this.style.cursor = 'default'; //取出暫存的Table Cell if (tTD == undefined) tTD = this; //調整寬度 if (tTD.mouseDown != null && tTD.mouseDown == true) { tTD.style.cursor = 'default'; if (tTD.oldWidth + (event.x - tTD.oldX) > 0) tTD.width = tTD.oldWidth + (event.x - tTD.oldX); //調整列寬 tTD.style.width = tTD.width + 'px'; tTD.style.cursor = 'col-resize'; // 調整滾動表格的每個cell for (k = 0; k < table.rows.length; k++) { table.rows[k].cells[tTD.cellIndex].style.width = tTD.style.width; } } }; } }; // 鼠標拖動列寬 setTimeout(function () { // 參數:1.table元素的id, // 2.datatable插件生成的最外層div的id,F12可查看到 tabSize.init('cfcPlanListIn','cfcPlanListIn_wrapper'); }, 2000); 
          
          • 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
          • 33
          • 34
          • 35
          • 36
          • 37
          • 38
          • 39
          • 40
          • 41
          • 42
          • 43
          • 44
          • 45
          • 46
          • 47
          • 48
          • 49
          • 50
          • 51
          • 52
          • 53
          • 54
          • 55
          • 56
          • 57

          在這里插入圖片描述
          在這里插入圖片描述

          藍藍設計建立了UI設計分享群,每天會分享國內外的一些優秀設計,如果有興趣的話,可以進入一起成長學習,請掃碼藍小助,報下信息,藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作,也請與我們聯系。

          截屏2021-05-13 上午11.41.03.png


          文章來源:csdn 作者:阿晏

          分享此文一切功德,皆悉回向給文章原作者及眾讀者.
          免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們取得聯系,我們立即更正或刪除。

          藍藍設計www.syprn.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 平面設計服務

          日歷

          鏈接

          個人資料

          藍藍設計的小編 http://www.syprn.cn

          存檔

          亚洲va欧美va天堂v国产综合