使用按钮创建新元素并拥有内容＆＃39;表＆＃39; | JQUERY

时间：2017-11-07 05:33:46

标签： javascript jquery html css

在这里，我将创建一个“第三个”标签＆＃39;使用按钮，当单击“创建”按钮时，“第三个选项卡”按下将出现在.tab类中，当＆＃39;第三个标签＆＃39;单击，其中有一个数据表。

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

我们走了：JSFiddle

代码段：（ JQUERY，HTML，JAVASCRIPT，CSS ）

错误消息： ＆＃34;未捕获的TypeError：无法读取属性＆＃39; style＆＃39; of null＆＃34; |第40行。

＆＃13;
＆＃13; 
$(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);
  });
});
＆＃13; 
    .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;
    }
＆＃13; 
    <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>
＆＃13;
＆＃13;
＆＃13;

原始代码：W3Shcools

图像我的项目Here

2 个答案:

答案 0 :(得分：2)

您需要将新标签的名称更改为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>

答案 1 :(得分：0)

在thirdTab中写maintab而不是div id，以便它可以正常工作

var content = '<div id="mainTab" class="tabcontent">Third tab' +
  '<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>';
相关问题
最新问题