如何在按钮单击时显示新的HTML表

Question

我有一个动态的HTML表。 我正在用JSON数据创建它。 我工作一张桌子有几个要求。

有一个按钮view ，如果用户单击它，它会显示所有非零行，但是当前它显示在不需要的同一表中。

我正在努力实现的目标

• 当用户单击view时，应并排或在主表下方填充新表
• 我已经用非零行数据过滤了现有表
• 现在，我试图在单击view将该数据填充到新表中
• 该用户可以看到他输入的内容，并可以重新检查他输入的记录

程式码片段

 var tableData = [{ "Item Code": "1978", "Item Name": "Alu Chat-S", "Category Name": "Chats" }, { "Item Code": "1979", "Item Name": "Dahi Alu Chat-S", "Category Name": "Chats" }, { "Item Code": "1980", "Item Name": "Samosa-S", "Category Name": "Chats" }, { "Item Code": "1981", "Item Name": "SamosaChat-S", "Category Name": "Chats" }, { "Item Code": "1982", "Item Name": "Dahi Samosa Chats-S", "Category Name": "regular" }, { "Item Code": "1983", "Item Name": "Garam Samosa Chats-S", "Category Name": "regular" }, { "Item Code": "1984", "Item Name": "Kachori Chats-S", "Category Name": "regular" }, { "Item Code": "1985", "Item Name": "Garam Kachori Chat-S", "Category Name": "regular" }, { "Item Code": "1986", "Item Name": "Dahi Kachori Chat-S", "Category Name": "fastfood" }, { "Item Code": "1987", "Item Name": "Dai Raj Kachori-S", "Category Name": "fastfood" }, { "Item Code": "1988", "Item Name": "Baby Kachori Chat-S", "Category Name": "fastfood" }, { "Item Code": "1989", "Item Name": "Dahi Baby Kachori-S", "Category Name": "fastfood" }, { "Item Code": "1990", "Item Name": "Anar Bhalla-S", "Category Name": "fastfood" }, { "Item Code": "1991", "Item Name": "Dahi Bhalla-S", "Category Name": "fastfood" }, { "Item Code": "1992", "Item Name": "Jhal Muri-S", "Category Name": "fastfood" }, { "Item Code": "1993", "Item Name": "Chat Platter-S", "Category Name": "fastfood" }, { "Item Code": "1994", "Item Name": "Dahi Papdi Chat-S", "Category Name": "GIFT PACK" }, { "Item Code": "2402", "Item Name": "ALMOND CHBAR", "Category Name": "GIFT PACK" }, { "Item Code": "333", "Item Name": "A BR SB EX", "Category Name": "EXEMPTED" }, { "Item Code": "603", "Item Name": "AMUL FRESH CREAM", "Category Name": "EXEMPTED" } ] function addTable(tableData) { var col = Object.keys(tableData[0]); var countNum = col.filter(i => !isNaN(i)).length; var num = col.splice(0, countNum); col = col.concat(num); var table = document.createElement("table"); var tr = table.insertRow(-1); // TABLE ROW. var colNum = col.length; //to improve the speed for (var i = 0; i < colNum + 1; i++) { var th = document.createElement("th"); // TABLE HEADER. if (i >= colNum) { th.innerHTML = "Quantity"; tr.appendChild(th); tr.classList.add("text-center"); tr.classList.add("head"); } else { th.innerHTML = col[i]; tr.appendChild(th); tr.classList.add("text-center"); tr.classList.add("head"); } } for (var i = 0; i < tableData.length; i++) { tr = table.insertRow(-1); tr.classList.add("item-row"); for (var j = 0; j < col.length + 1; j++) { //here i am adding a class with the name of the category to each items row. var categoryName = tableData[i]["Category Name"]; tr.dataset.category = categoryName; let tabCell = tr.insertCell(-1); var hiddenField = document.createElement("input"); hiddenField.style.display = "none"; var quantityField = document.createElement("input"); var tabledata = tableData[i][col[j]]; if (i > -1 && j >= colNum) { quantityField.style.border = "none"; quantityField.style["text-align"] = "right"; quantityField.setAttribute("name", "Quantity"); quantityField.setAttribute("autocomplete", "on"); quantityField.setAttribute("value", "0"); quantityField.setAttribute("type", "number"); quantityField.setAttribute("required", "required"); quantityField.classList.add("dataReset"); quantityField.toLocaleString('en-IN'); tabCell.appendChild(quantityField); } else { if (tableData[i]["Item Code"] === tableData[i][col[j]]) { tabCell.innerHTML = tabledata; hiddenField.setAttribute("name", "Item_Code"); hiddenField.setAttribute("value", tabledata); tabCell.appendChild(hiddenField); } if (tableData[i]["Item Name"] === tableData[i][col[j]]) { tabCell.innerHTML = tabledata; hiddenField.setAttribute("name", "Item_Name"); hiddenField.setAttribute("value", tabledata); tabCell.appendChild(hiddenField); } if (tableData[i]["Category Name"] === tableData[i][col[j]]) { tabCell.innerHTML = tabledata; hiddenField.setAttribute("name", "Category_Name"); hiddenField.setAttribute("value", tabledata); tabCell.appendChild(hiddenField); } if (j > 1) tabCell.classList.add("text-right"); } } } var divContainer = document.getElementById("HourlysalesSummary"); divContainer.innerHTML = ""; divContainer.appendChild(table); table.classList.add("table"); table.classList.add("table-striped"); table.classList.add("table-bordered"); table.classList.add("table-hover"); } addTable(tableData); var selectedOption = ""; $("#CategoryName").on("change", function() { selectedOption = this.value; console.log(selectedOption); //getting all item rows so i can target them. var itemRows = document.getElementsByClassName("item-row"); if (selectedOption === "All") { //If "All" then style all rows with visibility: visible. for (var i = 0; i < itemRows.length; i++) { itemRows[i].style.visibility = "visible"; } } else { //If the selectedOption is anything other than "All", // firstly i am style all rows with visibility: collapse for (var i = 0; i < itemRows.length; i++) { itemRows[i].style.visibility = "collapse"; } /* alert(itemRows); */ // then getting all rows which have the selectedOption as a class and style those rows with visibility: visible. var selectedItemRows = document.querySelectorAll("[data-category='" + selectedOption + "']"); for (var i = 0; i < selectedItemRows.length; i++) { selectedItemRows[i].style.visibility = "visible"; } } }); function view() { //get all quantity input fields var quantityFields = document.getElementsByClassName("dataReset"); //iterate through all quantity input fields for (var i = 0; i < quantityFields.length; i++) { if (quantityFields[i].value != 0) { //if the input value of this quantity field is not equal to zero then find the closest "item-row" //so that we can set this table row to visible quantityFields[i].closest(".item-row").style.visibility = "visible"; } else { //if the input value of this quantity field is equal to zero then find the closest "item-row" //so that we can set this table row to collapse quantityFields[i].closest(".item-row").style.display = "none"; } } //change the value of the select menu to "All" $('#CategoryName').val('All'); $('#see').hide(); $('#edit').show(); } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css"> <div class="container" id="divHide"> <form id="indentForm" autocomplete="on"> <div class="row position-relative"> <div class="col-lg-4"> <h5 id="commonHeader">Category</h5> <select class="test" id="CategoryName" name="categoryCode"> <option>All</option> <option>Chats</option> <option>regular</option> <option>fastfood</option> <option>GIFT PACK</option> <option>EXEMPTED</option> </select> </div> </div> <hr style="border: 1px solid black"> <div class="table-responsive"> <table class="w-100" id=HourlysalesSummary></table> </div> <div> <button type="submit" id="save"> Save </button> <button id="see" type="button" onclick="view()">view</button> </div> </form> </div> 

我也尝试了另一种方法，当用户单击视图时，视图按钮将更改为edit ，并且表中填充了非零行，但是当用户单击编辑表时，数据再次重置为0，我我为此使用了autocomplete=on ，但是在单击edit时，它刚刚将我的表格数据刷新为0

所以那没有解决。 现在，我有了一个新的想法，即并排填充一个表以进行查看，另一个并排进行编辑，只是在单击非零数据​​的查看按钮时面临创建新表的问题。

注意

我尝试使用的每种方法所面临的主要问题是，当用户单击view按钮时，为什么数据会重置为零。

Answer 1

您需要创建第二个表并将所需的行克隆到该表中。

因此，您可以添加一个新表，如下所示：

<!-- Add a new table for results -->
<div class="table-responsive">
  <table class="w-100" id="table-result"></table>
</div>

遍历非空字段：

var quantityFields = $(".dataReset").filter(function() {
    return this.value!=0;
});

克隆行，将其添加到新表中，然后在第一张表中重置该行：

let row = Object.assign(quantityFields[i].closest(".item-row"));
tResult.append(row);

for (var i = 0; i < quantityFields.length; i++) {
  //COPY CURRENT ROW IN NEW TABLE
  let row = $(quantityFields[i].closest(".item-row")).clone();
  tResult.append(row);
  //RESET THE CURRENT VALUE IN FIRST TABLE
  quantityFields[i].value="0";
//}

}

看到这适用于您的代码：

 var tableData = [{ "Item Code": "1978", "Item Name": "Alu Chat-S", "Category Name": "Chats" }, { "Item Code": "1979", "Item Name": "Dahi Alu Chat-S", "Category Name": "Chats" }, { "Item Code": "1980", "Item Name": "Samosa-S", "Category Name": "Chats" }, { "Item Code": "1981", "Item Name": "SamosaChat-S", "Category Name": "Chats" }, { "Item Code": "1982", "Item Name": "Dahi Samosa Chats-S", "Category Name": "regular" }, { "Item Code": "1983", "Item Name": "Garam Samosa Chats-S", "Category Name": "regular" }, { "Item Code": "1984", "Item Name": "Kachori Chats-S", "Category Name": "regular" }, { "Item Code": "1985", "Item Name": "Garam Kachori Chat-S", "Category Name": "regular" }, { "Item Code": "1986", "Item Name": "Dahi Kachori Chat-S", "Category Name": "fastfood" }, { "Item Code": "1987", "Item Name": "Dai Raj Kachori-S", "Category Name": "fastfood" }, { "Item Code": "1988", "Item Name": "Baby Kachori Chat-S", "Category Name": "fastfood" }, { "Item Code": "1989", "Item Name": "Dahi Baby Kachori-S", "Category Name": "fastfood" }, { "Item Code": "1990", "Item Name": "Anar Bhalla-S", "Category Name": "fastfood" }, { "Item Code": "1991", "Item Name": "Dahi Bhalla-S", "Category Name": "fastfood" }, { "Item Code": "1992", "Item Name": "Jhal Muri-S", "Category Name": "fastfood" }, { "Item Code": "1993", "Item Name": "Chat Platter-S", "Category Name": "fastfood" }, { "Item Code": "1994", "Item Name": "Dahi Papdi Chat-S", "Category Name": "GIFT PACK" }, { "Item Code": "2402", "Item Name": "ALMOND CHBAR", "Category Name": "GIFT PACK" }, { "Item Code": "333", "Item Name": "A BR SB EX", "Category Name": "EXEMPTED" }, { "Item Code": "603", "Item Name": "AMUL FRESH CREAM", "Category Name": "EXEMPTED" } ] function addTable(tableData) { var col = Object.keys(tableData[0]); var countNum = col.filter(i => !isNaN(i)).length; var num = col.splice(0, countNum); col = col.concat(num); var table = document.createElement("table"); var tr = table.insertRow(-1); // TABLE ROW. var colNum = col.length; //to improve the speed for (var i = 0; i < colNum + 1; i++) { var th = document.createElement("th"); // TABLE HEADER. if (i >= colNum) { th.innerHTML = "Quantity"; tr.appendChild(th); tr.classList.add("text-center"); tr.classList.add("head"); } else { th.innerHTML = col[i]; tr.appendChild(th); tr.classList.add("text-center"); tr.classList.add("head"); } } for (var i = 0; i < tableData.length; i++) { tr = table.insertRow(-1); tr.classList.add("item-row"); for (var j = 0; j < col.length + 1; j++) { //here i am adding a class with the name of the category to each items row. var categoryName = tableData[i]["Category Name"]; tr.dataset.category = categoryName; let tabCell = tr.insertCell(-1); var hiddenField = document.createElement("input"); hiddenField.style.display = "none"; var quantityField = document.createElement("input"); var tabledata = tableData[i][col[j]]; if (i > -1 && j >= colNum) { quantityField.style.border = "none"; quantityField.style["text-align"] = "right"; quantityField.setAttribute("name", "Quantity"); quantityField.setAttribute("autocomplete", "on"); quantityField.setAttribute("value", "0"); quantityField.setAttribute("type", "number"); quantityField.setAttribute("required", "required"); quantityField.classList.add("dataReset"); quantityField.toLocaleString('en-IN'); tabCell.appendChild(quantityField); } else { if (tableData[i]["Item Code"] === tableData[i][col[j]]) { tabCell.innerHTML = tabledata; hiddenField.setAttribute("name", "Item_Code"); hiddenField.setAttribute("value", tabledata); tabCell.appendChild(hiddenField); } if (tableData[i]["Item Name"] === tableData[i][col[j]]) { tabCell.innerHTML = tabledata; hiddenField.setAttribute("name", "Item_Name"); hiddenField.setAttribute("value", tabledata); tabCell.appendChild(hiddenField); } if (tableData[i]["Category Name"] === tableData[i][col[j]]) { tabCell.innerHTML = tabledata; hiddenField.setAttribute("name", "Category_Name"); hiddenField.setAttribute("value", tabledata); tabCell.appendChild(hiddenField); } if (j > 1) tabCell.classList.add("text-right"); } } } var divContainer = document.getElementById("HourlysalesSummary"); divContainer.innerHTML = ""; divContainer.appendChild(table); table.classList.add("table"); table.classList.add("table-striped"); table.classList.add("table-bordered"); table.classList.add("table-hover"); } addTable(tableData); var selectedOption = ""; $("#CategoryName").on("change", function() { selectedOption = this.value; console.log(selectedOption); //getting all item rows so i can target them. var itemRows = document.getElementsByClassName("item-row"); if (selectedOption === "All") { //If "All" then style all rows with visibility: visible. for (var i = 0; i < itemRows.length; i++) { itemRows[i].style.visibility = "visible"; } } else { //If the selectedOption is anything other than "All", // firstly i am style all rows with visibility: collapse for (var i = 0; i < itemRows.length; i++) { itemRows[i].style.visibility = "collapse"; } /* alert(itemRows); */ // then getting all rows which have the selectedOption as a class and style those rows with visibility: visible. var selectedItemRows = document.querySelectorAll("[data-category='" + selectedOption + "']"); for (var i = 0; i < selectedItemRows.length; i++) { selectedItemRows[i].style.visibility = "visible"; } } }); function view() { // Delete 2nd table contents var tResult = $("#table-result"); tResult.empty(); var quantityFields = $(".dataReset").filter(function() { return this.value!=0; }); //iterate through all quantity input fields for (var i = 0; i < quantityFields.length; i++) { //COPY CURRENT ROW IN NEW TABLE let row = $(quantityFields[i].closest(".item-row")).clone(); tResult.append(row); //RESET THE CURRENT VALUE IN FIRST TABLE (commented out) // quantityFields[i].value="0"; //} } //change the value of the select menu to "All" $('#CategoryName').val('All'); $('#see').hide(); $('#edit').show(); } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css"> <div class="container" id="divHide"> <form id="indentForm" autocomplete="on"> <div class="row position-relative"> <div class="col-lg-4"> <h5 id="commonHeader">Category</h5> <select class="test" id="CategoryName" name="categoryCode"> <option>All</option> <option>Chats</option> <option>regular</option> <option>fastfood</option> <option>GIFT PACK</option> <option>EXEMPTED</option> </select> </div> </div> <hr style="border: 1px solid black"> <div class="table-responsive"> <table class="w-100" id=HourlysalesSummary></table> </div> <!-- Add a new table for results --> <div class="table-responsive"> <table class="w-100" id="table-result"></table> </div> <div> <button type="submit" id="save"> Save </button> <button id="see" type="button" onclick="view()">view</button> </div> </form> </div>