使用 Javascript 在具有 2 列的表中显示数组数据
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6326350/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Display array data in a table with 2 columns using Javascript
提问by tempid
I have the following code -
我有以下代码 -
<script type="text/javascript">
function test() {
var results = "";
var myArray = new Array();
myArray[0] = "Customizable";
myArray[1] = "Marketing Collateral";
myArray[2] = "Online Marketing";
myArray[3] = "Training";
myArray[4] = "Event Resources";
myArray[5] = "Marketing Logos";
myArray[6] = "Competitive Solution Comparison";
myArray[7] = "Sales Tools";
myArray[8] = "Retail Marketing"
myArray[9] = "Internal";
results = "<table>";
for (var i=0; i<myArray.length; i++) {
results += "<tr><td>" + myArray[i] + "</td>";
results += "<td>" + myArray[i+1] + "</td></tr>";
}
results += "<tr><td colspan=2><a href='#' onclick='javascript:RedirectParentToDownload();'>View all content ></a></td></tr>";
results += "<table><br /> <br />";
var div = document.getElementById("associatedAssets");
div.innerHTML = results;
}
</script>
<body onload="javascript:test();">
<div id="associatedAssets"></div>
</body>
How do I get the output to be rendered as 2 columns and n rows? I want the output to look something like this -
如何让输出呈现为 2 列和 n 行？我希望输出看起来像这样 -
Customizable Marketing Collateral
Online Marketing Training
Event Resources Marketing Logos
etc
采纳答案by Chandu
You need to use an increment of 2 for i in your for loop.
Also add a check to see if the i+1th element exists before using it while concatenating the array content to HTML string.
您需要在 for 循环中为 i 使用 2 的增量。
在将数组内容连接到 HTML 字符串时，还要在使用它之前添加检查以查看第 i+1 个元素是否存在。
Try this:
试试这个：
function test() {
var results = "";
var myArray = new Array();
myArray[0] = "Customizable";
myArray[1] = "Marketing Collateral";
myArray[2] = "Online Marketing";
myArray[3] = "Training";
myArray[4] = "Event Resources";
myArray[5] = "Marketing Logos";
myArray[6] = "Competitive Solution Comparison";
myArray[7] = "Sales Tools";
myArray[8] = "Retail Marketing"
myArray[9] = "Internal";
results = "<table>";
for (var i=0; i<myArray.length; i=i+2) { //###NOTICE THE CHANGE FROM i++ TO i=i+2
results += "<tr><td>" + myArray[i] + "</td>";
if(i+1 < myArray.length){
results += "<td>" + myArray[i+1] + "</td></tr>";
} else{
results += "<td></td></tr>";
}
}
results += "<tr><td colspan=2><a href='#' onclick='javascript:RedirectParentToDownload();'>View all content ></a></td></tr>";
results += "<table><br /> <br />";
var div = document.getElementById("associatedAssets");
div.innerHTML = results;
}
回答by James Montagne
If you change your loop to this:
如果您将循环更改为：
for (var i=0; i<myArray.length; i=i+2) {
Then your code basically works. You will however want to check that myArray[i+1]exists so that it also works with an odd number of elements.
那么你的代码基本上可以工作了。但是，您需要检查是否myArray[i+1]存在，以便它也适用于奇数个元素。
回答by Bakudan
Hereit is, working and fixed.
在这里，工作和固定。
Here you have to skip 2nd number, because of the 2 columns
在这里你必须跳过第二个数字，因为有 2 列
for (var i = 0; i < myArray.length; i+=2 )
You also have to check the second element. If the elements in the array are even no problem, they are divisable by 2. If it is odd, you are calling for element that does not exist. Check if it is undefined with ternary operator
您还必须检查第二个元素。如果数组中的元素偶数没有问题，则可以被2整除。如果是奇数，则调用不存在的元素。用三元运算符检查它是否未定义
( myArray[i+1]===undefined ? '' : myArray[i+1] )
or more simple
或更简单
( myArray[i+1] || '' )
