我有一个包含4列的HTML表,项目代码项名称类别名称和数量输入字段的数量
我正在用JSON数据填充表,最初将输入字段设置为0
当用户由于大量数据而在输入字段中输入某些内容时,用户想要查看他为此输入的内容,我提供了一个查看按钮,当用户单击该按钮并且我在同一表格中显示所有非零行时,则单击视图后,我将隐藏视图并显示编辑以供用户再次编辑,但是单击输入字段的所有数据后,重置为0
>我想当用户单击以编辑数据时,应该在输入字段中输入用户之前输入的内容
片段
var tableData = [{
"Item Code": "1978","Item Name": "Alu Chat-S","Category Name": "Chats"
},{
"Item Code": "1979","Item Name": "Dahi Alu Chat-S",{
"Item Code": "1980","Item Name": "Samosa-S",{
"Item Code": "1981","Item Name": "SamosaChat-S",{
"Item Code": "1982","Item Name": "Dahi Samosa Chats-S","Category Name": "regular"
},{
"Item Code": "1983","Item Name": "Garam Samosa Chats-S",{
"Item Code": "1984","Item Name": "Kachori Chats-S",{
"Item Code": "1985","Item Name": "Garam Kachori Chat-S",{
"Item Code": "1986","Item Name": "Dahi Kachori Chat-S","Category Name": "fastfood"
},{
"Item Code": "1987","Item Name": "Dai Raj Kachori-S",{
"Item Code": "1988","Item Name": "Baby Kachori Chat-S",{
"Item Code": "1989","Item Name": "Dahi Baby Kachori-S",{
"Item Code": "1990","Item Name": "Anar Bhalla-S",{
"Item Code": "1991","Item Name": "Dahi Bhalla-S",{
"Item Code": "1992","Item Name": "Jhal Muri-S",{
"Item Code": "1993","Item Name": "Chat Platter-S",{
"Item Code": "1994","Item Name": "Dahi Papdi Chat-S","Category Name": "GIFT PACK"
},{
"Item Code": "2402","Item Name": "ALMOND CHBAR",{
"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");
$("#view").on("click",function() {
var itemRows = document.getElementsByClassName("item-row");
if (quantityField === 0) {
tabCell.innerHTML = tabledata.hide();;
}
/* $("#HourlysalesSummary tr td").filter(function(){
return $(this).text() == 0;
}).hide(); */
});
}
addTable(tableData);
var selectedOption = "";
$("#CategoryName").on("change",function() {
selectedOption = this.value;
//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();
}
function edit1() {
addTable(tableData);
}<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>
<button id="edit" type="button" onclick="edit1()" style="display:none">edit</button>
</div>
</form>
</div>最佳答案
按照其余代码的结构,我将使用CSS可见性属性来隐藏和显示行.
原文链接：https://www.f2er.com/html/530401.html您可以通过它们的className获取所有数量输入字段,并检查该值是否为零.
如果其不为零,则将项目行的CSS设置为可见.
如果它为零,则将项目行的CSS设置为折叠.
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.visibility = "collapse";
}
}
//change the value of the select menu to "All"
$('#CategoryName').val('All');
}
