Как удалить всю таблицу с помощью JavaScript?

1

У меня есть таблица календаря, которая показывает всю дату месяца, если пользователь выбрал следующий месяц или предыдущий, мне нужно удалить всю таблицу и заменить новую таблицу в том же месте, в то время как каждая таблица загружается под другой, потому что Я не могу заставить это работать.

Мне нужно удалить таблицу из календарных дат. но мне не повезло. Я использовал 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;
    }
  • 1
    Я предлагаю вам использовать фрагмент кода, вы хотите быстрый ответ.
  • 0
    Где HTML? Вы заметили, что можете сделать свой код работоспособным? Гораздо проще помочь, если у вас запущен код.
Показать ещё 2 комментария
Теги:

2 ответа

0
Лучший ответ
  • Метод 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>
  • 0
    Хорошо, я попробую этот, я дам вам знать, если это работает
  • 0
    Обязательно посмотрите мои последние изменения
Показать ещё 1 комментарий
0

#calendar-dates содержит другие html, чем таблицы? Если нет, вы можете установить innerHtml на пустой

var calendarDates = document.getElementById("calendar-dates");

calendarDates.innerHtml = '';
calendarDates.appendChild(calendar);
  • 0
    нет это единственный стол
  • 0
    Так что попробуйте этот код, это должно помочь
Показать ещё 2 комментария

Ещё вопросы

Сообщество Overcoder
Наверх
Меню