[原创]JQuery实现表格的列列交换

[原创]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>
相关阅读:
《数据库系统概论》第三章笔记
 《数据库系统概论》第二章笔记
 《数据库系统概论》第一章笔记
 《Java并发编程的艺术》第九章笔记
 Dijkstra算法
 LaTex插图总结
 PDF中点击参考文献如何回到正文
 清华大学SCI论文写作心得
 LaTex写论文
 MATLAB中ode23函数，龙格库塔函数
原文地址：https://www.cnblogs.com/ghx88/p/1204391.html