javascript - 如何让它查找 id 并在另一个 HTML 中加载表格？

问题描述

我有这段代码用于查找发票的 id，当你给它查询时，它会加载一个包含结果的表格。

编码：

<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 = {
                    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") {

                        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();

    });

我怎样才能将表格传递给另一个 HTML，当我点击按钮时，它会将我带到另一个 HTML，它会在其中加载我请求的数据？

我不知道我是否已经很好地解释了自己，但基本上是我点击按钮并加载另一个 HTML，其中加载数据的表格与它在我的代码中加载的方式相同。

标签： javascripthtmlcss

您可以使用window.open函数打开新页面或 html，在 URL 参数中传递 id。

window.open('https://example.com/newpage.html?id=555','blank')

在newpage.html读取id并调用 API 并加载表。

<body onload="fetchID()">
   // place all your html here.
</body>

<script>
   function fetchID(){
        let Id = window.location.search.split('=')[1]; // id to make API call
        loadTable(Id);
   }
   function loadTable(id){
      // add your code here to make XHR request and load the table same as per the previous page.
   }
</script>

javascript - 如何让它查找 id 并在另一个 HTML 中加载表格？

问题描述

解决方案

推荐阅读