模态框/弹出窗口不会出现

Question

这是我的代码，我在 select 两列中，然后我利用相应单元格的差异并创建新列，并将其显示在单个 table 中。我想将其显示为弹出窗口（模式框）。就像 select 两个输入复选框一样，结果 table 应该以弹出窗口的形式出现，关闭它后，我可以再次 select 任何复选框，并且 table 应该是形成并显示为弹出窗口但是当我这样做时，它不会像流行音乐一样出现，并且会附加相同的 table 。谁能帮忙解决这个问题？

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

您对 #main-table 和结果 table 使用相同的 table 变量。然而，结果 table 变量仅在 buildTable() 内部可用，当您在该函数外部使用 modalBody.append(table); 时，您将移动 #main-table。所以为了你自己，尽量避免回收变量名。

此外，您不必为刚刚通过 createElement()

创建的元素使用 getElementById

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>

模态框/弹出窗口不会出现

Modal Box/ Pop up is not coming

html

javascript

css

jquery

bootstrap-modal