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>
  • 相关阅读:
    王建军_百度百科
    腾讯研究院关于研究院
    创业公司3Gear Systems利用Kinect打造未来人机交互体验 | 36氪
    KVM切换器_互动百科
    保荐人考试
    Engadget 中文版征人启事 《 they're hiring
    吸血僵尸惊情四百年
    小霸王手机
    ARM、高通、德州仪器这三家芯片企业该怎么区分和评价?
    《美丽心灵》兼谈纳什均衡理论
  • 原文地址:https://www.cnblogs.com/ghx88/p/1204391.html
Copyright © 2011-2022 走看看