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

时间:2014-01-12 19:12:21

标签: javascript html arrays

我发现了一篇类似的帖子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 - John

2 - Jane

3 - 亚当

4 - Karen

5 - Trish

6 - 公司



所以我希望第二个数组控制第一个数组的顺序,所以如果在第二个数组中我写了:

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



它将使第一个数组输出如下:

1 - John

2 - Karen

3 - Trish

4 - Adam

5 - 公司

6 - Jane





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

1 个答案:

答案 0 :(得分: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添加了更多数据以测试新的变化。

相关问题