ghx88

[原创]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>

posted on 2008-05-21 23:13  ghx88  阅读(1285)  评论(0编辑  收藏  举报

导航