Question

我试图将一个表插入一个bootstrap模式，但这个简单的代码使得创建的表破坏了模态内部内容。

如果我删除de table标签，则一切都恢复正常。

“ABC”在打开时会在模态内部出现，但在打开模态参考之前，表格会出现在当前页面中。我查看了代码结果，看起来它跳过了模态div。

这种情况发生在自定义引导程序和普通表中，有或没有内容。只是放桌子会导致错误任何解决方案？

<div class="modal-body">
   <div class="row">
      <div class="col-sm-7">
         <label>ABC</label>
         <table></table>
      </div>
   </div>
</div>

Answer 1

好吧，我没有得出结论问题的来源，但我找到了解决这个问题的方法。

解决方案是首先构建表所在的模态，然后使用脚本插入表。

背后的代码是这样的：

步骤1：使用div构建模态和他的身体以在
中插入表格

<div class="modal-body">
   <div class="row">
      <div class="col-sm-7">
         <label>ABC</label>
         <div id="content_table"></div>
      </div>
   </div>
</div>

步骤2：创建一个脚本或函数来构建表，然后将它插入到你想要表的div中（这个js代码可以在任何地方完成，只需在模态代码后调用它）

<script>
   var content_user = document.getElementById("content_user");

   var htmlText = '' + 
   '<table class="table table-striped">' +
   '    <thead> '+
   '      <tr> '+
   '        <th>Table Header</th> '+
   '        <th>Table Header 2</th> '+
   '      </tr> '+
   '    </thead> '+
   '    <tbody> ';                                  

   htmlText += 
   '      <tr> '+
   '        <td>Content 1</td> '+
   '        <td>Content 2</td> '+
   '    </tr> ';

   htmlText += 
   '    </tbody> '+
   ' </table>';

   content_user.innerHTML = htmlText;
</script>

表跳过div

1 个答案: