的Javascript：插入表中的行的数组中的每个元素，如果数组元素填充

Question

我有一个多维阵列，其中不是所有的元素将被填充。我想将该数组的内容输出到HTML表格中。我现在有这样的：

for (var basketRowJuice = 0; basketRowJuice < 10; basketRowJuice++){ 
    var outputName = ""; 
    outputName = (basketArray[0][basketRowJuice]); 
    document.getElementById("basketJuiceName" + basketRowJuice).innerHTML = outputName; 
} 

for (var basketRowQuant = 0; basketRowQuant < 10; basketRowQuant++){ 
    var outputQuant = 0; 
    outputQuant = (basketArray[1][basketRowQuant]); 
    document.getElementById("basketJuiceQuant" + basketRowQuant).innerHTML = outputQuant; 
} 

for (var basketRowPrice = 0; basketRowPrice < 10; basketRowPrice++){ 
    var outputPrice = 0; 
    outputPrice = (basketArray[2][basketRowPrice]); 
    document.getElementById("basketJuicePrice" + basketRowPrice).innerHTML = outputPrice; 
} 

HTML表格：

<table id="basket" cellpadding="0" cellspacing="0" summary="This table lists the items you have in your shopping basket"> 
           <caption>Your basket</caption> 
           <tr> 
            <th scope="col">Juice name</th> 
            <th scope="col">Number of crates</th> 
            <th scope="col">Total price</th> 
           </tr> 
           <tr> 
            <td id="basketJuiceName0"></td> 
            <td id="basketJuiceQuant0"></td> 
            <td id="basketJuicePrice0"></td> 
           </tr> 
           <tr> 
            <td id="basketJuiceName1"></td> 
            <td id="basketJuiceQuant1"></td> 
            <td id="basketJuicePrice1"></td> 
           </tr> 
           <tr> 
            <td id="basketJuiceName2"></td> 
            <td id="basketJuiceQuant2"></td> 
            <td id="basketJuicePrice2"></td> 
           </tr> 
           <tr> 
            <td id="basketJuiceName3"></td> 
            <td id="basketJuiceQuant3"></td> 
            <td id="basketJuicePrice3"></td> 
           </tr> 
           <tr> 
            <td id="basketJuiceName4"></td> 
            <td id="basketJuiceQuant4"></td> 
            <td id="basketJuicePrice4"></td> 
           </tr> 
           <tr> 
            <td id="basketJuiceName5"></td> 
            <td id="basketJuiceQuant5"></td> 
            <td id="basketJuicePrice5"></td> 
           </tr> 
           <tr> 
            <td id="basketJuiceName6"></td> 
            <td id="basketJuiceQuant6"></td> 
            <td id="basketJuicePrice6"></td> 
           </tr> 
           <tr> 
            <td id="basketJuiceName7"></td> 
            <td id="basketJuiceQuant7"></td> 
            <td id="basketJuicePrice7"></td> 
           </tr> 
           <tr> 
            <td id="basketJuiceName8"></td> 
            <td id="basketJuiceQuant8"></td> 
            <td id="basketJuicePrice8"></td> 
           </tr> 
           <tr> 
            <td id="basketJuiceName9"></td> 
            <td id="basketJuiceQuant9"></td> 
            <td id="basketJuicePrice9"></td> 
           </tr> 
          </table> 

然而，如果我的阵列中只填入在列[0] [9]，[1] [9]和[2] [9 ]然后我输出之前，我的HTML中的空行的巨大差距。任何人都可以提出一个更好的方法来做到这一点也许，以便我的JavaScript为每个填充数组元素插入一个表行？

我是一个新手到编程，所以请原谅我没有怀疑冗长和不雅代码。

谢谢 乔恩

Answer 1

你可能想要的东西更像你的环内对以下。

var outputPrice = basketArray[2][basketRowPrice]; 
if (outputPrice) { 
    // do something here. the if statement will be true for non-null, non-empty, non-zero values of the var outputPrice. 
} 

我也会注意，您可以通过一个像你更换3个循环：

for (var j = 0; j < 10; j++) { 
    for (var i = 0; i < 3; i++) { 
     var outputName = basketArray[i][j]; 
     var outputQuant = basketArray[1][basketRowQuant]; 
     //.. do the rest of the code 
    } 
} 

的最后一步是删除硬编码的HTML和动态地生成它，下面是不检查，所以它可能会有点偏离，查找DOM方法。

var tbody = document.getElementById('basket').tbodies[0]; 
for (var j = 0; ...) { 
    var tr = document.createElement('tr'); 
    tbody.appendChild(tr); 
    for (var i = 0; ..) { 
     var td = document.createElement('td'); 
     td.innerHTML = ...; 
     tr.appendChild(td); 
    } 
}