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>
  • 相关阅读:
    SpringMVC—概述
    Spring—切点表达式
    Spring—Ioc
    Spring—spring概述
    MyBtis—原理及初始化
    mysql数据增删查授权
    mysql完整性约束
    mysql枚举类型与集合类型
    mysql字符类型
    mysql日期类型
  • 原文地址:https://www.cnblogs.com/ghx88/p/1204391.html
Copyright © 2011-2022 走看看