Javascript: Inserting table rows for each element of an array, if array element populated
===

I have a multi-dimensional array where not all elements will be populated. I want to output the contents of that array into an HTML table. I currently have this: 


    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;
    }


with an HTML table set up like so:
<!--
<table 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>-->

However if my array is only populated in columns [0][9], [1][9] and [2][9] then i end up with a huge gap of empty rows in my HTML, before the output. Can anyone suggest a better way to do this? Perhaps so that my javascript inserts a table row for each populated array element?

I'm a newbie to programming so please excuse my no-doubt verbose and inelegant code.

Thank you,
Jon