javascript - 如何重置/清除输入字段而不重新加载输入字段

Question

我正在尝试清除 HTML 表格的输入字段而不重新加载表格在我的 HTML 表中，我有三列 ItemCode ItemName 和 Quantity Quantity 列是可编辑的，所以我想清除每当用户单击清除按钮而不重新加载页面时

片段

$(document).ready(function() {

  var tableData = [{
      "Category Code": "C001",
      "Category Name": "Beverages",
      "Quantity": "0"

    },
    {
      "Category Code": "C003",
      "Category Name": "Juices",
      "Quantity": "0"

    },
    {
      "Category Code": "C004",
      "Category Name": "Soups",
      "Quantity": "0"

    },
    {
      "Category Code": "C005",
      "Category Name": "Cookies",
      "Quantity": "0"

    },
    {
      "Category Code": "C006",
      "Category Name": "Buns",
      "Quantity": "0"

    },
    {
      "Category Code": "C007",
      "Category Name": "Breads",
      "Quantity": "0"

    },
    {
      "Category Code": "C008",
      "Category Name": "Rusks",
      "Quantity": "0"

    },
    {
      "Category Code": "C009",
      "Category Name": "Biscuits",
      "Quantity": "0"

    },
    {
      "Category Code": "C010",
      "Category Name": "Puff",
      "Quantity": "0"

    },
    {
      "Category Code": "C011",
      "Category Name": "Savouries",
      "Quantity": "0"

    },
    {
      "Category Code": "C008",
      "Category Name": "Rusks",
      "Quantity": "0"

    },
    {
      "Category Code": "C009",
      "Category Name": "Biscuits",
      "Quantity": "0"

    },
    {
      "Category Code": "C010",
      "Category Name": "Puff",
      "Quantity": "0"

    },
    {
      "Category Code": "C011",
      "Category Name": "Savouries",
      "Quantity": "0"

    },
    {
      "Category Code": "C012",
      "Category Name": "Cake",
      "Quantity": "0"

    }

  ]


  function addTable(tableValue) {
    var col = Object.keys(tableValue[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 < tableValue.length; i++) {
      tr = table.insertRow(-1);
      for (var j = 0; j < col.length; j++) {
        let tabCell = tr.insertCell(-1);
        var tabledata = tableValue[i][col[j]];
        if (tabledata && !isNaN(tabledata)) {
          tabledata = parseInt(tabledata).toLocaleString('en-in')
        }
        if (tableData[i]['Quantity'] === tableData[i][col[j]]) {
          tabCell.setAttribute('contenteditable', true);
          tabCell.classList.add("dataReset"); //this column i am trying to clear/reset


          tabCell.innerHTML = tabledata;
        } else {
          span = document.createElement("span");
          span.innerHTML = tabledata;
          tabCell.appendChild(span)
        }
        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);
  $("#clear").click(function() { //this to reset the data to 0
    $(".dataReset")[0].reset();
    return false;
  });

});

head.table-bordered>tbody>tr>td,
table.table-bordered>tbody>tr>th {
  border: 1px solid white;
  white-space: nowrap;
  border-collapse: collapse;
  font-family: Verdana;
  font-size: 9pt;
  background-color: rgba(29, 150, 178, 1);
  font-weight: normal;
  text-align: center;
  color: white;
}

table.table-bordered>tbody>tr>td {
  border: 1px solid rgba(29, 150, 178, 1);
  white-space: nowrap;
  border-collapse: collapse;
  font-family: Verdana;
  font-size: 8pt;
  background-color: rgba(84, 83, 72, .1);
  padding: 5px 5px 5px 5px;
}

select {
  width: 283px;
  height: 30px;
  padding: 0px;
}

<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">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/js/bootstrap.min.js"></script>
<form action="" id="form1">
  <div class="container" align="center">

    <div class="row">
      <div class="col-lg-12">
        <h6>OUTLET :</h6>
        <select style="font-family: Verdana;font-size: 8pt;">
          <option>JAYANAGAR</option>
          <option>MALLESHWARAM</option>
          <option>KOLAR</option>
        </select>
      </div>
    </div>
    <div class="row">
      <div class="col-lg-12">
        <h6>CATEGORY :</h6>
        <select style="margin-bottom:10px;font-family: Verdana;font-size: 8pt;">
          <option>C001</option>
          <option>C002</option>
          <option>C003</option>
        </select>
      </div>
    </div>
    <div class="row">
      <div class="col-lg-12 table table-responsive" style="margin-bottom:1px;">
        <table id="HourlysalesSummary"></table>
      </div>
    </div>
    <div>
      <button type="submit" class="btn btn-success">
					<i class="fas fa-save"></i> Save
				</button>
      <button id="clear"> Clear
				</button>

    </div>
  </div>
</form>

我正在尝试重置的另一种 j 查询方法

  $('#clear').click(function(e){    

            if(confirm("Want to clear?")){
                /*Clear all input type="text" box*/
                $('#form1 input[type="text"]').val('');

            }                   
        });

上面的也重新加载页面

我正在尝试写入方法，但不起作用，任何人有任何想法请纠正我

Answer 1

由于您尝试重置为 0 <td>您可以使用 .text() 属性设置元素的值，如下所示:

$("#clear").click(function() { 
    $('.dataReset').text(0);
    return false;
});

这是一个 Fiddle 用您的代码实现上述内容。

编辑:如果您想实现确认框，只需执行以下操作:

$("#clear").click(function() {
    if (confirm('Are you sure?')) {
       $('.dataReset').text(0);
    }
    return false;
});

更新了 fiddle 。