js 统制table 列的顺序

2012-12-31

js 控制table 列的顺序需求：js 控制table 列的顺序1、绑定数据库所有列的值到table上2、在页面上有几个下拉

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怎么控制这样的效率

        请大虾们帮帮忙！！！！  谢谢！！！！

[解决办法]
document.getElementById("列的id").style.display='none';
[解决办法]
jqgrid里面有column reordering 和 column chooser的功能跟你的要求类似的
[解决办法]
把table的数据用json保存起来{ id:12, name：‘zhangsan’,type:'nan'}
每次ddl改变时，重新生成table
比如你三个ddl的顺序是 name id type 你在遍历json生成table是
就一次读取 name，id，type 来生成table
当 ddl的顺序发生变化时，只需要根据ddl的顺序来改变读取json的顺序就行了。。
[解决办法]
<!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>
[解决办法]
http://www.trirand.com/blog/jqgrid/jqgrid.html

看看上面链接里面的New in version 3.6->Column reodering
[解决办法]
JQ的没弄过。 ext grid 有封装好的！
[解决办法]
帮楼主顶一个

热点排行

asp.net

js 统制table 列的顺序