我正在尝试清除 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('');
}
});
上面的也重新加载页面
我正在尝试写入方法，但不起作用，任何人有任何想法请纠正我
最佳答案
由于您尝试重置为 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 。
关于javascript - 如何重置/清除输入字段而不重新加载输入字段，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/54128546/