如何让动态表显示为弹出窗口？

Question

I have this piece of code which computes the difference between the rows of two selected tables and display the result on click of button. How can I display the result in a pop up? Basically I want the resultant table to come as popup, so that when we close the popup the tables checkbox are again reset.

Edit: I tried using modals but it seems to be not working. Can anyone please help where I am going wrong

 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>$133.90</td> </tr> <tr> <td>$161.30</td> </tr> <tr> <td>$53.30</td> </tr> <tr> <td>$186.20</td> </tr> <tr> <td>HSA match:up to $350</td> </tr> <tr> <td>HSA match:up to $700</td> </tr> <tr> <td>$3000</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>$33.90</td> </tr> <tr> <td>$161.30</td> </tr> <tr> <td>$53.30</td> </tr> <tr> <td>$186.20</td> </tr> <tr> <td>HSA match:up to $350</td> </tr> <tr> <td>HSA match:up to $700</td> </tr> <tr> <td>$3000</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>$33.90</td> </tr> <tr> <td>$161.30</td> </tr> <tr> <td>$53.30</td> </tr> <tr> <td>$186.20</td> </tr> <tr> <td>HSA match:up to $350</td> </tr> <tr> <td>HSA match:up to $700</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

You can use modals to display your differences between your tables as a popup when they selected. Assign modals' close button as a reset button as well via JS.

modals: https://getbootstrap.com/docs/4.0/components/modal/

Edit:

I couldn't find the line for calling your js file in your code. Can you add this line to the end of your html-body section?
You can add a console.log() line to your js file, so you can see if your js and html files are connected or not on the browser. (via insperctor-console)
Also, I couldn't find the line that you're activating your modal. You should change its class list. fade means it will not display on the browser. You should remove it and add show instead.

Edit-2:

I am not familiar with $ so I am adding the JS which is working. Please try the below things and if there will be a problem, edit your code below and leave me a comment.

in your js file, follow the steps I wrote. You should see an alarm when you click your modal button. You need to fill it up:

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'
})

in your html (add an id to your modal button, it will be easier to select):

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