亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全，請及時綁定郵箱和手機立即綁定
已解決430363個問題，去搜搜看，總會有你想問的

為什么內容被附加到錯誤的動態生成的選項卡？

為什么內容被附加到錯誤的動態生成的選項卡？

小怪獸愛吃肉 2023-08-18 10:16:51
我正在嘗試動態創建 jQuery 選項卡。它應該可以工作，以便每次我單擊“生成”乘法表按鈕時，都應創建一個新選項卡，并在此選項卡中顯示包含當前數據參數的表。目前，第一個選項卡存儲所有表，后續選項卡不存儲任何內容：如何使第一個選項卡僅存儲第一個表，第二個選項卡存儲下一個表，依此類推？$( document ).ready(function() {  var tabs = [];  //Function to generate a multiplication table based on user's range input.function generateTable(minCol, maxCol, minRow, maxRow) {  let tabsList = document.getElementById("tabsList");  let tableTabs = document.getElementById("tableTabs");  let tabObject = {     name: tabs.length,     minCol: minCol,    maxCol: maxCol,    minRow: minRow,    maxRow: maxRow  };  tabs.push(tabObject);  let listItem = document.createElement("li");  let anchor = document.createElement("a");  anchor.href = `#tab-${tabs.length-1}`;  anchor.innerText = `tab-${tabs.length-1}`;  listItem.appendChild(anchor);  tabsList.appendChild(listItem);  listItem.classList.add("ui-tabs-tab");  let tableDiv = document.createElement("div");  tableDiv.id = `tab-${tabs.length-1}`;  tableTabs.appendChild(tableDiv);  var error = document.getElementById("message");  var table = document.createElement("table");  var result = "";  //creating a multTable  for(var i=minRow; i<=maxRow;i++)  {      if(i==minRow)      {        result += "<tr>";        result += "<th>&times;</th>";      }      for(var j=minCol; j<=maxCol; j++)      {          if(i==minRow || j==minCol)          {            if(i==minRow)              result += "<th>" + j + "</th>";            else              result += "<td>"+ (i-1)*j + "</td>";          }          else            result += "<td>"+ (i-1)*j + "</td>";      }        result += "</tr>";        result += "<tr>";        result += "<th>" + i + "</th>";        if(i==maxRow)        {          for(var j=minCol; j<=maxCol; j++)          {            result += "<td>"+ i*j + "</td>";          }        }    }  //printing the table  table.innerHTML=result;  tableDiv.appendChild(table);  $("#tableTabs").tabs( { "active" : tabs.length-1});  return false;}
查看完整描述

1 回答

?
UYOU

TA貢獻1878條經驗 獲得超4個贊

選項卡的重新初始化失敗。如果它們首先存在，你需要摧毀它們。


if ($('#tableTabs').tabs()) {

    $("#tableTabs").tabs('destroy');

}


$("#tableTabs").tabs({

  "active": tabs.length - 1

});

另請注意，您的表格標記不完整。它缺少結束表行標記：


<tr><th>&times;</th><th>-50</th></tr><tr><th>-50</th><td>2500</td>

$( document ).ready(function() {


  var tabs = [];

  

//Function to generate a multiplication table based on user's range input.

function generateTable(minCol, maxCol, minRow, maxRow) {

  let tabsList = document.getElementById("tabsList");

  let tableTabs = document.getElementById("tableTabs");


  let tabObject = { 

    name: tabs.length, 

    minCol: minCol,

    maxCol: maxCol,

    minRow: minRow,

    maxRow: maxRow

  };

  tabs.push(tabObject);


  let listItem = document.createElement("li");

  let anchor = document.createElement("a");

  anchor.href = `#tab-${tabs.length-1}`;

  anchor.innerText = `tab-${tabs.length-1}`;

  listItem.appendChild(anchor);

  tabsList.appendChild(listItem);

  listItem.classList.add("ui-tabs-tab");


  let tableDiv = document.createElement("div");

  tableDiv.id = `tab-${tabs.length-1}`;

  tableTabs.appendChild(tableDiv);


  var error = document.getElementById("message");


  var table = document.createElement("table");

  var result = "";

  //creating a multTable

  for(var i=minRow; i<=maxRow;i++)

  {

      if(i==minRow)

      {

        result += "<tr>";

        result += "<th>&times;</th>";

      }


      for(var j=minCol; j<=maxCol; j++)

      {

          if(i==minRow || j==minCol)

          {

            if(i==minRow)

              result += "<th>" + j + "</th>";

            else

              result += "<td>"+ (i-1)*j + "</td>";

          }

          else

            result += "<td>"+ (i-1)*j + "</td>";

      }

        result += "</tr>";

        result += "<tr>";

        result += "<th>" + i + "</th>";

        if(i==maxRow)

        {

          for(var j=minCol; j<=maxCol; j++)

          {

            result += "<td>"+ i*j + "</td>";

          }

        }

    }

  //printing the table

  table.innerHTML=result;

  tableDiv.appendChild(table);


  if ($('#tableTabs').tabs()) {

      $("#tableTabs").tabs('destroy');

  }


  $("#tableTabs").tabs( { "active" : tabs.length-1});

  return false;

}


//Function to validate user's input

$(function() {

  $("#inputForm").submit(function(e) {

    e.preventDefault();

  }).validate({

      submitHandler: function(form) {

      var minCol = parseInt(document.getElementById("minCol").value);

      var maxCol = parseInt(document.getElementById("maxCol").value);

      var minRow = parseInt(document.getElementById("minRow").value);

      var maxRow = parseInt(document.getElementById("maxRow").value);

      generateTable(minCol, maxCol, minRow, maxRow);

      return false;

    }

  });//end validate


});//end function


});

html {

  background-color: #9FA5FF;

  height: 100%;

}


body {

  background-color: #E2E3FF;

  margin: 0 auto;

  width: 70%;

}


h2 {

  padding-top: 20px;

  padding-bottom: 20px;

  text-align: center;

  background-color: #c68de2;

}


h6 {

  text-align: center;

  margin-bottom: 0px;

}


.purple-background {

  background-color:#c68de2;

}


.black {

  color:#000000;

}


.inputfield{

  height:30px;

}

.containerInput {

  padding-left: 0px;

  padding-right: 0px;

}


.container {

  padding: 20px 0;

  overflow: scroll;

  height: 400px;

}


#multTable {

  margin: auto;

}


#multTable td, th {

  width: 50px;

  font-size: 20px;

  border: 1px solid blue;

}


#multTable td:nth-child(even) {

  background-color: #ffffff;

}


#multTable th {

  background-color: #9FA5FF;

}


#message p{

  color: red;

  margin-bottom: 0px;

  padding-top: 15px;

  padding-left: 15px;

  text-align: center;

}


.error {

  color: red;

}

<!DOCTYPE html>

<html>

  <head>

    <meta charset="utf-8">

    <title>Multiplication table</title>

    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">

    <link rel="stylesheet" href="css/style.css">

    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.theme.min.css" integrity="sha512-9h7XRlUeUwcHUf9bNiWSTO9ovOWFELxTlViP801e5BbwNJ5ir9ua6L20tEroWZdm+HFBAWBLx2qH4l4QHHlRyg==" crossorigin="anonymous" />

    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css" integrity="sha512-aOG0c6nPNzGk+5zjwyJaoRUgCdOrfSDhmMID2u4+OIslr0GjpLKo7Xm0Ao3xmpM4T8AmIouRkqwj1nrdVsLKEQ==" crossorigin="anonymous" />

    <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">

    

    


    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.2/jquery.validate.min.js"></script>

    <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>

    

    <script src="js/validate.js"></script>

  </head>

  <body>


<div class="containerInput">

  <h2>Multiplication Table</h2>

  <div class="row justify-content-center">

    <div class="col-lg-6 col-md-6-offset-3 col-sm-12 well" >

    <form id="inputForm" class = 'card p-3 bg-light' class="form-horizontal">

      <h6>Please enter range values for your Multiplication Table.</h6>

      <hr>

      <div class="form-group">

        <label class="control-label col-sm-10" for="minCol">Minimum Column Value:</label>

        <div class="col-sm-12">

          <input class="form-control inputfield" id="minCol" name="minCol" value="-50">

        </div>

        <div id="minColSlider" class="sliderMC"></div>

      </div>

      <div class="form-group">

        <label class="control-label col-sm-10" for="maxCol">Maximum Column Value:</label>

        <div class="col-sm-12">

          <input class="form-control inputfield" id="maxCol" name="maxCol" value="-50">

        </div>

        <div id="maxColSlider" class="sliderMC2"></div>

      </div>

      <div class="form-group">

        <label class="control-label col-sm-10" for="minRow">Minimum Row Value:</label>

        <div class="col-sm-12">

          <input class="form-control inputfield" id="minRow" name="minRow" value="-50">

        </div>

        <div id="minRowSlider" class="sliderMR"></div>

      </div>

      <div class="form-group">

        <label class="control-label col-sm-10" for="maxRow">Maximum Row Value:</label>

        <div class="col-sm-12">

          <input class="form-control inputfield" id="maxRow" name="maxRow" value="-50">

        </div>

        <div id="maxRowSlider" class="sliderMR2"></div>

      </div>

      <div class="form-group">

        <div class="col-sm-offset-2 col-sm-10">

          <button type="submit" class="btn btn-secondary purple-background black">Generate</button>

        </div>

      </div>

    </form>

  </div>

 </div>

</div>


<div id="message">

</div>



 <div id="tableTabs">

  <ul id="tabsList">

  </ul>

</div>



  </body>

</html>


查看完整回答
反對 回復 2023-08-18
  • 1 回答
  • 0 關注
  • 105 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

 幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

 公眾號

掃描二維碼
關注慕課網微信公眾號