时间戳

首页 > 解决方案 > 如何使链接的表格行可点击，但最后一列的行为不同？

html - 如何使链接的表格行可点击，但最后一列的行为不同？

问题描述

下面是我正在使用的代码，它演示了我想要实现的目标

<tr *ngFor="let plan of list; index as i" class="success" (click)="platDetails(plan)"> 
    <!-- the click event above takes us to the platDetails view-->
    <td>{{plan.name}}
    </td>
    <td>{{plan.test}}
    </td>
    <td> <!-- I want to allow the user to click the dropdown btn without triggering the (click) event above. currently when i try to click this drop down the click event in the tr is triggered and takes me away. -->
        <div class="input-group">
            <button type="button" class="btnTransparent" data-toggle="dropdown" aria-haspopup="true"
                aria-expanded="false">
                <i class="fa fa-ellipsis-h"></i>
                <span class="sr-only">Toggle Dropdown</span>
            </button>
            <div class="dropdown-menu dropdown-menu-right">
                <a class="dropdown-item" (click)="action(plan)">View Plan</a>
            </div>
        </div>
    </td>
</tr>

如何拆分此 tr 以允许这两个 td 或多少个 td 由 tr click 事件控制并保留最后一个 td 自己？我希望这是有道理的。

标签： htmlangularclickdom-events

解决方案

将platDetails点击事件从行移动到列并离开最后一列

<tr *ngFor="let plan of list; index as i" class="success"> 
<!-- the click event above takes us to the platDetails view-->
<td (click)="platDetails(plan)">{{plan.name}}
</td>
<td (click)="platDetails(plan)">{{plan.test}}
</td>
<td> <!-- I want to allow the user to click the dropdown btn without triggering the (click) event above. currently when i try to click this drop down the click event in the tr is triggered and takes me away. -->
    <div class="input-group">
        <button type="button" class="btnTransparent" data-toggle="dropdown" aria-haspopup="true"
            aria-expanded="false">
            <i class="fa fa-ellipsis-h"></i>
            <span class="sr-only">Toggle Dropdown</span>
        </button>
        <div class="dropdown-menu dropdown-menu-right">
            <a class="dropdown-item" (click)="action(plan)">View Plan</a>
        </div>
    </div>
</td>

推荐阅读