我有一个交易表,每个都有一个编辑按钮来编辑数据,然后将其保存到数据库。我的问题是,如果我点击编辑一个,然后多个其他的,他们都保存使用相同的数据。因此,如果我点击前五个编辑按钮,然后在我点击的最后一个按钮上,我将数量更改为5,所有我以前点击的按钮在保存后也更改为5。example
我试过删除保存和编辑按钮的事件侦听器,但没有用。看起来问题是因为事件侦听器仍然在后台运行,因为保存按钮和编辑按钮都是相同的类名。只要你点击取消,一切都很好,但是如果你点击一个编辑按钮,然后另一个你有两个示例。当他们单击不同的编辑按钮时,我可以删除saveBtn事件侦听器的方法是什么?
const csvToTable = (csv, transactionIdsAtIndex) => {
let rows = csv.trim().split(/\r?\n|\r/);
let table = '';
let tableRows = '';
let tableHeader = '';
rows.forEach((row, rowIndex) => {
let tableColumns = '';
let columns = row.split(','); // split/separate the columns in a row
if (rowIndex === 0) {
columns.unshift('');
} else {
columns.unshift('<button class="btn edit">Edit</button>');
}
columns.forEach((column) => {
tableColumns += rowIndex == 0 ? '<th>' + column + '</th>' : '<td>' + column + '</td>';
});
if (rowIndex == 0) {
tableHeader += `<tr id="${rowIndex}">` + tableColumns + '</tr>';
} else {
tableRows += `<tr id="${rowIndex}">` + tableColumns + '</tr>';
}
});
table += '<table>';
table += '<thead>';
table += tableHeader;
table += '</thead>';
table += '<tbody>';
table += tableRows;
table += '</tbody>';
table += '</table>';
if (csvTable.classList.contains('hidden')) {
csvTable.classList.remove('hidden');
}
csvTable.innerHTML += table;
downloadBtn.classList.remove('hidden');
handleEvents(transactionIdsAtIndex);
}
const handleEvents = (transactionIdsAtIndex) => {
const editBtn = document.querySelectorAll('.edit');
editBtn.forEach(btn => btn.addEventListener('click', function editTransaction() {
editTransactionForm(transactionIdsAtIndex[btn.parentElement.parentElement.id]);
btn.removeEventListener('click', editTransaction);
}));
}
const editTransactionForm = (id) => {
console.log('editing')
editForm.classList.remove('hidden');
downloadMenu.classList.add('hidden');
downloadBtn.classList.add('hidden');
api.call('Get', {typeName: 'FuelTransaction', search: {id: id}}, result => {
const transaction = result[0];
volume.value = (transaction.volume / 3.785412534257983).toFixed(2);
cost.value = transaction.cost.toFixed(2);
pricePerUnit.value = (cost.value / volume.value).toFixed(2);
fuelType.value = transaction.productType;
saveBtn.addEventListener('click', function validateFormData () {
console.log('saving');
let valid = true;
if (isNaN(volume.value) || isNaN(cost.value) || isNaN(pricePerUnit.value)) {
valid = false;
popupText.textContent = 'Input must be a number';
popup.classList.remove('hidden');
} else if (!volume.value || !cost.value || !pricePerUnit.value) {
valid = false;
popupText.textContent = 'Missing input';
popup.classList.remove('hidden');
} else if (fuelType.value.length === 0) {
valid = false;
popupText.textContent = 'Must enter a fuel type';
popup.classList.remove('hidden');
}
if (valid) {
transaction.volume = Number(volume.value * 3.785412534257983);
transaction.cost = Number(cost.value);
transaction.productType = String(fuelType.value);
popupText.textContent = 'Saving...';
popup.classList.remove('hidden');
api.call('Set', {typeName: 'FuelTransaction', entity: transaction},
() => {
saveBtn.removeEventListener('click', validateFormData);
popup.classList.add('hidden');
editForm.classList.add('hidden');
downloadMenu.classList.remove('hidden');
getTransactionDetails();
},
err => {
popupText.textContent = 'Error saving transaction';
popup.classList.remove('hidden');
console.log(err)
})
}
})
})
}
1条答案
按热度按时间ergxz8rk1#
如果需要标识按钮及其关联的数据集,可以使用data属性,并在插入按钮时对其进行设置。
然后在你的函数中,你可以检查对应的数据集有哪个id。将事件传递到函数中很重要。