Question

我正在通过单击下拉列表来动态更新HTML表

我在HTML表中有一个下拉列表
该下拉菜单有10-15个选项，但是由于代码最少，我这里仅显示3个，即All，Cat1，Cat2
最初，我正在填充All个类别的表
假设用户单击Cat1选项，并且根据html表填充的内容，我的html表具有一个名为Quantity的输入字段，其初始值为0。
现在用户在输入字段即Quantity中输入了一些内容，而没有单击保存按钮，然后单击了Cat2，现在为Cat2填充了新的html表，然后用户在其中输入了一些内容同样，在输入了一些输入后，他们的用户又回到了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，我正在对onchange事件进行AJAX调用，以收集类别=选定类别的数据

$('#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时显示相同的数据。

Answer 1

在页面加载时，从后端填充类别和数量值（可能在表单数据或Ajax中检索值）。
在Javascript中创建一个JSON对象，并在用户更改类别时填充它

编写一个脚本，并在输入聚焦时将值填充到jsonObject中。

$( "input[type='text']" ).focusout(function() {

     var itemId = get the item id;
     var catValue = get the cat value  //$('#CategoryName option:selected").text();
     dataObject.catValue.itemId = $(this).val();
//dataObject => getting the dataobject created in the javascript

// dataObject.catValue => will give the category lik dataObject."All" or dataObject."cat1"

// dataObject.catValue.itemId  => will give the property.=> dataObject."cat1"."1001"

});

单击保存=>将此json对象传递到后端

如何在Ajax调用时将输入文本字段值保留到某些内存中

1 个答案: