У меня есть таблица календаря, которая показывает всю дату месяца, если пользователь выбрал следующий месяц или предыдущий, мне нужно удалить всю таблицу и заменить новую таблицу в том же месте, в то время как каждая таблица загружается под другой, потому что Я не могу заставить это работать.
Мне нужно удалить таблицу из календарных дат. но мне не повезло. Я использовал removechild ("tb"), но не работал, я также попробовал var test = document.getElementById("calendarDates"); test.removeChild(test.childNodes [0]);
Вот код таблицы:
document.getElementById("calendar-dates").appendChild(calendar);
Таблица:
//add calendar table
function get_calendar(day_no, days, m , y){
var table = document.createElement('table');
table.id = "tb";
var tr = document.createElement('tr');
//row for the day letters
for(var c=0; c<=6; c++){
var td = document.createElement('td');
td.innerHTML = "SMTWTFS"[c];
tr.appendChild(td);
}
table.appendChild(tr);
//create 2nd row
tr = document.createElement('tr');
var c;
for(c=0; c<=6; c++){
if(c == day_no){
break;
}
var td = document.createElement('td');
td.innerHTML = "";
tr.appendChild(td);
}
var count = 1;
for(; c<=6; c++){
var td = document.createElement('td');
td.innerHTML = count;
td.style.cursor = "pointer";
td.id = count;
td.onclick = function () {
m = m + 1;
document.getElementById("cDD").value = this.id + "/" + m + "/" + y;
document.getElementById("calendar-container").style.display = "none";
};
count++;
tr.appendChild(td);
}
table.appendChild(tr);
//rest of the date rows
for(var r=3; r<=7; r++){
tr = document.createElement('tr');
for(var c=0; c<=6; c++){
if(count > days){
table.appendChild(tr);
return table;
}
var td = document.createElement('td');
td.innerHTML = count;
td.style.cursor = "pointer";
td.id = count;
td.onclick = function () {
m = m + 1;
document.getElementById("cDD").value = this.id + "/" + m + "/" + y;
document.getElementById("calendar-container").style.display = "none";
};
count++;
tr.appendChild(td);
}
table.appendChild(tr);
}
return table;
}
removeChild
принимает узел, а не идентификатор.test.removeChild(test.childNodes[0]);
вероятно, не работает, потому что перед таблицей есть некоторые текстовые узлы. test.removeChild(test.firstElementChild)
вероятно, будет работать document.getElementById("calendar-dates").removeChild(document.getElementById('tb'))
document.querySelector('button').addEventListener('click', () => {
document.getElementById('wrapper').removeChild(document.querySelector('table'));
})
table, th, td {
border: 1px solid red;
padding: 2px
}
<div id="wrapper">
<table>
<tr>
<td>Table</td>
<td>Content</td>
</tr>
</table>
</div>
<button>Remove table</button>
#calendar-dates
содержит другие html, чем таблицы? Если нет, вы можете установить innerHtml
на пустой
var calendarDates = document.getElementById("calendar-dates");
calendarDates.innerHtml = '';
calendarDates.appendChild(calendar);