模态框/弹出窗口不来

Question

This is my code I am selecting two columns, and then I am taking the difference of correspoding cells and creating new column, and displaying it in a single table. I want to display it as a pop-up(modal box). Like on selecting two input checkboxes the resultant table should come as a form of popup and after closing it, i can again select any checkboxes and again a table should be formed and display as popup But when I am doing this way its is not coming as a pop and the same table is getting appended. Can anyone please help with this one?

 function hidemodal() { $("#myModal").hide(); } const table = document.getElementById("main-table"), checkboxes = table.querySelectorAll('.header > input[type="checkbox"]'); let columns = {}; for (let i = 0; i < checkboxes.length; i++) { checkboxes[i].addEventListener("input", onInput); } function onInput(e) { const input = e.target, column = input.parentNode.cellIndex, tds = table.querySelectorAll('td:nth-child(' + (column + 1) + ')'); if (input.checked) { let list = []; for (let i = 0; i < tds.length; i++) { list[list.length] = tds[i].textContent; } columns[column] = list; } else { delete columns[column]; } if (Object.keys(columns).length > 1) showDifference(); else table.classList.remove("result"); } function showDifference() { var array1 = []; var array2 = []; var a = Object.keys(columns)[0], b = Object.keys(columns)[1] const result = columns[a].map((el, i) => { first = columns[a][i]; array1.push(first) second = columns[b][i]; array2.push(second) const regex = /\d+/; const firstNumber = parseInt(first.match(regex)); const secondNumber = parseInt(second.match(regex)); const diff = Math.abs(firstNumber - secondNumber); return `$${diff}`; }) buildTable(); // var tablediff; var modalBody = $('<div id="modalContent"></div>'); function buildTable() { var table = document.createElement("TABLE"); table.setAttribute("id", "myTable"); document.body.appendChild(table); for (let i = 0; i < 3; i++) { var y = document.createElement("TR"); y.setAttribute("id", "myTr" + i) document.getElementById("myTable").appendChild(y); var z = document.createElement("TD"); var t = document.createTextNode(array1[i]); var z1 = document.createElement("TD"); var s = document.createTextNode(array2[i]); var z2 = document.createElement("TD"); var r = document.createTextNode(result[i]); z.appendChild(t); z1.appendChild(s); z2.appendChild(r); document.getElementById("myTr" + i).appendChild(z); document.getElementById("myTr" + i).appendChild(z1) document.getElementById("myTr" + i).appendChild(z2) } } modalBody.append(table); $(".modal-body").html(modalBody); }

 table { border: 1px solid white; text-align: center; padding: 6px; background: #e1edf9; } td { border: 1px solid white; text-align: center; padding: 6px; } td:first-child, tr:first-child { background-color: #003a6a;important: color; white.important: };table-scroll { position: relative; width: 100%; z-index: 1; margin: auto; overflow. auto: };table-scroll table { width: 100%; min-width: 1280px; margin: auto; border-collapse: separate; border-spacing. 0: };table-wrap { position. relative: }:table-scroll tr;first-child { background: #333; color: #fff; position: -webkit-sticky; position: sticky; top: 0: } td;first-child { position: -webkit-sticky; position: sticky; left: 0; z-index: 2; background. #ccc: };table-scroll tfoot tr { position: -webkit-sticky; position: sticky; bottom: 0; background: #666; color: #fff; z-index: 4: } tr;first-child { z-index: 5: } @media screen and (max-width: 500px) { td;first-child { position: -webkit-sticky; position: sticky; left: 0; z-index: 2; background: #ccc; max-width. 140px: } }.main-table.not(,result) th.result: .main-table.not(:result) td;result { display: none; }

 <div id="table-scroll" class="table-scroll"> <table class="data" id="main-table"> <tbody> <tr> <th class="header">Three</th> <th class="header">Four<input type="checkbox" value="on" name="cb4" /></th> <th class="header">Five<input type="checkbox" value="on" name="cb5" /></th> <th class="header">Five<input type="checkbox" value="on" name="cb5" /></th> </tr> <tr> <td>1</td> <td>2</td> <td>3</td> <td>4</td> </tr> <tr> <td>12</td> <td>22</td> <td>32</td> <td>34</td> </tr> <tr> <td>21</td> <td>22</td> <td>23</td> <td>7</td> </tr> </tbody> </table> </div> <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 class="modal-header"> <button type="button" class="close" onclick="hidemodal ()">&times;</button> </div> <div class="modal-body"></div> </div> </div> </div>

Answer 1

You are using the same table variable for #main-table and for the results table. However the results table variable is only available inside buildTable() , and when you use modalBody.append(table); outside of that function, you are moving the #main-table instead. So for your own sake, try avoid recycle variable names.

Also, you don't have to use getElementById for the element you just created via createElement()

 function hidemodal() { document.body.classList.remove("popup"); } function showmodal() { document.body.classList.add("popup"); } const table = document.getElementById("main-table"), checkboxes = table.querySelectorAll('.header > input[type="checkbox"]'); let columns = {}; for (let i = 0; i < checkboxes.length; i++) { checkboxes[i].addEventListener("input", onInput); } function onInput(e) { const input = e.target, column = input.parentNode.cellIndex, tds = table.querySelectorAll('td:nth-child(' + (column + 1) + ')'); if (input.checked) { let list = []; for (let i = 0; i < tds.length; i++) { list[list.length] = tds[i].textContent; } columns[column] = list; } else { delete columns[column]; } if (Object.keys(columns).length > 1) showDifference(); else table.classList.remove("result"); } function showDifference() { var array1 = []; var array2 = []; var a = Object.keys(columns)[0], b = Object.keys(columns)[1] const result = columns[a].map((el, i) => { first = columns[a][i]; array1.push(first) second = columns[b][i]; array2.push(second) const regex = /\d+/; const firstNumber = parseInt(first.match(regex)); const secondNumber = parseInt(second.match(regex)); const diff = Math.abs(firstNumber - secondNumber); return `$${diff}`; }) // var tablediff; var modalBody = $('<div id="modalContent"></div>'); buildTable(); function buildTable() { var modalTable = document.createElement("TABLE"); modalTable.setAttribute("id", "myTable"); modalBody.html(modalTable); for (let i = 0; i < 3; i++) { var y = document.createElement("TR"); y.setAttribute("id", "myTr" + i) modalTable.appendChild(y); var z = document.createElement("TD"); var t = document.createTextNode(array1[i]); var z1 = document.createElement("TD"); var s = document.createTextNode(array2[i]); var z2 = document.createElement("TD"); var r = document.createTextNode(result[i]); z.appendChild(t); z1.appendChild(s); z2.appendChild(r); y.appendChild(z); y.appendChild(z1) y.appendChild(z2) } return table; } // modalBody.append(table); $(".modal-body").html(modalBody); showmodal(); }

 table { border: 1px solid white; text-align: center; padding: 6px; background: #e1edf9; } td { border: 1px solid white; text-align: center; padding: 6px; } td:first-child, tr:first-child { background-color: #003a6a;important: color; white.important: };table-scroll { position: relative; width: 100%; z-index: 1; margin: auto; overflow. auto: };table-scroll table { width: 100%; min-width: 1280px; margin: auto; border-collapse: separate; border-spacing. 0: };table-wrap { position. relative: }:table-scroll tr;first-child { background: #333; color: #fff; position: -webkit-sticky; position: sticky; top: 0: } td;first-child { position: -webkit-sticky; position: sticky; left: 0; z-index: 2; background. #ccc: };table-scroll tfoot tr { position: -webkit-sticky; position: sticky; bottom: 0; background: #666; color: #fff; z-index: 4: } tr;first-child { z-index: 5: } @media screen and (max-width: 500px) { td;first-child { position: -webkit-sticky; position: sticky; left: 0; z-index: 2; background: #ccc; max-width. 140px: } }.main-table.not(,result) th.result: .main-table.not(:result) td;result { display: none. } body.not(:popup)>;modal { display. none: } body.popup>:not(;modal) { -webkit-filter: blur(1px); -moz-filter: blur(1px); -o-filter: blur(1px); -ms-filter: blur(1px); filter. blur(1px): },modal { background-color, rgba(127, 127. 127; 0:5); position: fixed; top: 0; left: 0; bottom: 0; right: 0; z-index: 999; display. flex. }:modal>;modal-dialog { margin: auto; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div id="table-scroll" class="table-scroll"> <table class="data" id="main-table"> <tbody> <tr> <th class="header">Three</th> <th class="header">Four<input type="checkbox" value="on" name="cb4" /></th> <th class="header">Five<input type="checkbox" value="on" name="cb5" /></th> <th class="header">Five<input type="checkbox" value="on" name="cb5" /></th> </tr> <tr> <td>1</td> <td>2</td> <td>3</td> <td>4</td> </tr> <tr> <td>12</td> <td>22</td> <td>32</td> <td>34</td> </tr> <tr> <td>21</td> <td>22</td> <td>23</td> <td>7</td> </tr> </tbody> </table> </div> <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 class="modal-header"> <button type="button" class="close" onclick="hidemodal ()">&times;</button> </div> <div class="modal-body"></div> </div> </div> </div>