Question

我在我的项目中使用javascript。

我在HTML table <table id='idDocList'>上，我正在append在此表上执行一些html，如下面的代码所示。但是，当用户点击<tr>锚标记时，我想隐藏相应的Delete。

$("#idDocList").append("<tr><td>" + file.name + "</td><td>" + sz + "</td><td><a onclick=deleteDocument(this,'" + file.name + "')> Delete</a></td></tr>");

我如何使用Jquery做到这一点？

以下示例不起作用

function deleteDocument(CurAnchorTag, fileName) {
    $(CurAnchorTag).closest('tr').hide();
}

我不想将ID用于<a>代码，因为我有很多文档。

Answer 1

作为快速解决方案，您可以像这样使用

$(CurAnchorTag).closest('tr').hide();

用<tr>

替换tr

您可以像这样使用jquery删除内联函数调用，

$("#idDocList").on("click", "td a", function() {
    $(this).closest("tr").hide();
    var filename = $(this).closest("td").prev().text();
});

Answer 2

我建议您将代码更改为：

var newRow = $("<tr><td>" + file.name + "</td><td>" + sz + "</td><td><a href='#'> Delete</a></td></tr>").appendTo("#idDocList");
newRow.find( 'a' ).click( function( e ) {
    e.preventDefault();
    $( this ).closest('<tr>').hide();
});

Answer 3

你可以使用

$(".delete_link").click(function(){$(this).closest('tr').hide();}

Jquery将使用其中所谓的元素。 html文件上不需要onclick。

Answer 4

你最好使用事件委托并一起摆脱内联onclick处理程序：

$('#idDocList').on('click', '.btn-delete', function() {
    $(this).closest('tr').hide();
    // read filename: $(this).data('filename')
});

并将其与HTML（你追加的刺痛）一起使用：

"<tr><td>" + file.name + "</td><td>" + sz + "</td><td><a class="btn-delete" data-filename='" + file.name + "'>Delete</a></td></tr>"

注意部分：

<a class="btn-delete" data-filename="filename">Delete</a>

Answer 5

您建议您使用jquery

为类使用事件

$("#idDocList").append("<tr><td>" + file.name + "</td><td>" + sz + "</td><td><a class='delete_link'> Delete</a></td></tr>");

下面的代码将添加事件，并且需要在添加＆＃34; tr＆＃34;之后始终执行，除非您使用代理

$(".delete_link").click(function(){ $(this).closest("tr").hide() });

如果您不想使用课程，可以使用此课程

$("#idDocList td > a").click(function(){ $(this).closest("tr").hide() });

如何在javascript函数中传递`this`作为参数？

5 个答案: