当前位置: 首页 > 编程笔记 >

jQuery实现调整表格单列顺序完整实例

石俊雄
2023-03-14
本文向大家介绍jQuery实现调整表格单列顺序完整实例,包括了jQuery实现调整表格单列顺序完整实例的使用技巧和注意事项,需要的朋友参考一下

本文实例讲述了jQuery实现调整表格单列顺序的方法。分享给大家供大家参考,具体如下:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>调整表格顺序</title>
  <script type = "text/javascript" src="jquery-1.7.2.js"></script>
  <style type = "text/css">
   #main{
    width:800px;
    height:400px;
    margin:auto;
    text-align:center;
    border:1px solid red;
    background:#eee;
    padding-top:100px;
   }
   #tabf{
    height:170px;
    position:relative;
   }
   #showDetail{
    left:244px;
    width:20px;
    height:15px;
    line-height:15px;
    border-left:1px solid blue;
    border-top:1px solid blue;
    border-right:1px solid blue;
    cursor:pointer;
    display:none;
    position:absolute;
   }
   #tab{
    margin-top:16px;
    border-collapse:collapse;
    position:absolute;
   }
   #tab td{
    height:50px;
    width:50px;
    line-height:50px;
    border:1px solid blue;
   }
   #sortTab{
    width:170px;
    height:155px;
    border:3px outset;
    background:#ccc;
    position:absolute;
    top:15px;
    left:270px;
    display:none;
   }
   #tdList{
    width:90px;
    height:150px;
    border:1px inset;
    position:absolute;
   }
   #opt{
    width:80px;
    height:150px;
    position:absolute;
    left:90px;
   }
   .btn{
    margin:10px;
    width:60px;
    height:20px;
   }
  </style>
  <script type = "text/javascript">
   $(function(){
    index = 0;
    cols = new Array();
    show_Hide_tipBtn();//显示或隐藏表格设置面板
    showResult(); //文档加载完毕时,先将表格中的数据显示到面板中
    $(".up").click(function(){
     sortColumn(cols,index,"tab","up")
     showResult()
     $(".sortTd").each(function(m){
      if(m==index){
       $(this).css("background-color","red");
      }else{
       $(this).css("background-color","")
      }
     })
    })
    $(".down").click(function(){
     sortColumn(cols,index,"tab","down")
     showResult()
     $(".sortTd").each(function(m){
      if(m==index){
       $(this).css("background-color","red");
      }else{
       $(this).css("background-color","")
      }
     })
    })
   })
   function getResult(cols){
    var result = "";
    cols.each(function(n){
     result += "<span style = 'margin-top:10px;border:1px solid;display:block' id='"+n+"' class='sortTd'>"+$(this).text()+"</span>";
    })
    return result;
   }
   function showResult(){ //将表格中各列的第一行显示到面板中
    cols.length = 0;
    $("#tab tr:first td").each(function(i){
     var col = $("#tab tr td::nth-child("+(i+1)+")") //将每一列分别存入数组cols中
     cols.push(col);
     $("#tdList").html(getResult($(cols))); //添加到面板
     $(".sortTd").click(function(){
      $(".sortTd").css("background-color","")
      $(this).css("background-color","red");
      index = parseInt($(this).attr("id"));
     })
    })
   }
   function show_Hide_tipBtn(){
    $("#tab").mouseover(function(){ //鼠标移入到表格上时,显示弹出按钮
     $("#showDetail").css("display","block");
    }).mouseout(function(){ //鼠标移入到表格上时,隐藏弹出按钮
     $("#showDetail").css("display","none");
    })
    $("#showDetail").mouseover(function(){ //鼠标移入到弹出按钮上时,显示弹出按钮
     $(this).css("display","block");
    }).mouseout(function(){ //鼠标移入到弹出按钮上时,隐藏弹出按钮
     $(this).css("display","none");
    })
    $("#showDetail").click(function(){
     $("#sortTab").slideToggle("slow");
    })
   }
   function sortColumn(col, t, faId, dir){
    if (((t == 0) && (dir == "up")) || ((t == col.length-1) && (dir == "down"))) {
     return false;
    }
    else {
     var k = t;
     var idx = 0;
     if (dir == "up") {
      idx = k - 1;
     }
     else 
      if (dir == "down") {
       idx = k + 1;
      }
     var temp = null;
     temp = col[idx];
     col[idx] = col[k];
     col[k] = temp;
     $("#" + faId + " tr").each(function(){
      $(this).remove();
     })
     var trs = col[0].length;
     for (var j = 0; j < trs; j++) {
      var tr = $("<tr></tr>")
      $(col).each(function(){
       tr.append($($(this)[j]));
      })
      $("#" + faId).append(tr);
     }
     index = idx;
    //return col;
    }
   }
  </script>
 </head>
 <body>
  <div id = "main">
   <div id = "tabf">
    <div id = "showDetail">></div>
    <table id = "tab">
     <tr>
      <td>a</td><td>b</td><td>c</td><td>d</td><td>e</td>
     </tr>
     <tr>
      <td></td><td></td><td></td><td></td><td></td>
     </tr>
     <tr>
      <td></td><td></td><td></td><td></td><td></td>
     </tr>
    </table>
    <div id = "sortTab">
     <div id = "tdList"></div>
     <div id = "opt">
      <input type = "button" value = "UP" class = "btn up"/><br/>
      <input type = "button" value = "DOWN" class = "btn down"/><br/>
     </div>
    </div>
   </div>
  </div>
 </body>
</html>

更多关于jQuery相关内容感兴趣的读者可查看本站专题:《jQuery表格(table)操作技巧汇总》、《jQuery常用插件及用法总结》、《jquery中Ajax用法总结》、《jQuery拖拽特效与技巧总结》、《jQuery扩展技巧总结》、《jQuery常见经典特效汇总》、《jQuery动画与特效用法总结》及《jquery选择器用法总结》

希望本文所述对大家jQuery程序设计有所帮助。

 类似资料:
  • 本文向大家介绍jQuery实现的调整表格行tr上下顺序,包括了jQuery实现的调整表格行tr上下顺序的使用技巧和注意事项,需要的朋友参考一下 表格是大家比较常用的元素,有时候表格中的行需要调整顺序,下面就通过代码实例介绍一下如何利用jquery实现此功能。 代码实例如下: 通过以上代码简单实现了jQuery实现的调整表格行tr上下顺序,希望本段代码可以帮助到大家。

  • 本文向大家介绍jQuery实现的可编辑表格完整实例,包括了jQuery实现的可编辑表格完整实例的使用技巧和注意事项,需要的朋友参考一下 本文实例讲述了jQuery实现的可编辑表格。分享给大家供大家参考,具体如下: 更多关于jQuery相关内容感兴趣的读者可查看本站专题:《jQuery表格(table)操作技巧汇总》、《jQuery常用插件及用法总结》、《jquery中Ajax用法总结》、《jQue

  • 本文向大家介绍jquery调整表格行tr上下顺序实例讲解,包括了jquery调整表格行tr上下顺序实例讲解的使用技巧和注意事项,需要的朋友参考一下 表格是大家比较常用的元素,有时候表格中的行需要调整顺序,下面就通过代码实例介绍一下如何利用jquery实现此功能,分享给大家供大家参考,具体内容如下 代码实例如下: 以上代码实现了我们的要求,代码比较简单,这里就不多介绍了。 希望本文所述对大家学习ja

  • 主要内容:PHP - 在表单中确保输入值,PHP - 完整表单实例,实例本章节将介绍如何让用户在点击"提交(submit)"按钮提交数据前保证所有字段正确输入。 PHP - 在表单中确保输入值 在用户点击提交按钮后,为确保字段值是否输入正确,我们在HTML的input元素中插添加PHP脚本, 各字段名为: name, email, 和 website。 在备注中的 textarea 字段中,我们将脚本放于 <textarea> 和 </textarea> 标签之间。

  • 本文向大家介绍jQuery实现鼠标可拖动调整表格列宽度,包括了jQuery实现鼠标可拖动调整表格列宽度的使用技巧和注意事项,需要的朋友参考一下 实现鼠标可拖动调整表格列宽度 如图:   一、引入文件: 二、TABLE 以上html只是作为Demo 并不是我项目中所实际使用的,并且在测试的时候 也未能实现。郁闷... 三、实现表格可拖动 在项目使用过程中 发现无需引入store.js <th>也无需

  • 本文向大家介绍jQuery使用$.ajax提交表单完整实例,包括了jQuery使用$.ajax提交表单完整实例的使用技巧和注意事项,需要的朋友参考一下 本文实例讲述了jQuery使用$.ajax提交表单的方法。分享给大家供大家参考,具体如下: 首先,新建Login.html页面: 然后,新建Login.aspx,接收并处理数据: 希望本文所述对大家jQuery程序设计有所帮助。