javascript - 使用按钮创建新元素并包含内容 'Table' |查询器

标签 javascript jquery html css

在这里，我将使用按钮创建一个“第三个选项卡”，单击“创建”按钮后，“第三个选项卡”将出现在 .tab 类中，单击“第三个选项卡”时，将出现一个数据表

所以，结论。 如何创建一个 div 类并包含一个带按钮的数据表？。

开始吧:JSFiddle

代码段:(JQUERY、HTML、JAVASCRIPT、CSS)

错误消息: “未捕获的类型错误:无法读取 null 的属性‘style’” |第 40 行。

$(document).ready(function() {
  $('.tabel_audience').DataTable({}); // datatable
});

$(document).ready(function() {
  $('.submitButton').click(function () {
    var tab = '<button class="tablinks" onclick="openTab(event, \'thirdTab\')" id="default">Third Tab</button>';  
    var content = '<div id="mainTab" class="tabcontent">' +
  '<table class="tabel_audience" class="table table-bordered" cellspacing="0">' +
    '<thead>' +
      '<tr>' +
        '<th style="border-color:rgb(221, 221, 221);">' +
          '<input name="select_all" value="1" id="selectAll" type="checkbox" />' +
        '</th>' +
        '<th>Name</th>' +
        '<th>Type</th>' +
        '<th>Size</th>' +
      '</tr>' +
    '</thead>' +
  '</table>' +
'</div>';
  $('.tab').append(tab);
  $('.bodycontent').append(content);
  });
});
    .submitButton {
      
      font-variant: petite-caps;
      border: 0px;
      color: #fff;
      text-shadow: 0 1px rgba(0,0,0,0.1); 
      background-color: #4d90fe;
      padding: 17px 0px;
      font-family: Quicksand;
      font-size: 14px;
      width: 290px;
      

    }

    .submitButton:hover {

      border: 0px;
      text-shadow: 0 1px rgba(0,0,0,0.3);
      background-color: #357ae8;

    }
    body {
      font-family: "Lato", sans-serif;
    }
    /* Style the tab */
    div.tab {
      overflow: hidden;
      border: 1px solid #ccc;
      background-color: #f1f1f1;
    }

    /* Style the buttons inside the tab */

    div.tab button {
      background-color: inherit;
      float: left;
      border: none;
      outline: none;
      cursor: pointer;
      padding: 14px 16px;
      transition: 0.3s;
      font-size: 17px;
    }

    /* Change background color of buttons on hover */

    div.tab button:hover {
      background-color: #ddd;
    }

    /* Create an active/current tablink class */

    div.tab button.active {
      background-color: #ccc;
    }

    /* Style the tab content */

    .tabcontent {
      display: none;
      padding: 6px 12px;
      border: 1px solid #ccc;
      border-top: none;
    }
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <link href="https://cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css" rel="stylesheet"/>
    <script src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>


    <!-- TABS NAVIGATION -->
    <div class="tab">
    <!-- THIS IS CREATE BUTTON-->
    <input type="button" class="submitButton" id="submitButton" value="Create" style="width:142px;margin-left: 150px;">

    <!-- THIS IS TAB BUTTON-->
      <button class="tablinks" onclick="openTab(event, 'mainTab')" id="default">Main Tab</button>
      <button class="tablinks" onclick="openTab(event, 'secondTab')">Second Tab</button>
      
    </div>
    <!-- END of TABS BUTTON -->

    <!-- TABS CONTENT -->
    <div class="bodycontent">
    <div id="mainTab" class="tabcontent">
      <table class="tabel_audience" class="table table-bordered" cellspacing="0">
        <thead>
          <tr>
            <th style="border-color:rgb(221, 221, 221);">
              <input name="select_all" value="1" id="selectAll" type="checkbox" />
            </th>
            <th>Name</th>
            <th>Type</th>
            <th>Size</th>
          </tr>
        </thead>
      </table>
    </div>

    <div id="secondTab" class="tabcontent">
      <table class="tabel_audience" class="table table-bordered" cellspacing="0">
        <thead>
          <tr>
            <th style="border-color:rgb(221, 221, 221);">
              <input name="select_all" value="1" id="selectAll" type="checkbox" />
            </th>
            <th>Name</th>
            <th>Type</th>

          </tr>
        </thead>
      </table>
    </div>

    </div> 
    <!-- END of TABS CONTENT -->
    <script>
      function openTab(event, TabName) {
        var i, tabcontent, tablinks;
        tabcontent = document.getElementsByClassName("tabcontent");
        for (i = 0; i < tabcontent.length; i++) {
          tabcontent[i].style.display = "none";
        }
        tablinks = document.getElementsByClassName("tablinks");
        for (i = 0; i < tablinks.length; i++) {
          tablinks[i].className = tablinks[i].className.replace(" active", "");
        }
        document.getElementById(TabName).style.display = "block";
        event.currentTarget.className += " active";
      }
      document.getElementById("default").click();

    </script>

原码:W3Shcools

图像我的元素 Here

最佳答案

您需要将新选项卡的名称更正为 thirdTab而不是 mainTab因为它当前在语句 <div id="mainTab" class="tabcontent"> 中设置.将其更改为 <div id="thirdTab" class="tabcontent">使其发挥作用。

我没有查看为什么没有显示整个表格的代码。如果您无法做到这一点，请告诉我。

$(document).ready(function() {
  $('.tabel_audience').DataTable({}); // datatable
});

$(document).ready(function() {
  $('.submitButton').click(function () {
    var tab = '<button class="tablinks" onclick="openTab(event, \'thirdTab\')" id="thirdTabButton">Third Tab</button>';  
    var content = '<div id="thirdTab" class="tabcontent">' +
  '<table class="tabel_audience" class="table table-bordered" cellspacing="0">' +
    '<thead>' +
      '<tr>' +
        '<th style="border-color:rgb(221, 221, 221);">' +
          '<input name="select_all" value="1" id="selectAll" type="checkbox" />' +
        '</th>' +
        '<th>Name</th>' +
        '<th>Type</th>' +
        '<th>Size</th>' +
      '</tr>' +
    '</thead>' +
  '</table>' +
'</div>';
  $('.tab').append(tab);
  $('.bodycontent').append(content);
  });
});
    .submitButton {
      
      font-variant: petite-caps;
      border: 0px;
      color: #fff;
      text-shadow: 0 1px rgba(0,0,0,0.1); 
      background-color: #4d90fe;
      padding: 17px 0px;
      font-family: Quicksand;
      font-size: 14px;
      width: 290px;
      

    }

    .submitButton:hover {

      border: 0px;
      text-shadow: 0 1px rgba(0,0,0,0.3);
      background-color: #357ae8;

    }
    body {
      font-family: "Lato", sans-serif;
    }
    /* Style the tab */
    div.tab {
      overflow: hidden;
      border: 1px solid #ccc;
      background-color: #f1f1f1;
    }

    /* Style the buttons inside the tab */

    div.tab button {
      background-color: inherit;
      float: left;
      border: none;
      outline: none;
      cursor: pointer;
      padding: 14px 16px;
      transition: 0.3s;
      font-size: 17px;
    }

    /* Change background color of buttons on hover */

    div.tab button:hover {
      background-color: #ddd;
    }

    /* Create an active/current tablink class */

    div.tab button.active {
      background-color: #ccc;
    }

    /* Style the tab content */

    .tabcontent {
      display: none;
      padding: 6px 12px;
      border: 1px solid #ccc;
      border-top: none;
    }
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <link href="https://cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css" rel="stylesheet"/>
    <script src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>


    <!-- TABS NAVIGATION -->
    <div class="tab">
    <!-- THIS IS CREATE BUTTON-->
    <input type="button" class="submitButton" id="submitButton" value="Create" style="width:142px;margin-left: 150px;">

    <!-- THIS IS TAB BUTTON-->
      <button class="tablinks" onclick="openTab(event, 'mainTab')" id="default">Main Tab</button>
      <button class="tablinks" onclick="openTab(event, 'secondTab')">Second Tab</button>
      
    </div>
    <!-- END of TABS BUTTON -->

    <!-- TABS CONTENT -->
    <div class="bodycontent">
    <div id="mainTab" class="tabcontent">
      <table class="tabel_audience" class="table table-bordered" cellspacing="0">
        <thead>
          <tr>
            <th style="border-color:rgb(221, 221, 221);">
              <input name="select_all" value="1" id="selectAll" type="checkbox" />
            </th>
            <th>Name</th>
            <th>Type</th>
            <th>Size</th>
          </tr>
        </thead>
      </table>
    </div>

    <div id="secondTab" class="tabcontent">
      <table class="tabel_audience" class="table table-bordered" cellspacing="0">
        <thead>
          <tr>
            <th style="border-color:rgb(221, 221, 221);">
              <input name="select_all" value="1" id="selectAll" type="checkbox" />
            </th>
            <th>Name</th>
            <th>Type</th>

          </tr>
        </thead>
      </table>
    </div>

    </div> 
    <!-- END of TABS CONTENT -->
    <script>
      function openTab(event, TabName) {
        var i, tabcontent, tablinks;
        tabcontent = document.getElementsByClassName("tabcontent");
        for (i = 0; i < tabcontent.length; i++) {
          tabcontent[i].style.display = "none";
        }
        tablinks = document.getElementsByClassName("tablinks");
        for (i = 0; i < tablinks.length; i++) {
          tablinks[i].className = tablinks[i].className.replace(" active", "");
        }
        document.getElementById(TabName).style.display = "block";
        event.currentTarget.className += " active";
      }
      document.getElementById("default").click();

    </script>

关于javascript - 使用按钮创建新元素并包含内容 'Table' |查询器，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/47150630/

上一篇：javascript - 在 Jquery 中切换/添加/删除类未按预期工作

下一篇：php - 两个 DIV 元素在移动设备上未正确堆叠

相关文章：

javascript - 当 AngularJS 中的模型更新时， View 不会更新

javascript - 将 Google Analytics 跟踪代码放在 <head> 的较高位置会提高准确性吗？

javascript - CSS 切换效果

jQuery 相当于 ||或者 ？？运算符(operator)

javascript - 如何在第一个和最后一个列表项处停止切换功能？

javascript - HTML 表单数据到 Google 电子表格

javascript - 检查 CasperJS 中标签是否存在(而不是选择器)

javascript - ng-init 或 ng-bind 不适用于示例代码

javascript - 重置日期时间选择器中的日期

javascript - jQuery 调整背景图像的大小

©2024 IT工具网  联系我们