如何讓它查找 id 並將表加載到另一個 HTML 中？

Question

我有這段代碼用於查找發票的 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 ，其中加載數據的表與它在我的代碼中加載的方式相同。

Answer 1

您可以使用window.open function 打開一個新頁面或 html，傳遞 ZE6B3031A8D2C7A53EZ 中的 id 參數 ZE6B3021A8D2C4585502A8D2C4D455

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>

如何讓它查找 id 並將表加載到另一個 HTML 中？

問題描述

1 個解決方案

解決方案1
1 已采納 2021-05-12 08:20:51

如何讓它查找 id 並將表加載到另一個 HTML 中？

問題描述

1 個解決方案

解決方案1 1 已采納 2021-05-12 08:20:51

解決方案1
1 已采納 2021-05-12 08:20:51