Question

我有一个HTML表，其中的输入字段是autocomplete=on，用于存储数据，我正在做的是，我在表单中有一个下拉菜单，并根据需要具有按钮。当用户单击任意一个时下拉表将根据该表进行填充，然后用户在输入字段中输入一些输入

我在用户单击时提供了一个View按钮，然后它显示了用户已在输入字段中输入的内容（填充了所有非零行），在单击视图时，我隐藏了视图按钮并显示{{1 }}按钮，以便用户可以在查看数据后再次进行编辑

当用户单击edit时，我正在调用edit我的表函数并再次显示该表，但是在单击“编辑”时它将显示该表，但所有输入字段都重置为addTable(tableData)这不是代码的预期行为，因为我正在使用0，它应该将值存储到输入字段中，直到用户刷新页面为止我为此使用autocomplete=on，但仍然可以刷新

autocomplete=on

var tableData = [{
    "Item Code": "1978",
    "Item Name": "Alu Chat-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": "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": "1989",
    "Item Name": "Dahi Baby Kachori-S",
    "Category Name": "fastfood"
  },
  {
    "Item Code": "1990",
    "Item Name": "Anar Bhalla-S",
    "Category Name": "fastfood"
  },
  {
    "Item Code": "1992",
    "Item Name": "Jhal Muri-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");
  $("#view").on("click", function() {
    var itemRows = document.getElementsByClassName("item-row");
    if (quantityField === 0) {
      tabCell.innerHTML = tabledata.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() {
  //getting all quantity input fields
  var quantityFields = document.getElementsByClassName("dataReset");
  //iterating 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 {

      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(event) { //this is what i am trying
  event.preventDefault();
  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(event)" style="display:none">edit</button> </div> </form> </div>但不能正常工作

更新：我将event.preventDefault();添加到了编辑按钮的onclick上。

Answer 1

您想从HTML传递MouseEvent。

<button id="edit" type="button" onclick="edit1(event)" style="display:none">edit</button>

不想在单击按钮时刷新页面

1 个答案: