Question

我有一个日历表，显示整个月的日期，如果用户选择查看下个月或之前我需要删除整个表并在同一个地方替换新表，此时每个表都在下面加载另一个因为我无法让它发挥作用。

我需要从日历日期中删除表格。但我没有运气。我使用 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;
    }

Answer 1

#calendar-dates是否包含除表格之外的其他HTML？如果没有，您可以将innerHtml设置为空

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

calendarDates.innerHtml = '';
calendarDates.appendChild(calendar);

Answer 2

removeChild方法采用节点，而不是ID。
test.removeChild(test.childNodes[0]);可能无法正常工作，因为您在表格之前有一些文本节点。
- test.removeChild(test.firstElementChild)可能会起作用

document.getElementById("calendar-dates").removeChild(document.getElementById('tb'))

＆＃13;

document.querySelector('button').addEventListener('click', () => {
  document.getElementById('wrapper').removeChild(document.querySelector('table'));
})

＆＃13;

table, th, td {
    border: 1px solid red;
    padding: 2px
}

＆＃13;

<div id="wrapper">
  <table>
    <tr>
      <td>Table</td>
      <td>Content</td>
    </tr>
  </table>
</div>
<button>Remove table</button>

＆＃13;

如何使用javascript删除整个表？

2 个答案: