Untitled

<!DOCTYPE html>
<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>
<body>
    <table id="data-table">
        <!-- Data from page 002 will be inserted here -->
    </table>
    <button id="fetch-data-button">Fetch Data</button>

    <script>
        $(document).ready(function() {
            // Define the Page IDs
            var sourcePageId = "002";  // ID of the source Confluence page
            var targetPageId = "001";  // ID of the target Confluence page

            // Function to fetch data from the source page and update the target table
            function fetchDataAndUpdateTable() {
                // Make a GET request to Confluence's REST API to fetch the content of the source page
                $.ajax({
                    url: "/rest/api/content/" + sourcePageId,
                    type: "GET",
                    dataType: "json",
                    success: function(data) {
                        var content = data.body.view.value;

                        // Extract the table with ID "table001" from the source page
                        var regex = /<table id="table001".*?>([\s\S]*?)<\/table>/;
                        var match = regex.exec(content);

                        if (match) {
                            var tableHtml = match[0];
                            $('#data-table').html(tableHtml);
                        }
                    },
                    error: function() {
                        console.log("Error fetching data from Confluence");
                    }
                });
            }

            // Attach a click event to the button
            $('#fetch-data-button').click(function() {
                fetchDataAndUpdateTable();
            });
        });
    </script>
</body>
</html>
Editor is loading...