Я работаю над динамическим обновлением таблицы HTML при нажатии на выпадающие списки
- У меня есть раскрывающийся список с таблицей HTML
- Раскрывающийся список с 10-15 опциями, но здесь я показываю только 3, т. Е.
All, Cat1, Cat2 из-за минимального кода
- изначально я заполняю таблицу для
All категорий
- Предположим, пользователь нажимает на опцию
Cat1, и таблица html заполняется в соответствии с тем, что в моей таблице html есть поле ввода с именем Quantity, которое имеет начальное значение 0.
- Теперь пользователь вводит что-то в поле ввода, например,
Quantity и не нажимает кнопку сохранения, а нажимает на Cat2, теперь новая html-таблица заполняется на Cat2, затем пользователь также вводит что-то туда, после ввода некоторых вводов. их пользователь снова возвращается к опции Cat1, но теперь значение поля ввода обновляется и теперь 0, а не один введенный пользователем
Поэтому мой вопрос заключается в том, как я могу сохранить значения в некоторой локальной памяти или переменной, чтобы, если пользователь вернулся к первым раскрывающимся данным, в нем было показано, что пользователь ввел не 0.
Что я делал до сих пор
var tableData = [{
"Item Code": "1001",
"Item Name": "Beverages",
"Quantity": ""
},
{
"Item Code": "2003",
"Item Name": "Juices",
"Quantity": ""
},
{
"Item Code": "1004",
"Item Name": "Soups",
"Quantity": ""
},
{
"Item Code": "2005",
"Item Name": "Cookies",
"Quantity": ""
},
]
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.
for (var i = 0; i < col.length; i++) {
var th = document.createElement("th"); // TABLE HEADER.
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);
for (var j = 0; j < col.length; j++) {
let tabCell = tr.insertCell(-1);
var hiddenField = document.createElement("input");
hiddenField.style.display = "none";
var tabledata = tableData[i][col[j]];
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]['Quantity'] === tableData[i][col[j]]) {
var quantityField = document.createElement("input");
quantityField.style.border = "none";
quantityField.style["text-align"] = "center";
quantityField.setAttribute('name', 'Quantity');
quantityField.setAttribute('value', tabledata);
quantityField.setAttribute('type', 'number');
quantityField.classList.add("dataReset");
tabCell.appendChild(quantityField);
/* console.log(quantityField) */
}
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);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css">
<form action="InsertQuantityIndent" method="post" id="form1">
<div class="row position-relative">
<div class="col-lg-4">
<h5>Category</h5>
<select class="test" id="CategoryName" name="categoryCode">
<option>All</option>
<option>Cat1</option>
<option>Cat1</option>
</select>
</div>
</div>
<br>
<div class="table-responsive">
<table class=" w-100" id=HourlysalesSummary></table>
</div>
<div>
<button type="submit" id="save">
<i class="fas fa-save"></i> Save
</button>
</div>
</form>
Приведенный выше фрагмент показывает начальный вывод при загрузке страницы. После того, как пользователь нажмет на другое раскрывающееся меню, скажем, Cat1 Я делаю AJAX-вызов на событие onchange для данных кошки, где категория = выбранная категория
$('#CategoryName').on('change', function() {
var selectedOption =this.value;
$.ajax({
async: true,
url : "ItemCategoryWiseFilter",
method : "POST",
data : {
categoryName :selectedOption,
},
});
$.ajax({
async: true,
url : "ItemCategoryWiseFilter",
method : "GET",
dataType : "json",
contentType: "application/json; charset=utf-8",
success : function(tableData) {
addTable(tabledata);
}
});
});
Для большего понимания, вот мой код конца
ResultSet resultSet = statement.executeQuery(sql);
while (resultSet.next()) {
lhm = new LinkedHashMap<Object, Object>();
itemCode = resultSet.getString("itemcode");
itemName = resultSet.getString("itemname");
lhm.put("Item Code", itemCode);
lhm.put("Item Name", itemName);
lhm.put("Quantity", "0");
mainList.add(lhm);
str = gson.toJson(mainList);
}
Какой у меня подход:
- Я думаю о том, чтобы сделать ajax-вызов и отправить данные поля ввода на сервер, а затем при следующем ajax-вызове, когда пользователь переходит или возвращается в тот же выпадающий список, должен вызывать эти данные
- Но изначально таблица отображается для всех категорий, и после этого пользователь нажимает
Cat1, она показывает Cat1 данные, и в первый раз количество должно быть 0 после того, как этот пользователь отредактирует и перейдет в другой раскрывающийся список
- Моя проблема заключается в том, как я могу отправить данные обратно на сервер, какие данные были введены пользователем в категории
Cat1, и отображать те же данные, когда пользователь снова возвращается к Cat1.