我正在尝试清除HTML表的输入字段而不重新加载表
在我的HTML表中，我有三列ItemCode ItemName和Quantity Quantity列是可编辑的，因此我想清除一下，只要用户单击清除按钮而无需重新加载页面< / p>
代码段
$(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('');
}
});
以上内容也重新加载了页面
我正在尝试写方法，但是没有用，有人有任何想法请纠正我
答案 0 :(得分：2)
由于您尝试将元素重置为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;
});
更新的小提琴。
答案 1 :(得分：1)
首先我在您的清除按钮中添加了type =“ button”，因此它不会被视为提交按钮：
<button type="button" id="clear"> Clear </button>
然后我更改了重置功能以清除值
$("#clear").click(function() { //this to reset the data to 0
if(confirm("Want to clear?"))
$(".dataReset").text(0)
});
欢呼
编辑：就像杰里米·蒂尔（Jeremy Thille）在评论中所说的那样，无需循环