js 控制table 列的顺序

需求：js 控制table 列的顺序1、绑定数据库所有列的值到table上
2、在页面上有几个下拉框 里面绑定的是数据库列名，下拉框数据都一样
3、根据我选择下拉框的 数据 控制 table 中 列 的显示隐藏并顺序要一致比如：有三个下拉框 
（1）           （2）              （3）
请选择....     请选择...        请选择...
ID            ID               ID 
Name          Name             Name
Type          Type             Type初始表格table
ID      Name     Type
1       小李      男
2       小刘      女如果下拉框（1）我选择Name，下拉框（3）我选项ID  则表格要显示为
Name    ID
小李      1
小刘      2
请问用js怎么控制这样的效率          请大虾们帮帮忙 ！！！！  谢谢！！！！

解决方案 »

  1.   

     document.getElementById("列的id").style.display='none';
      

  2.   

    jqgrid里面有column reordering 和 column chooser的功能跟你的要求类似的
      

  3.   

    把table的数据用json保存起来{ id:12, name：‘zhangsan’,type:'nan'}
    每次ddl改变时，重新生成table
    比如你三个ddl的顺序是 name id type 你在遍历json生成table是
    就一次读取 name，id，type 来生成table
    当 ddl的顺序发生变化时，只需要根据ddl的顺序来改变读取json的顺序就行了。。
      

  4.   

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
     <head>
      <title>洋帆型号速查</title>
         
         <script src="js/jquery-1.8.2.min.js" type="text/javascript"></script>
         <script type='text/javascript'>
             var json = [{ "id": 1, "name": "zhangsan", "type": "nan" }, { "id": 2, "name": "lisi", "type": "nv"}];
             function CreateTable() {
                 $("#table1").empty();
                 var v1 = $("#ddl1").val();
                 var v2 = $("#ddl2").val();
                 var v3 = $("#ddl3").val();
                 for (var i = 0; i < json.length; i++) {
                     var item1 = json[i][v1];
                     var item2 = json[i][v2];
                     var item3 = json[i][v3];
                     var str = " <tr> <td>" + item1 + "</td> <td>" + item2 + "</td> <td>" + item3 + "</td> </tr>";
                     $("#table1").append(str);
                 }
             }
         </script>
     </head>
     <body >
     <div >
     <select id="ddl1">
     <option value="type">type</option>
     <option value="name">name</option>
     <option value="id">id</option>
     </select>
      <select id="ddl2">
     <option value="type">type</option>
     <option value="name">name</option>
     <option value="id">id</option>
     </select>
      <select id="ddl3">
     <option value="type">type</option>
     <option value="name">name</option>
     <option value="id">id</option>
     </select>
     <input type="button" value="CreateTable" onclick="CreateTable()" />
     </div>
     <div id="div1">
     <table id="table1">
     </table>
     </div>
     </body>
    </html>
      

  5.   

    7楼回复了一个完整的例子 ，，复制代码运行一下 啊 记得引入jquery
      

  6.   

    我的数据是后台加载就绑定了的  不能直接操作table的列吗？？？？
      

  7.   

    var json = [{ "id": 1, "name": "zhangsan", "type": "nan" }, { "id": 2, "name": "lisi", "type": "nv"}];
     
    这个数据我怎么绑定啊？、？
      

  8.   

    http://www.trirand.com/blog/jqgrid/jqgrid.html看看上面链接里面的New in version 3.6->Column reodering
      

  9.   

    JQ的没弄过 。 ext grid 有封装好的！