时间戳

首页 > 解决方案 > 无法将 HTML 结构包裹在元素周围

javascript - 无法将 HTML 结构包裹在元素周围

问题描述

我想获取带有table标签的所有元素并在其周围包装一个 HTML 结构，以便表格应该具有响应性，但由于某种原因它无法正常工作。你能告诉我我做错了什么以及为什么它不起作用吗？

AfterContentChecked() {
    this.el = document.getElementsByTagName('table');
    this.wrapper = document.createElement('div.table-responsive');
    this.el.parentNode.insertBefore(this.wrapper, this.el);
    this.wrapper.appendChild(this.el);
  }

标签： javascripthtmlangulartypescriptdom

解决方案

首先它不是AfterContentChecked。在应该是ngAfterContentChecked。但是使用ngAfterViewInit生命周期钩子代替ngAfterContentChecked你的实现。添加id属性table并getElementById改为使用getElementsByTagName. 不要table-responsive一次设置类。首先创建div元素，然后添加class.

HTML

<div>
  <table id="table" class="table">
      <thead>
        <tr>
          <th scope="col">Name</th>
          <th scope="col">Country</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>Sudarshana</td>
          <td>Sri Lanka</td>
        </tr>
      </tbody>
    </table>
</div>

TS

  ngAfterViewInit() {
    this.el = document.getElementById('table');
    this.wrapper = document.createElement('div');
    this.wrapper.classList.add('table-responsive');
    this.el.parentNode.insertBefore(this.wrapper, this.el);
    this.wrapper.appendChild(this.el);
  }

StackBlitz 演示

推荐阅读