显示由数组填充并由另一个数组排序的表

Question

我发现了一个类似的帖子 JavaScript - Sort an array based on another array of integers，只是需要一些帮助来使用我自己的脚本来实现该脚本。

我正在制作一个小提琴http://jsfiddle.net/c87Jx/，它根据数组array 的数据显示一个表格。



我的脚本：

   //<![CDATA[ 
   //employee array
   window.onload = function () {

       var array = [];
       array[0] = {
           name: "John Doe",
           number: "508-555-1234"
       };
       array[1] = {
           name: "Jane Doe",
           number: "775-555-5678"
       };
       array[2] = {
           name: "Adam Doe",
           number: "603-555-9012"
       };
       array[3] = {
           name: "Karen Doe",
           number: "978-555-3456"
       };
       array[4] = {
           name: "Trish Doe",
           number: "603-555-7890"
       };
       array[5] = {
           name: "Company",
           number: "(try to reach someone)"
       };
       var arrayLength = array.length;
       var theTable = document.createElement("table");
       currentIndex = 0;
       lastIndex = array.length - 1;

       //write table header
       while (true) {
           tr = document.createElement("tr");

           td0 = document.createElement("td");
           td0.colSpan = 3;
           p = document.createElement("p");
           p.appendChild(document.createTextNode("Table"));
           td0.appendChild(p);
           tr.appendChild(td0);

           theTable.appendChild(tr);
           break;
       }

       //for each employee in above array, write the attempt #, their name, and their contact info
       for (var i = 0, tr, td; i < arrayLength; i++) {

           tr = document.createElement("tr");

           td1 = document.createElement("td");
           p = document.createElement("p");
           p.appendChild(document.createTextNode("Attempt #" + (array.length++-5)));
           td1.appendChild(p);
           tr.appendChild(td1);

           td2 = document.createElement("td");
           p = document.createElement("p");
           p.appendChild(document.createTextNode(array[i].name));
           td2.appendChild(p);
           tr.appendChild(td2);

           td3 = document.createElement("td");
           p = document.createElement("p");
           p.appendChild(document.createTextNode(array[i].number));
           td3.appendChild(p);
           tr.appendChild(td3);

           theTable.appendChild(tr);
       }
       document.getElementById("table").appendChild(theTable);
   };
   //]]>

输出一个非常基本的表格，例如：

<div id="table">
    <table>
        <tr>
            <td colspan="3"><p>Table</p></td>
        </tr>
        <tr>
            <td><p>Attempt #1</p></td>
            <td><p>John Doe</p></td>
            <td><p>508-555-1234</p></td>
        </tr>
        <tr>
            <td><p>Attempt #2</p></td>
            <td><p>Jane Doe</p></td>
            <td><p>775-555-5678</p></td>
        </tr>
        <tr>
            <td><p>Attempt #3</p></td>
            <td><p>Adam Doe</p></td>
            <td><p>603-555-9012</p></td>
        </tr>
        <tr>
            <td><p>Attempt #4</p></td>
            <td><p>Karen Doe</p></td>
            <td><p>978-555-3456</p></td>
        </tr>
        <tr>
            <td><p>Attempt #5</p></td>
            <td><p>Trish Doe</p></td>
            <td><p>603-555-7890</p></td>
        </tr>
        <tr>
            <td><p>Attempt #6</p></td>
            <td><p>Company</p></td>
            <td><p>(try to reach someone)</p></td>
        </tr>
    </table>
</div>

接下来我要介绍第二个数组，它将用于管理第一个数组中的数据在输出表中的显示顺序。这里的目标是能够在不修改第一个数组的情况下操作 Attempt #s。

示例： 第一个数组写成：

1 - 约翰

2 - 简

3 - 亚当

4 - 卡伦

5 - 翠西

6 - 公司

所以我想让第二个数组控制第一个数组的顺序，所以如果在第二个数组中我写了：

 var sortArr = [0,3,4,2,5,1];

它会使第一个数组输出如下：

1 - 约翰

2 - 卡伦

3 - 翠西

4 - 亚当

5 - 公司

6 - 简

如上所述，我发现了一个类似的帖子JavaScript - Sort an array based on another array of integers，它似乎完全符合我的需要。所以我的问题是如何将 Nick 的脚本与我当前的脚本集成？

Answer 1

这就是我所做的：

首先，我将您引用的问题中创建的函数添加到代码中：

window.onload = function () {

    function getSorted(arr, sortArr) {
        var result = [];
        // changed arr.length to sortArr.length:
        for(var i=0; i < sortArr.length; i++) {
            result[i] = arr[sortArr[i]];
        }
        return result;
    }

    //... the rest of your code
}

接下来，我添加了两个数组：

var array = [],
    sortArr = [0,3,4,7,9,1],
    sortedArr;

接下来，将所有数据放入array变量后，我调用了getSorted函数：

// your code putting data into array
//...
sortedArr = getSorted(array, sortArr);

最后，我改变了在 for 循环中将数据输出到表中的方式：

// changed arrayLength to sortArr.length:
for (var i = 0, tr, td; i < sortArr.length; i++) {

    tr = document.createElement("tr");

    td1 = document.createElement("td");
    p = document.createElement("p");
    // changed (array.length++-5) to (i+1):
    p.appendChild(document.createTextNode("Attempt #" +(i+1)));
    td1.appendChild(p);
    tr.appendChild(td1);

    td2 = document.createElement("td");
    p = document.createElement("p");
    // changed (array[i].name) to (sortedArr[i].name):
    p.appendChild(document.createTextNode(sortedArr[i].name));
    td2.appendChild(p);
    tr.appendChild(td2);

    td3 = document.createElement("td");
    p = document.createElement("p");
    // changed (array[i].number) to (sortedArr[i].number):
    p.appendChild(document.createTextNode(sortedArr[i].number));
    td3.appendChild(p);
    tr.appendChild(td3);

    theTable.appendChild(tr);
}

Here is an updated fiddle 希望对您有所帮助！如果您有任何问题，请告诉我！

编辑：我更改了每个循环运行的迭代次数 - 两者都基于 array.length，现在它们都基于 sortArr.length。这仅在 sortArray 的长度小于或等于数组长度时才有效。听起来这对您的情况有用-如果我错了，请纠正我！ :) 另外，在小提琴中，我向array 添加了更多数据以测试新更改。