我发现了一篇类似的帖子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 而无需修改第一个数组。
示例: 第一个数组写为:
所以我希望第二个数组控制第一个数组的顺序,所以如果在第二个数组中我写了:
var sortArr = [0,3,4,2,5,1];
它将使第一个数组输出如下:
如上所述,我发现了一个类似的帖子JavaScript - Sort an array based on another array of integers,它似乎完全符合我的需要。所以我的问题是如何将Nick的脚本与我当前的脚本集成?
答案 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
添加了更多数据以测试新的变化。