angular - 如何将图标从一个 td 移动到另一个 td
问题描述
我在表格的按钮中有一个图标。我想在单击按钮时将此图标移动到下一个 td。我不知道如何在角度上做到这一点。
<table border="1px">
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td><i class="fa fa-arrow-right"></i></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
解决方案
有很多方法可以实现这一点,但最简单的方法是将图标隐藏在一个地方并显示在另一个地方。
对于 EX:
<table border="1px" (click)="clicked()">
<tr>
<td [ngClass]="{'random': counter == 0}">www</td>
<td [ngClass]="{'random': counter == 1}">www</td>
<td [ngClass]="{'random': counter == 2}">www</td>
<td [ngClass]="{'random': counter == 3}">www</td>
</tr>
<tr>
<td>yyyyy</td>
<td>yyyyy</td>
<td>yyyyy</td>
<td>yyyyy</td>
</tr>
</table>
// In your typescript
counter = 0;
clicked() {
this.counter < 4? this.counter++: this.counter = 0;
}
//In your css
.random {
background-color: green;
}
推荐阅读
- c# - 修复 iTextSharp 的错误(PDF 到文本)?
- testing - 如何使用 React Hooks 测试库测试 useEffect 中的回调调用
- python - 加快读取和操作 30,000 个 csv 文件
- python-3.x - 0-1 背包问题 Python:为什么我们返回最大值
- php - 如果给定键的值匹配,则将一个数组元素添加到另一个数组中
- java - 如何使用 Java 和 JMX 获取连接到 ActiveMQ 的消费者数量?
- javascript - 为什么当 Inspector 打开时,Chrome 中的 e.touches[] 会更快?
- javascript - 无法使用elementor中的javascript使按钮旋转其父列
- arrays - Flutter 将数组保存到 SharedPreferences
- reinforcement-learning - Sutton 的 RL 书中的 Gridworld:如何计算角单元的值函数?