Question

我的部分视图不是强类型的。它是动态的：

<%@ Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl<dynamic>" %>

<%@ Import Namespace="Student.Models" %>

<div>
<table id="TA">
        <tr>
            <th>Teaching Assistant</th>
            <th>Course ID</th>
            <th>Day</th>
            <th>Delete Row</th>
        </tr>
</table>
</div>

<div>
<table id="StudentAction">
    <tr>
       <td><select name="TeachingAssistant"></select> </td>
       <td><select name="CourseID"></select></td>
       <td><select name="Day"></select></td>
       <td><input name="delete" type="image" src="/delete.png"  onclick="javascript:delete('this')"/></td>
   </tr>

</table>
</div>

现在每次从＆＃34; TeachingAssistant＆＃34;中选择一个新值时，我都会使用JQuery添加一个新行。选择清单。

此外，还有一个删除图像，点击该图像应删除该特定行。如何根据单击的删除图像识别特定行？例如，如果单击第三行的删除图像，那么如何识别第三行并将其发送给JQuery？对于例如我想识别单击删除图像的行，并将其发送到下面的JQuery中的删除功能，使用＆＃34;这个＆＃34;不起作用，有没有其他方法这样做？再次，这不是一个强烈的类型视图，它的动态。

function delete(val) {

    $(this).parent().remove();

}

任何帮助都将不胜感激。

Answer 1

添加一些类来触发事件。

<td><input name="delete" type="image" src="/delete.png" class="delete"/></td>

然后使用closest获取其行。

$('#StudentAction').on('click', '.delete', function() {
    $(this).closest('tr').remove();
});

demo

或旧版本：

$('#StudentAction .delete').live('click', function() {
    $(this).closest('tr').remove();
});

Answer 2

如果deleteThis函数是在与您的表相同的html页面中定义的。然后应该工作。

/* This will send the table row to deleteThis function */
<td>
    <input type =".." onclick="javascript:deleteRow($(this).parent().parent())"/>
</td>

$(this)引用input元素，此输入元素的父级为您提供td，td的父级为您提供tr。

function deleteRow(val) {
    $(val).remove();

}

如果您的deleteThis函数是在外部.js文件中定义的，请检查here。

由于你想将tr元素传递给函数，我提出了这个解决方案。但是，$(this).parent().parent()看起来很丑陋。我建议使用Ricardo Lohmann的解决方案。

使用JQuery在动态局部视图中标识特定行

2 个答案: