时间戳

首页 > 解决方案 > 如何向表 td 添加新类？

angular - 如何向表 td 添加新类？

问题描述

我有如下表结构。我想使用类配置文件将一个新类添加到 td next 中，并在单击按钮时删除上一个类。我知道如何使用 jquery 来做到这一点，但我正在尝试 angular 4。有人可以帮助我吗？

<table>
        <tr>
            <td></td>
            <td class="profile"></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td></td>
            <td></td>
            <td></td>
            <td class="profile"></td>
            <td></td>
        </tr>
        <tr>
            <td class="profile"></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td class="profile"></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
    </table>

标签： angular

解决方案

您可以在 typescript 中操作 DOM 元素。我提供了一个最简单的例子来说明你如何做到这一点。

单击按钮，获取具有“profile”类名称的所有元素的列表。循环遍历它们以首先将类分配给下一个兄弟，然后将其从现有的 td 中删除。

文件.component.html

<button (click)="btnClick()">click</button>

文件.component.ts

    btnClick(){
    let elements: HTMLCollectionOf<Element> =  
   document.getElementsByClassName("profile");
        for(let i=0; i<= elements.length-1; i++){
          elements[i].nextSibling.className = "profile";
          elements[i].className = "";
        }
      }

推荐阅读