如何在按鈕單擊時顯示新的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>