Question

我正在使用HTML表和JS数组。我有表标题和小计的最后一行。

我试图用下面的代码创建和添加行，但是它不起作用。该代码应读取数组元素，并应根据元素数量创建行，然后向其中添加列。

请帮助我！

path

 var titles = ["Book 1","Book 2","Book 3"];
        var quantities = [3,1,2];
        var prices = [80,125,75];
        var GrandTotal = 0;

        function myTable() {
            for(var i=0;i<titles.length;i++){
                var x = document.createElement("TR");
                x.setAttribute("id", "myTr[i]");
                document.getElementById("table").appendChild(x);
                
                for(var j=0;titles.length;j++){
                    //creating Title columns
                    var titleColumn = document.createElement("TD");
                    var titleColumnText = document.createTextNode(titles[j]);
                    
                    //adding title values
                    titleColumn.appendChild(titleColumnText);
                    document.getElementById("myTr[i]").appendChild(titleColumn);
                    
                    //creating Quantity columns
                    var qtyColumn = document.createElement("TD");
                    var qtyColumnText = document.createTextNode(quantities[j]);
                                        
                    //adding Quantity values
                    qtyColumn.appendChild(qtyColumnText);
                    document.getElementById("myTr[i]").appendChild(qtyColumn);
                    
                    //creating Price columns
                    var priceColumn = document.createElement("TD");
                    var priceColumnText = document.createTextNode(prices[j]);

                    //adding Price values
                    priceColumn.appendChild(priceColumnText);
                    document.getElementById("myTr[i]").appendChild(priceColumn);

                    // Amount calculation
                    var amt=prices[j]*quantities[j];

                    //creating Amt columns
                    var amtColumn = document.createElement("TD");
                    var amtColumnText = document.createTextNode(amt);

                    //adding Amt values
                    priceColumn.appendChild(amtColumnText);
                    document.getElementById("myTr[i]").appendChild(amtColumn);

                    GrandTotal += amt;
                }
            }    
        }

        document.getElementById("grandTotal").innerHTML= GrandTotal;

Answer 1

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />        
    <title>Table and Array</title>
    <style>
    table{
        border: 1px solid black;
        border-collapse: collapse;
    }
    th, tr, td{
        border: 1px solid black;
    }
    </style>
</head>

<body ">
<div class="title">
    <h1>My Store</h1>
</div>
<table class="table-fill" id="table">
    <thead>
        <tr>
            <th colspan="2">Product Title</th>
            <th>Quantity</th>
            <th>Price</th>
            <th>Amount</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td colspan="5">I want to add rows anc columns here dynamically</td>
        </tr>        
        <tr class="totals">
            <td colspan="4" id="subTotal">Subtotal</td>
            <td id="grandTotal"></td>
        </tr>

    </tbody>
    </table>

</body>
<script>

 var titles = ["Book 1","Book 2","Book 3"];
        var quantities = [3,1,2];
        var prices = [80,125,75];
        var GrandTotal = 0;

        function myTable() {
            console.log('a')
            for(var i=0;i<titles.length;i++){
                var x = document.createElement("TR");
                x.setAttribute("id", `${titles[i]}`);
                document.getElementById("table").appendChild(x);
                console.log(document.getElementById("table"))
                    //creating Title columns
                    var titleColumn = document.createElement("TD");
                    var titleColumnText = document.createTextNode(titles[i]);

                    //adding title values
                    titleColumn.appendChild(titleColumnText);
                    console.log(document.getElementById(`${titles[i]}, ${titles[i]}`))
                    document.getElementById(`${titles[i]}`).appendChild(titleColumn);

                    //creating Quantity columns
                    var qtyColumn = document.createElement("TD");
                    var qtyColumnText = document.createTextNode(quantities[i]);

                    //adding Quantity values
                    qtyColumn.appendChild(qtyColumnText);
                    document.getElementById(`${titles[i]}`).appendChild(qtyColumn);

                    //creating Price columns
                    var priceColumn = document.createElement("TD");
                    var priceColumnText = document.createTextNode(prices[i]);

                    //adding Price values
                    priceColumn.appendChild(priceColumnText);
                    document.getElementById(`${titles[i]}`).appendChild(priceColumn);

                    // Amount calculation
                    var amt=prices[i]*quantities[i];

                    //creating Amt columns
                    var amtColumn = document.createElement("TD");
                    var amtColumnText = document.createTextNode(amt);

                    //adding Amt values
                    amtColumn.appendChild(amtColumnText);
                    document.getElementById(`${titles[i]}`).appendChild(amtColumn);

                    GrandTotal += amt;
            }    
        }
        myTable();
        var grandTotalText = document.createTextNode(GrandTotal);
        document.getElementById("grandTotal").appendChild(grandTotalText)
</script>
</html>

使用Javascript Array添加HTML表的行和列，不起作用

1 个答案: