如何将动态 table 显示为弹出窗口？

Question

我有这段代码计算两个选定 table 的行之间的差异，并在单击按钮时显示结果。如何在弹出窗口中显示结果？基本上我希望结果 table 作为弹出窗口出现，这样当我们关闭弹出窗口时 tables 复选框再次重置。

编辑：我尝试使用模式，但它似乎不起作用。任何人都可以帮助我出错的地方

var selectedRows = document.getElementsByClassName('selected');
        limit = 0; //set limit

        checkboxes = document.querySelectorAll('.checkboxdiv input[type="checkbox"]');
        function checker(elem) {
            if (elem.checked) {
                limit++;
            } else {
                limit--;
            }

            for (i = 0; i < checkboxes.length; i++) {

                if (limit == 2) {
                    if (!checkboxes[i].checked) {
                        checkboxes[i].disabled = true;

                    }

                } else {

                    if (!checkboxes[i].checked) {
                        checkboxes[i].disabled = false;
                    }

                }
            }

        }

        for (i = 0; i < checkboxes.length; i++) {
            checkboxes[i].onclick = function () {
                checker(this);
            }
        }

        var checkedArray;
        function myFunction(event) {
            event.target.parentElement.parentElement.className =
                event.target.checked ? 'selected' : '';

            var elements = document.getElementsByTagName("INPUT");
            checkedArray = new Array();
            for (var i = 0; i < elements.length; i++) {
                if (elements[i].type === 'checkbox' && elements[i].checked) {
                    checkedArray.push(elements[i].id);
                }
            }
            console.log(checkedArray);
        }

        $(".btn[data-target='#myModal']").click(function() {
 var modalBody = $('<div id="modalContent"></div>');
var table;
            const buildTable = (arr) => {
                table = document.querySelector("#diff-table");
                if (table) table.remove();

                table = document.createElement("table");
                table.id = "diff-table";
                const thead = document.createElement("thead"),
                    thA = document.createElement("th"),
                    thB = document.createElement("th"),
                    thDiff = document.createElement("th");
                thA.innerText = "Plan A";
                thB.innerText = "Plan B";
                thDiff.innerText = "Difference";
                thead.append(thA, thB, thDiff);
                table.append(thead);

                arr.forEach((i) => {
                    const tr = document.createElement("tr"),
                        tdA = document.createElement("td"),
                        tdB = document.createElement("td"),
                        tdDiff = document.createElement("td");
                    tdA.innerText = "$" + i["planA"];
                    tdB.innerText = "$" + i["planB"];
                    tdDiff.innerText = "$" + i["diff"];
                    tr.append(tdA, tdB, tdDiff);
                    table.append(tr);
                });

                document.body.append(table);
            };
            const checked = document.querySelectorAll(":checked"),
                arr = [];
            if (checked.length !== 2) return;
            const plans = document.querySelectorAll(":checked"),     
            planA = plans[0].closest("table").querySelectorAll("td"),    
             planB = plans[1].closest("table").querySelectorAll("td");

            planA.forEach((cell, i) => {
                const valA = +cell.innerText.replace(/[^\d.-]/g, '');
                const valB = +planB[i].innerText.replace(/[^\d.-]/g, '');
                arr.push({ planA: valA, planB: valB, diff: valA - valB });
            });

            buildTable(arr);
            modalBody.append(table);
  $('.modal-body').html(modalBody); 

        })

.table_container {
            float: left;
            width: 25%;
        }

        .container::after {
            content: "";
            clear: both;
            display: table;
        }

        table {
            margin: 0 auto;

            border-radius: 10px;
        }

        tr {
            padding: 15px;
            text-align: center;
        }

        td {
            color: black;
            text-align: center;
            vertical-align: middle;
            border: 1px double white;
            height: 50px;
            background-color: light-grey;
            width: 272px;
        }

        .sub_text {
            font-size: 12px;
            font-style: italic;
            color: #0071ce;
            font-weight: 100;
        }

        th {
            background-color: #0071ce;
            text-align: center;
            padding: 10px;
            border-top-left-radius: 10px;
            border-top-right-radius: 10px;
            color: white;
            font-weight: bold;
        }

        .header {
            color: #0071ce;
            font-weight: bold;
            padding: 10px;
        }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<div class="container">
        <div class="table_container">
        </div>

        <div class="table_container">
            <table id="table1" class="checkboxdiv">
                <tr>
                    <th>Tab A<input type="checkbox" id=" 1" name="table1" value="table1"
                            onchange="myFunction(event)"> </th>

                </tr>
                <tr>
                    <td>3.90</td>
                </tr>
                <tr>
                    <td>1.30</td>
                </tr>
                <tr>
                    <td>.30</td>
                </tr>
                <tr>
                    <td>6.20</td>
                </tr>
                <tr>
                    <td>HSA match:up to 0</td>
                </tr>
                <tr>
                    <td>HSA match:up to 0</td>
                </tr>
                <tr>
                    <td>00</td>
                </tr>
            </table>
        </div>

        <div class="table_container">
            <table id="table2" class="checkboxdiv">
                <tr>
                    <th>Tab B <input type="checkbox" id="2" name="table2" value="table2"
                            onchange="myFunction(event)"></th>
                </tr>
                <tr>
                    <td>.90</td>
                </tr>
                <tr>
                    <td>1.30</td>
                </tr>
                <tr>
                    <td>.30</td>
                </tr>
                <tr>
                    <td>6.20</td>
                </tr>
                <tr>
                    <td>HSA match:up to 0</td>
                </tr>
                <tr>
                    <td>HSA match:up to 0</td>
                </tr>
                <tr>
                    <td>00</td>
                </tr>
            </table>
        </div>

        <div class="table_container">
            <table id="table3" class="checkboxdiv">
                <tr>
                    <th>Tab C<input type="checkbox" id="3" name="table3" value="table3"
                            onchange="myFunction(event)"> </th>
                </tr>
                <tr>
                    <td>.90</td>
                </tr>
                <tr>
                    <td>1.30</td>
                </tr>
                <tr>
                    <td>.30</td>
                </tr>
                <tr>
                    <td>6.20</td>
                </tr>
                <tr>
                    <td>HSA match:up to 0</td>
                </tr>
                <tr>
                    <td>HSA match:up to 0</td>
                </tr>
            </table>
        </div>
    </div>
 <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">
        Launch demo modal
      </button>
      <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content"></div>
    </div>
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-body"></div>
        </div>
    </div>
</div>

Answer 1

您可以使用模式在 selected 时将表格之间的差异显示为弹出窗口。也可以通过 JS 将模态框的关闭按钮指定为重置按钮。

模态：https://getbootstrap.com/docs/4.0/components/modal/

编辑：

我在你的代码中找不到调用你的js文件的行。您可以将此行添加到 html-body 部分的末尾吗？
你可以在你的js文件中添加一行console.log()，这样你就可以在浏览器上查看你的js和html文件是否连接。（通过督察控制台）
另外，我找不到您正在激活模态的那一行。您应该更改其 class 列表。 fade表示不会在浏览器上显示。您应该将其删除并改为添加 show。

编辑 2：

我不熟悉 $ 所以我添加了正在运行的 JS。请尝试以下操作，如果出现问题，请在下方编辑您的代码并给我留言。

在你的js文件中，按照我写的步骤操作。单击模态按钮时，您应该会看到一个警报。您需要填写：

document.getElementById('modalButton').addEventListener('click', function() {
alert('hi');

  // step - 1: clean the inner of previous modal, if it has
  // step - 2: add the result of comparing two table elements
  // step - 3: remove 'fade' from modal's class and add 'show'
})

在你的html中（给你的模态按钮添加一个id，select会更容易）：

<button type="button" id="modalButton" class="btn btn-primary" data-toggle="modal" data-target="#myModal">Launch demo modal</button>

如何将动态 table 显示为弹出窗口？

How do i get the dynamic table displayed as a popup?

html

javascript

jquery

popup

bootstrap-modal