Я исправил ваш код, вот UPDATED_FIDDLE
HTML
Я изменил вход элемент для вызова updateTable () и передачи дополнительного аргумента this.
JS
Я создал новый функция с именем updateTable () принимает те же два параметра, что и addTable (), плюс получает элемент this и сохраняет его как thisCheckbox.
updateTable () проверяет, является ли таблица пустой. Если это так, он вызывает addRow () и передает параметры vid и tid.
Также, чтобы быть в безопасности, устанавливает для «флажка» состояние флажка в значение true (поэтому флажок будет установлен в пользовательском интерфейсе).
Если таблица не пуста, updateTable ( ) вызывает delRow () и передает ему элемент таблицы. Это также гарантирует, что флажок снят.
Функция addRow (), я не изменил.
Функция delRow () - это просто while l oop, которая удаляет все строка таблицы, пока она не станет пустой.
Надеюсь, это поможет! Дайте знать, если у вас появятся вопросы. :)
var t_names = ["1table-body", "2table-body", "3table-body", "4table-body"];
var counter = [0, 0, 0, 0];
function updateTable(vid, tid, thisCheckbox) {
var t_string = t_names[tid];
var tableBody = document.getElementById(t_string);
//check if table is empty
if (tableBody.rows.length === 0) {
//table is empty so regardless of checkbox state
//checkbox needs to be checked now as we are going
//to add the row
thisCheckbox.checked = true;
addRow(vid, tid);
} else {
//table is not empty so make sure checkbox is unchecked
//then remove the row
thisCheckbox.checked = false;
delRow(tableBody);
}
}
function delRow(tableBody) {
while (tableBody.rows.length > 0) {
tableBody.deleteRow(0);
}
}
function addRow(v_id, t_id) {
var t_string = t_names[t_id];
console.log(t_string)
var tableBody = document.getElementById(t_string);
//find last row
var row = tableBody.rows[tableBody.rows.length - 1];
//if the row has six cells or there are no rows create a new one
if (row === null || row === undefined || row.cells.length >= 6) {
row = document.createElement("tr");
tableBody.appendChild(row);
}
//create new cell
var th = document.createElement("th");
//add data to cell
th.innerHTML = document.getElementById(v_id).innerHTML;
//add cell to row
row.appendChild(th);
}