1. 首页
  2. 问题列表
  3. 表显示后如何停止添加
提问者：小点点

表显示后如何停止添加


我有一个按钮和一个HTML静态表。现在，我的工作是使用引导模式特性在弹出窗口上显示html表（假设这个情况类似于预览功能，用户点击预览按钮，他将看到他在表中输入的内容。）我目前正在工作的一个虚拟的桌子，我几乎完成了显示的桌子。

但是，问题来了。当点击关闭按钮后，弹出的窗口被关闭，如果我再次点击预览按钮，我会在弹出的窗口中看到两个表。请找到下面的代码片段（HTML表和JS脚本）。

帮助我如何避免关闭弹出窗口后再次添加表。

null

function addTable() {
  var tableDiv = document.getElementById("myTableBody");
  var table = document.createElement('TABLE');
  var oldtble = document.getElementById('table1');
  table.border = '1';
  var tableBody = document.createElement('TBODY');
  table.appendChild(tableBody);
  for (var i = 0; i < 4; i++) {
    var tr = document.createElement('TR');
    tr.style.border = 'solid 1px black';
    tableBody.appendChild(tr);
    for (var j = 0; j < 4; j++) {
      var td = document.createElement('TD');
      td.width = '75';
      td.style.border = 'solid 1px black';
      td.appendChild(document.createTextNode(oldtble.rows[i].cells[j].innerHTML));
      tr.appendChild(td);
    }
  }
  tableDiv.appendChild(table);
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">
</head>

<body>
  <table class="table table-hover" id="table1">
    <thead>
      <tr>
        <th scope="col">#</th>
        <th scope="col">First</th>
        <th scope="col">Last</th>
        <th scope="col">Handle</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <th scope="row">1</th>
        <td>Mark</td>
        <td>Otto</td>
        <td>@mdo</td>
      </tr>
      <tr>
        <th scope="row">2</th>
        <td>Jacob</td>
        <td>Thornton</td>
        <td>@fat</td>
      </tr>
      <tr>
        <th scope="row">3</th>
        <td>Larry the Bird</td>
        <td>You are mine</td>
        <td>@twitter</td>
      </tr>
    </tbody>
  </table>
  <!-- Button trigger modal -->
  <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal" id="button1" onclick="addTable();">
        Launch demo modal
      </button>

  <!-- Modal -->
  <div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
        </div>
        <div class="modal-body" id="myTableBody">
          <h5 class="lead" id="tableStruct">Make some coding to display that table</h5>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
          <button type="button" class="btn btn-primary">Save changes</button>
        </div>
      </div>
    </div>
  </div>
</body>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/js/bootstrap.bundle.min.js" integrity="sha384-b5kHyXgcpbZJO/tY9Ul7kGkf1S0CWuKcCD38l8YkeH8z8QjE0GmW1gYU5S9FOnJ0" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/jquery-3.6.0.js" integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk=" crossorigin="anonymous"></script>
<script src="table_script.js"></script>

</html>

null

结果：


共2个答案

匿名用户

发生这种情况是因为每次单击按钮时，它都会创建表的另一个新元素。

因此，您只需要检查模态体表，如果它已经有一个table的子元素或者它已经有两个子元素。

您可以通过以下方法选择模态体：var modalbody=document.queryselector('.modal-body')；

并检查其上的childElementCount:如果(ModalBody.ChildEmentCount<=1){your function}

您还可以在这里了解更多关于如何检查元素上的子元素：如何检查元素在JavaScript中是否有子元素？

null

function addTable() {
  var modalbody = document.querySelector('.modal-body');
  if (modalbody.childElementCount <= 1) {
    var tableDiv = document.getElementById("myTableBody");
    var table = document.createElement('TABLE');
    var oldtble = document.getElementById('table1');
    table.border = '1';
    var tableBody = document.createElement('TBODY');
    table.appendChild(tableBody);
    for (var i = 0; i < 4; i++) {
      var tr = document.createElement('TR');
      tr.style.border = 'solid 1px black';
      tableBody.appendChild(tr);
      for (var j = 0; j < 4; j++) {
        var td = document.createElement('TD');
        td.width = '75';
        td.style.border = 'solid 1px black';
        td.appendChild(document.createTextNode(oldtble.rows[i].cells[j].innerHTML));
        tr.appendChild(td);
      }
    }
    tableDiv.appendChild(table);
  }

}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">
</head>

<body>
  <table class="table table-hover" id="table1">
    <thead>
      <tr>
        <th scope="col">#</th>
        <th scope="col">First</th>
        <th scope="col">Last</th>
        <th scope="col">Handle</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <th scope="row">1</th>
        <td>Mark</td>
        <td>Otto</td>
        <td>@mdo</td>
      </tr>
      <tr>
        <th scope="row">2</th>
        <td>Jacob</td>
        <td>Thornton</td>
        <td>@fat</td>
      </tr>
      <tr>
        <th scope="row">3</th>
        <td>Larry the Bird</td>
        <td>You are mine</td>
        <td>@twitter</td>
      </tr>
    </tbody>
  </table>
  <!-- Button trigger modal -->
  <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal" id="button1" onclick="addTable();">
        Launch demo modal
      </button>

  <!-- Modal -->
  <div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
        </div>
        <div class="modal-body" id="myTableBody">
          <h5 class="lead" id="tableStruct">Make some coding to display that table</h5>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
          <button type="button" class="btn btn-primary">Save changes</button>
        </div>
      </div>
    </div>
  </div>
</body>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/js/bootstrap.bundle.min.js" integrity="sha384-b5kHyXgcpbZJO/tY9Ul7kGkf1S0CWuKcCD38l8YkeH8z8QjE0GmW1gYU5S9FOnJ0" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/jquery-3.6.0.js" integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk=" crossorigin="anonymous"></script>
<script src="table_script.js"></script>

</html>

匿名用户

null

function addTable() {
    var tableDiv = document.getElementById("myTableBody");
    var table = document.createElement('TABLE');
    var oldtble = document.getElementById('table1');
    table.border='1';
    var tableBody = document.createElement('TBODY');
    table.appendChild(tableBody);
    for (var i=0; i<4; i++) {
        var tr = document.createElement('TR');
        tr.style.border = 'solid 1px black';
        tableBody.appendChild(tr);
        for (var j=0; j<4; j++) {
            var td = document.createElement('TD');
            td.width= '75';
            td.style.border = 'solid 1px black';
            td.appendChild(document.createTextNode(oldtble.rows[i].cells[j].innerHTML));
            tr.appendChild(td);
        }
    }
     if(table == ""){
       $(".lead").css("display", "block");
     }
     else{
       tableDiv.innerHTML = '';
       tableDiv.appendChild(table);
     }
   
}
/* CSS styles */
.lead{
  display : none;
}  
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">
</head>
<body>
    <table class="table table-hover" id="table1">
        <thead>
          <tr>
            <th scope="col">#</th>
            <th scope="col">First</th>
            <th scope="col">Last</th>
            <th scope="col">Handle</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <th scope="row">1</th>
            <td>Mark</td>
            <td>Otto</td>
            <td>@mdo</td>
          </tr>
          <tr>
            <th scope="row">2</th>
            <td>Jacob</td>
            <td>Thornton</td>
            <td>@fat</td>
          </tr>
          <tr>
            <th scope="row">3</th>
            <td >Larry the Bird</td>
            <td>You are mine</td>
            <td>@twitter</td>
          </tr>
        </tbody>
      </table>
      <!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal" id="button1" onclick="addTable();">
    Launch demo modal
  </button>
  
  <!-- Modal -->
  <div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
        </div>
        <div class="modal-body">
          <div id="myTableBody"></div>
            <h5 class="lead" id="tableStruct">Make some coding to display that table</h5>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
          <button type="button" class="btn btn-primary">Save changes</button>
        </div>
      </div>
    </div>
  </div>
</body>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/js/bootstrap.bundle.min.js" integrity="sha384-b5kHyXgcpbZJO/tY9Ul7kGkf1S0CWuKcCD38l8YkeH8z8QjE0GmW1gYU5S9FOnJ0" crossorigin="anonymous"></script>
<script
  src="https://code.jquery.com/jquery-3.6.0.js"
  integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk="
  crossorigin="anonymous"></script>
<script src="table_script.js"></script>
</html>

相关问题



热门标签
Java JavaScript Python PHP C# Android Html jQuery C++ Css IOS MySQL NodeJS