为什么内容被附加到错误的动态生成的选项卡？
我正在尝试动态创建 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>×</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;
}
小怪兽爱吃肉浏览 79回答 1
1回答
-
UYOU
选项卡的重新初始化失败。如果它们首先存在，你需要摧毁它们。if ($('#tableTabs').tabs()) { $("#tableTabs").tabs('destroy');}$("#tableTabs").tabs({ "active": tabs.length - 1});另请注意，您的表格标记不完整。它缺少结束表行标记：<tr><th>×</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>×</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/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>
随时随地看视频慕课网APP
相关分类
JavaScript