zoukankan      html  css  js  c++  java
  • [原创]JQuery实现表格的列列交换

    <HTML>
     
    <HEAD>
      
    <TITLE> New Document </TITLE>
    <SCRIPT LANGUAGE="JavaScript" src="jquery.js"></SCRIPT>
    <SCRIPT LANGUAGE="JavaScript">

        $(
    function(){
            $(
    "#tb1 tr:first td").each(function(i){
                $(
    this).css("cursor","pointer").click(function(){
                        $(
    "#tb1 tr").each(function(){
                        
    var tdlist =  $(this).children();
                        
    if(tdlist.length > 1){
                            
    if(i==0){
                                swap(tdlist[
    0],tdlist[1]);
                            }

                            
    else if(i == (tdlist.length -1)){
                                swap(tdlist[i],tdlist[i
    -1]);
                            }

                            
    else{
                                swap(tdlist[i],tdlist[i
    +1]);
                            }
                            
                        }

                    }
    );    
                }
    );
            }
    );
        }
    )

        
    function swap(obj1,obj2)
        
    {
            
    var temp = obj1.innerText;
            obj1.innerText 
    = obj2.innerText;
            obj2.innerText 
    = temp;
        }


    </SCRIPT>

     
    </HEAD>

     
    <BODY>
      
    <TABLE border="1" id="tb1">
      
    <TR><TD>表头1</TD><TD>表头2</TD><TD>表头3</TD><TD>表头4</TD></TR>
      <TR><TD>1</TD><TD>2</TD><TD>3</TD><TD>4</TD></TR>
      <TR><TD>1</TD><TD>2</TD><TD>3</TD><TD>4</TD></TR>
      <TR><TD>1</TD><TD>2</TD><TD>3</TD><TD>4</TD></TR>
      <TR><TD>1</TD><TD>2</TD><TD>3</TD><TD>4</TD></TR>
      <TR><TD>1</TD><TD>2</TD><TD>3</TD><TD>4</TD></TR>
      </TABLE>
     </BODY>
    </HTML>
  • 相关阅读:
    Android UI开发第三十二篇——Creating a Navigation Drawer
    Asynchronous HTTP Requests in Android Using Volley
    AndroidHttp通信 HTTP Client与HttpURLConnection的区别
    Volley使用详细说明
    网络通信框架Volley使用详细说明
    Google I/O 2013 – Volley: Easy, Fast Networking for Android
    Android UI开发第三十一篇——Android的Holo Theme
    存储过程多值参数报表
    报表如何嵌入到网页并接收参数?
    多选参数可为空报表的实现方法
  • 原文地址:https://www.cnblogs.com/ghx88/p/1204391.html
Copyright © 2011-2022 走看看