我想在点击删除时删除表格行。
为此,我在表格行中放置了<a>
。
所以onclick
需要删除该行。
我让它适用于一组行但不适用于另一组行。
DeleteRow功能:
function DeleteRow(e) {
$(e).closest(".CollectionItem").remove()
}
适用于:
<div class="collapsible-header"><i class="material-icons">place</i>Items</div>
<div class="collapsible-body" style="margin:15px">
<div id="ItemArea">
@if (Model != null)
{
foreach (var Item in Model.Items)
{
<div class="card CollectionItem">
<div class="row" style="margin:15px">
<div class="col s10">
<input placeholder="Item" id="" name="" type="text" class="validate ItemInput" value="@Item">
</div>
<div class="col s2" style="padding-top:10px">
<a class="waves-effect waves-light btn light-blue darken-3 deleteRow valign" id="DeleteItem" onclick="DeleteRow(this)">Delete</a>
</div>
</div>
</div>
}
}
</div>
<div>
<a href="#!" class="waves-effect waves-light btn light-blue darken-3" id="AddItem" style="margin:10px">Add Item</a>
</div>
</div>
不适用于:
<table id="BuildDefinitionTable">
<thead>
<tr>
<th>Team Project</th>
<th>Build Definition</th>
<th>Drop Build</th>
</tr>
</thead>
<tbody>
@if(Model != null)
{
foreach (var BuildDefinition in Model.BuildDefinitions)
{
<tr class="CollectionItem">
<td><input type='text' readonly value="@BuildDefinition.TeamProject" style="border-bottom:none"/></td>
<td><input type='text' readonly value="@BuildDefinition.Name" style="border-bottom:none"/></td>
<td><input type='text' readonly value="@BuildDefinition.IsDropBuild.ToString()" style='border-bottom:none'/></td>
<td><a class="waves-effect waves-light btn light-blue darken-3 deleteRow valign" id="DeleteItem" onclick="DeleteRow(this)">Delete</a></td>
</tr>
}
}
</tbody>
</table>
任何人都可以看到为什么会这样,我无法通过使用href将删除按钮链接到另一个页面。