Saya memiliki kode ini yang digunakan untuk menemukan id faktur dan ketika Anda memberikannya untuk berkonsultasi, itu memuat tabel dengan hasilnya.

Kode:

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

    });

Bagaimana saya bisa melakukannya untuk meneruskan tabel ke HTML lain dan ketika saya menekan tombol itu membawa saya ke HTML lain di mana ia memuat data yang saya minta?

Saya tidak tahu apakah saya telah menjelaskan diri saya dengan baik, tetapi pada dasarnya saya menekan tombol dan memuat HTML lain di mana tabel dengan data yang dimuat sama dengan yang dimuat dalam kode saya.

0
Alejandro Felipe Gonzalez 12 Mei 2021, 10:02

1 menjawab

Jawaban Terbaik

Anda dapat menggunakan fungsi window.open untuk membuka halaman atau html baru, meneruskan id di param URL.

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

Di newpage.html baca id dan panggil API dan muat tabelnya.

<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>
1
Abhinav Kumar 12 Mei 2021, 08:20