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>
  • 相关阅读:
    jquery mobile pages之间的跳转
    Javascript中this、prototype、constructor的理解
    javaScript的引号使用
    javaScript的事件
    我的css
    HTML5 canvas的事件
    java动态代理
    (转)面向对象的 JavaScript 编程:dojo.declare 详解
    Speex手册编解码介绍 中文翻译
    Android修改自己程序字体
  • 原文地址:https://www.cnblogs.com/ghx88/p/1204391.html
Copyright © 2011-2022 走看看