使用Javascript数组添加HTML表行和列，不起作用_Javascript_Html

使用Javascript数组添加HTML表行和列，不起作用

javascript html

使用Javascript数组添加HTML表行和列，不起作用,javascript,html,Javascript,Html,我正在使用HTML表和JS数组。我有表头和小计的最后一行我尝试用下面的代码创建和添加行，但它不起作用。代码应该读取数组元素，并根据元素的数量创建行，然后向其中添加列请帮帮我 var titles=[“第1册”、“第2册”、“第3册]；变量数量=[3,1,2]；风险价值价格=[80125,75]； var-GrandTotal=0；函数myTable（）{ 对于（变量i=0；i 表和数组桌子{ 边框：1px纯黑；边界塌陷：塌陷； } th，tr，td{ 边框：1px纯黑； } Gr

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

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

请帮帮我

var titles=[“第1册”、“第2册”、“第3册]；
变量数量=[3,1,2]；
风险价值价格=[80125,75]；
var-GrandTotal=0；
函数myTable（）{
对于（变量i=0；i
表和数组
桌子{
边框：1px纯黑；
边界塌陷：塌陷；
}
th，tr，td{
边框：1px纯黑；
}
GrandTotal未定义错误请先更正代码是的，我也看到了…但这不是主要问题…对于我来说，先检查代码或任何人，你必须让它运行manit正在运行…但只有HTML代码..JS没有出现在图片中…你没有运行函数man
<!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>