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

Question

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

我正在开发一个 fiddle 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 ，它似乎完全符合我的需要。所以我的问题是如何将尼克的脚本与我当前的脚本集成？

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希望有帮助!如果您有任何疑问，请告诉我!

编辑:我更改了每个 for 循环运行的迭代次数 - 两者均基于 array.length ，现在它们都基于 sortArr.length 。仅当 sortArray 的长度小于或等于数组的长度时，这才有效。听起来这适合你的情况 - 如果我错了，请纠正我! :) 另外，在 fiddle 中我添加了更多数据到 array测试新的更改。