单击表数据列时删除表行

时间:2016-12-07 09:29:09

标签: javascript jquery html materialize

我想在点击删除时删除表格行。 为此,我在表格行中放置了<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将删除按钮链接到另一个页面。

0 个答案:

没有答案