堆棧內存溢出
  簡體   English   中英

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

[英]Why is the content being appended to the wrong dynamically-generated tab?

 原文  2020-11-20 17:24:42  5   1    javascript/ jquery/ jquery-ui-tabs

問題描述

我正在嘗試動態創建 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; } //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 lang="en"> <head> <meta charset="utf-8"> <title>Multiplication table</title> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/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>

小提琴演示

1 個解決方案

解決方案1
 1 已采納  2020-11-20 19:39:13

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

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 lang="en"> <head> <meta charset="utf-8"> <title>Multiplication table</title> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/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>

暫無
暫無

聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

相關問題 動態生成的HTML中是否沒有“跳至下一個輸入元素的標簽”？ 如何通過jQuery訪問動態生成的頁面內容？ 為什么Google地圖不顯示在動態生成的div中？ 為什么我動態生成的橢圓變成了正方形？ 動態生成的表即使被清除，也會不斷增加 如何找到動態生成的HTML元素？ HAML中動態生成的Javascript 查找動態生成的子節點（反應） 動態生成的按鈕未單擊React 更改動態生成的SVG以使其具有響應能力？
相關標簽
 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM