Javascript Html，更改表中的列顺序

我正在使用

knockout.js

lib绑定数据。
让我们来看下一个例子

我有一张数据表。表列顺序为-

Name

-

LastName

-

Middlename

-

Age

我有4个功能

var namePosition = function()

var lastnamePosition = function()

var middlenamePosition = function()

var agePosition = function()  

我希望将表中列的顺序绑定到此函数返回的值。
例如

namePosition

返回

4

lastnamePosition

返回

2

middlenamePosition

返回

1

agePosition

返回

3

那么表应该有下一列顺序-

Middlename

-

LastName

-

Age

-

Name

---

你有什么想法，我怎么做？（使用

knockout

或

jquery

）

您可以使用简单的JS数组作为查找表：

var fields = [];
fields['Name'] = 4; 
fields['LastName'] = 2;
...etc...

---

然后使用

字段['Name']

而不是代码中的数值。不需要函数

您可以使用简单的JS数组作为查找表：

var fields = [];
fields['Name'] = 4; 
fields['LastName'] = 2;
...etc...

---

然后使用

字段['Name']

而不是代码中的数值。不需要函数

我从表格将有标题的角度出发，这些标题也需要重新排序。如果情况并非如此，您可能会完全忽略此答案。：）

我对击倒一点也不熟悉——我不能肯定这不是一个代码恐怖

然而，这个提琴会将列的顺序更改为您在示例中给出的顺序。虽然这些值是硬编码的（如果是合适的方法），但要想找到一种将它们移动到任意位置的方法应该不会太麻烦

---

这里：

我从表格将有标题的角度进行了探讨，这些标题也需要重新排序。如果情况并非如此，您可能会完全忽略此答案。：）

我对击倒一点也不熟悉——我不能肯定这不是一个代码恐怖

然而，这个提琴会将列的顺序更改为您在示例中给出的顺序。虽然这些值是硬编码的（如果是合适的方法），但要想找到一种将它们移动到任意位置的方法应该不会太麻烦

---

这里：

迪奥多斯所说的是一个很好的方法。您可以使用以下函数生成订单数组：

var order = [];
order[namePosition()] = "name";
order[lastnamePosition()] = "last";
order[middlenamePosition()] = "middle";
order[agePosition()] = "age";

// order===["middle", "last", "age", "name"]

然后将order observableArray属性设置为对象，使用前面提到的创建时的顺序作为初始值

最后一件事是将单元格顺序和文本绑定到新值：

<table>
   <thead>  
     <tr data-bind="foreach:order">
       <td data-bind="text:$root.headers[$data]"></td>
    </tr>
 </thead>
  <tbody data-bind="foreach:users">   
    <tr data-bind="foreach:$root.order">
        <td><span data-bind="text:$parent[$data]"></span></td>
    </tr>
  </tbody>
</table>

---

这里的例子：

迪奥多斯所说的是一个很好的方法。您可以使用以下函数生成订单数组：

var order = [];
order[namePosition()] = "name";
order[lastnamePosition()] = "last";
order[middlenamePosition()] = "middle";
order[agePosition()] = "age";

// order===["middle", "last", "age", "name"]

然后将order observableArray属性设置为对象，使用前面提到的创建时的顺序作为初始值

最后一件事是将单元格顺序和文本绑定到新值：

<table>
   <thead>  
     <tr data-bind="foreach:order">
       <td data-bind="text:$root.headers[$data]"></td>
    </tr>
 </thead>
  <tbody data-bind="foreach:users">   
    <tr data-bind="foreach:$root.order">
        <td><span data-bind="text:$parent[$data]"></span></td>
    </tr>
  </tbody>
</table>

示例如下：