Javascript table using variable, returned value, and CSS data

I'm having a problem getting my javascript generated table to input data from my .js file. I have arrays in seperate .js file:

firstName = new Array();
lastName = new Array();
street = new Array();
city = new Array();
state= new Array();
zip = new Array();
amount = new Array();
date = new Array()


firstName[0]="Nina";
lastName[0]="Largent";
street[0]="88 Regal Lane";
city[0]="Williamsburg";
state[0]="KY";
zip[0]="40769";
amount[0]=125;
date[0]="2011-09-18";


firstName[1]="Mike";
lastName[1]="Hunt";
street[1]="Da404 Barrow Street";
city[1]="London";
state[1]="KY";
zip[1]="40742";
amount[1]=75;
date[1]="2011-09-18";

, etc....

I have done loops and can document.write the data to the page, but am unable to apply that data where I want it in the local script.

Here is what I have thus far.

<script type="text/javascript">

    function amountTotal() 
    {
       var total = 0
       for (var i = 0; i<amount.length;i++) 
       {
           total = total + amount[i]     
       }
           {
           return total
           }
    } 

This returns my total of 5175 that I want to apply to my total cell I thought I should be able to say (document.write("total");), but that doesn't work. All it does is print the word total in the cell.

  <div id="data_list">

    <script type="text/javascript">

    document.write("<table border='1' rules='rows' cellspacing='0'>");
    document.write("<tr>");
    document.write("<th>Date</th><th>Amount</th><th>First Name</th><th>Last Name</th><th>Address</th>");
    document.write("</tr>");
    document.write("</table>");

       var contributors = 0
       for (var i = 0; i <amount.length; i++){

        if (i % 2){
        document.write("<tr>")
    }
        else {
        document.write("<tr class='yellowrow'>")
    }
        document.write("<td>date</td><td class='amt'>amount</td><td>firstName</td><td>lastName</td>");
        document.write("<td>street<br />city, state zip</td>");
        document.write("</tr>");
}


    </script>

</div>

   <div id="totals">

    <script type="text/javascript">
    var total = 5175
    document.write("<table border='1' cellspacing='1'>");
    document.write("<tr>");
    document.write("<th id='sumTitle' colspan='2'>");
    document.write("Summary");
    document.write("</th>");
    document.write("</tr>");
    document.write("<tr>");
    document.write("<th>Contributors</th>");
    document.write("<td>contributors</td>");
    document.write("</tr>");
    document.write("<tr>");
    document.write("<th>Amount</th>");
    document.write("<td>$total</td>");
    document.write("</tr>");
    document.write("</table>"); 

    </script>

   </div>

Any help would be greatly appreciated. I've been wracking my brain for days on this.