将HTML表中的两个单元格相乘，并使用javascript自动将结果放入第三个单元格。Withot Jquery_Javascript_Html

将HTML表中的两个单元格相乘，并使用javascript自动将结果放入第三个单元格。Withot Jquery

javascript html

将HTML表中的两个单元格相乘，并使用javascript自动将结果放入第三个单元格。Withot Jquery,javascript,html,Javascript,Html,我希望最后一列显示“总计”的内容是将产品数量乘以价格，并将其与产品放在同一行中这是我的表的当前外观：这是创建表并向您提供数据的代码 <html> <head> <meta charset="utf-8" /> </head> <style> table, td, th { border: 1px solid black; border-collapse: collapse; } </

我希望最后一列显示“总计”的内容是将产品数量乘以价格，并将其与产品放在同一行中

这是我的表的当前外观：

这是创建表并向您提供数据的代码

<html>

<head>
<meta charset="utf-8" />
</head>

<style>
table,
td,
th {
    border: 1px solid black;
    border-collapse: collapse;

}
</style>

<body>

<div id="contact">

    <h1>Invoice</h1>

    <form action="/table.html">
        <label for="invoice_id">Invoice:</label>
        <input type="text" id="invoice_id" name="invoice" placeholder="Enter Invoice Id" /><br>
        <button type="button" id="form_button" value="Consultar">Consultar</button>

    </form>

</div>

<table id="demo">
    <thead>
        <tr>
            <th>Code</th>
            <th>Date</th>
            <th>Amount</th>
            <th>Barcode</th>
            <th>Name</th>
            <th>Description</th>
            <th>Price</th>
            <th id="sum">Total</th>
        </tr>
        <tr>
        </tr>
    </thead>
    <tbody id="matchData"></tbody>
</table>



</body>

<script>

let button = document.getElementById("form_button");
button.addEventListener("click", function (e) {

    let id = document.getElementById("invoice_id").value;

    let request = new XMLHttpRequest();
    request.addEventListener("load", function (e) {

        if (request.readyState == 4) {
            if (request.status == 200) {
                console.log(request.responseText); // datos de la factura
                // pasarla a objeto (JSON)



                var data = JSON.parse(request.responseText);
                //var myObj = JSON.parse(request.responseText);

                var myObj = {
                    code: data.code,
                    date: data.date,
                    lines: []

                };

                for (let i = 0; i < data.lines.length; ++i) {
                    let tmp = data.lines[i];
                    var line = {
                        amount: tmp.amount,
                        barcode: tmp.barcode,
                        name: tmp.name,
                        description: tmp.description,
                        price: tmp.price
                    };
                    myObj.lines[i] = line;
                }

                console.log(myObj);

                let table = document.getElementById('matchData'), sumVal = 0;
                let line_count = myObj["lines"].length;
                let row = document.createElement("tr");

                for (let key in myObj) {
                    if (key == "code" || key == "date") {
                        let cell = document.createElement("td");

                        cell.rowSpan = line_count;
                        cell.textContent = myObj[key];
                        row.appendChild(cell);
                    }
                    if (key == "lines") {
                        for (let line_key in myObj[key][0]) {
                            let cell = document.createElement("td");

                            cell.textContent = myObj[key][0][line_key];
                            row.appendChild(cell);



                        }
                        table.appendChild(row);

                        for (let i = 1; i < line_count; i++) {
                            let row = document.createElement("tr");

                            for (let line_key in myObj[key][i]) {
                                let cell = document.createElement("td");

                                cell.textContent = myObj[key][i][line_key];
                                row.appendChild(cell);
                            }

                            table.appendChild(row);
                        }

                    }



                }


            } else {
                console.log("Error loading page\n");
            }
        }

    });
    request.open("GET", "http://127.0.0.1:8081/invoice/" +
        id);

    request.send();

});

</script>

</html>

注释2：

这就是我的桌子现在的样子：

我想要的是将所有产品的总数相加，并将其插入下面的单元格和“总数”旁边的单元格中。以下是与旧代码相比没有太大变化的新代码，但有几件事可以做到：

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>

<link rel="stylesheet" href="table.css">
</head>



<script>
function fetchID() {
    let Id = window.location.search.split('=')[1];
    loadTable(Id);
}
function loadTable(id) {

    let request = new XMLHttpRequest();
    request.addEventListener("load", function (e) {

        if (request.readyState == 4) {
            if (request.status == 200) {
                console.log(request.responseText); // datos de la factura
                // pasarla a objeto (JSON)

                var data = JSON.parse(request.responseText);

                var myObj = {
                    code: data.code,
                    date: data.date,
                    lines: []

                };

                for (let i = 0; i < data.lines.length; ++i) {
                    let tmp = data.lines[i];
                    var line = {
                        amount: tmp.amount,
                        barcode: tmp.barcode,
                        name: tmp.name,
                        description: tmp.description,
                        price: tmp.price
                    };
                    myObj.lines[i] = line;
                }

                document.getElementById("iddate").innerHTML = data.date;
                document.getElementById("idcode").innerHTML = data.code;

                console.log(myObj);

                let table = document.getElementById('matchData'),
                    sumVal = 0;
                let line_count = myObj["lines"].length;
                let row = document.createElement("tr");

                for (let key in myObj) {

                    /*if (key == "code" || key == "date") {
                        let cell = document.createElement("td");

                        cell.rowSpan = line_count;
                        cell.textContent = myObj[key];
                        row.appendChild(cell);
                    }*/

                    if (key == "lines") {

                        let price = 0,
                            amount = 0;
                        for (let line_key in myObj[key][0]) {
                            if (line_key == 'price') price = myObj[key][0][line_key];
                            if (line_key == 'amount') amount = myObj[key][0][line_key];
                            let cell = document.createElement("td");

                            cell.textContent = myObj[key][0][line_key];
                            row.appendChild(cell);
                        }

                        let cell = document.createElement("td");
                        cell.textContent = price * amount;
                        row.appendChild(cell);

                        table.appendChild(row);

                        for (let i = 1; i < line_count; i++) {
                            let row = document.createElement("tr");
                            let _price = 0,
                                _amount = 0;
                            for (let line_key in myObj[key][i]) {
                                if (line_key == 'price') _price = myObj[key][i][line_key];
                                if (line_key == 'amount') _amount = myObj[key][i][line_key];
                                let cell = document.createElement("td");

                                cell.textContent = myObj[key][i][line_key];
                                row.appendChild(cell);
                            }

                            let _cell = document.createElement("td");
                            _cell.textContent = _price * _amount;
                            row.appendChild(_cell);
                            table.appendChild(row);
                        }
                    }
                }

            } else {
                console.log("Error loading page\n");
            }
        }

    });
    request.open("GET", "http://127.0.0.1:8081/invoice/" +
        id);

    request.send();
}
</script>


<body onload="fetchID()">

<div class="date-div" id="iddate"></div>
<div id="idcode"></div>

<table id="demo">
    <thead>
        <tr>

            <th>Amount</th>
            <th>Barcode</th>
            <th>Name</th>
            <th>Description</th>
            <th>Price</th>
            <th id="sum">Total</th>
        </tr>
    </thead>
    <tfoot>
        <tr>
            <td colspan="5">Total</td>
            <td></td>
        </tr>
    </tfoot>
    <tbody id="matchData"></tbody>
</table>

</body>

</html>


文件
函数fetchID（）{
让Id=window.location.search.split（'='）[1]；
载荷表（Id）；
}
函数加载表（id）{
let request=new XMLHttpRequest（）；
请求。addEventListener（“加载”，函数（e）{
if（request.readyState==4）{
如果（request.status==200）{
console.log（request.responseText）；//事实数据
//pasarla a objeto（JSON）
var data=JSON.parse（request.responseText）；
var myObj={
代码：data.code，
日期：data.date，
行：[]
};
对于（设i=0；i

您可以使用

querySelector（）

和

nth-child（）

选择器遍历所有行，并从当前行中查找金额和价格列

请注意，属性id在文档中必须是唯一的，您可以改用类

演示：


桌子
运输署，
th{
边框：1px纯黑；
边界塌陷：塌陷；
}
发票联
发票：


领事
代码
日期
数量
条形码
名称
描述
价格
全部的
代码
日期
2.
条形码
名称
描述
5.
全部的
代码
日期
2.
条形码
名称
描述
3.5
全部的
//计算总数的代码
var tableRow=document.querySelectorAll（“#matchData tr”）；
tableRow.forEach（函数（tr）{
var amount=tr.querySelector（'td:n个子项（3））.textContent；
var price=tr.querySelector（'td:nth child（7））.textContent；
tr.querySelector（'.sum'）.textContent=金额*价格；
});
let button=document.getElementById（“表单按钮”）；
按钮。addEventListener（“单击”，功能
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>

<link rel="stylesheet" href="table.css">
</head>



<script>
function fetchID() {
    let Id = window.location.search.split('=')[1];
    loadTable(Id);
}
function loadTable(id) {

    let request = new XMLHttpRequest();
    request.addEventListener("load", function (e) {

        if (request.readyState == 4) {
            if (request.status == 200) {
                console.log(request.responseText); // datos de la factura
                // pasarla a objeto (JSON)

                var data = JSON.parse(request.responseText);

                var myObj = {
                    code: data.code,
                    date: data.date,
                    lines: []

                };

                for (let i = 0; i < data.lines.length; ++i) {
                    let tmp = data.lines[i];
                    var line = {
                        amount: tmp.amount,
                        barcode: tmp.barcode,
                        name: tmp.name,
                        description: tmp.description,
                        price: tmp.price
                    };
                    myObj.lines[i] = line;
                }

                document.getElementById("iddate").innerHTML = data.date;
                document.getElementById("idcode").innerHTML = data.code;

                console.log(myObj);

                let table = document.getElementById('matchData'),
                    sumVal = 0;
                let line_count = myObj["lines"].length;
                let row = document.createElement("tr");

                for (let key in myObj) {

                    /*if (key == "code" || key == "date") {
                        let cell = document.createElement("td");

                        cell.rowSpan = line_count;
                        cell.textContent = myObj[key];
                        row.appendChild(cell);
                    }*/

                    if (key == "lines") {

                        let price = 0,
                            amount = 0;
                        for (let line_key in myObj[key][0]) {
                            if (line_key == 'price') price = myObj[key][0][line_key];
                            if (line_key == 'amount') amount = myObj[key][0][line_key];
                            let cell = document.createElement("td");

                            cell.textContent = myObj[key][0][line_key];
                            row.appendChild(cell);
                        }

                        let cell = document.createElement("td");
                        cell.textContent = price * amount;
                        row.appendChild(cell);

                        table.appendChild(row);

                        for (let i = 1; i < line_count; i++) {
                            let row = document.createElement("tr");
                            let _price = 0,
                                _amount = 0;
                            for (let line_key in myObj[key][i]) {
                                if (line_key == 'price') _price = myObj[key][i][line_key];
                                if (line_key == 'amount') _amount = myObj[key][i][line_key];
                                let cell = document.createElement("td");

                                cell.textContent = myObj[key][i][line_key];
                                row.appendChild(cell);
                            }

                            let _cell = document.createElement("td");
                            _cell.textContent = _price * _amount;
                            row.appendChild(_cell);
                            table.appendChild(row);
                        }
                    }
                }

            } else {
                console.log("Error loading page\n");
            }
        }

    });
    request.open("GET", "http://127.0.0.1:8081/invoice/" +
        id);

    request.send();
}
</script>


<body onload="fetchID()">

<div class="date-div" id="iddate"></div>
<div id="idcode"></div>

<table id="demo">
    <thead>
        <tr>

            <th>Amount</th>
            <th>Barcode</th>
            <th>Name</th>
            <th>Description</th>
            <th>Price</th>
            <th id="sum">Total</th>
        </tr>
    </thead>
    <tfoot>
        <tr>
            <td colspan="5">Total</td>
            <td></td>
        </tr>
    </tfoot>
    <tbody id="matchData"></tbody>
</table>

</body>

</html>

let price = 0, amount = 0;
for (let line_key in myObj[key][0]) {

    // Check if you are currently adding the price or amount cell and store them
    if (line_key == 'price') price = myObj[key][0][line_key];
    if (line_key == 'amount') amount = myObj[key][0][line_key];

    let cell = document.createElement("td");
    cell.textContent = myObj[key][0][line_key];
    row.appendChild(cell);
}
 
// Creating an extra column to hold the Total
let cell = document.createElement("td");
cell.textContent = price * amount;

// Add this new Total cell to the row
row.appendChild(cell);

// Then finally add the row to the table
table.appendChild(row);

for (let i = 1; i < line_count; i++) {
    let row = document.createElement("tr");
    let _price = 0, _amount = 0;
    for (let line_key in myObj[key][i]) {
        if (line_key == 'price') _price = myObj[key][i][line_key];
        if (line_key == 'amount') _amount = myObj[key][i][line_key];
        let cell = document.createElement("td");

        cell.textContent = myObj[key][i][line_key];
        row.appendChild(cell);
     }

     let _cell = document.createElement("td");
     _cell.textContent = _price * _amount;
     row.appendChild(_cell);
     table.appendChild(row);
 }