1

我的 html 表单中有一个动态表，它具有添加/删除行的功能。每个元素的名称都在其末尾附加一个数字，指定行号（例如 ID.0 、 ID.1 等）。我编写了这个函数来尝试删除每一行以及更新每个元素的名称：

function remove() {

    var theName=getItemNames();
    var counter=theName.length;
    var index=0;

    f.preventDefault();
    $(this).parents("tr").remove();
    counter--;

    $('input[name*="Id."]').each(function()   {

        $(this).attr("name", "Id."+index);
        index++;
    });
    $('input[name*="Date."]').each(function()   {

        $(this).attr("name", "Date."+index);
        index++;
    });
    $('input[name*="Value."]').each(function()   {

        $(this).attr("name", "Value."+index);
        index++;
    });
    $('input[name*="Required."]').each(function()   {

        $(this).attr("name", "Required."+index);
        index++;
    });

}

但是，这只会删除删除按钮，而不是我预期的整行。谁能看到我做错了什么？

4

4 回答 4

2

假设你的桌子看起来像这样

<table>
    <tbody>
        <tr>
            <td></td>
            <td>col2</td>
            <td><input type="button" name="x" value="x" /></td>
        </tr>
        <tr>
            <td>col1</td>
            <td>col2</td>
            <td><input type="button" name="x" value="x" /></td>
        </tr>
    </tbody>
</table>

只需使用

$("input.btn" ).click(function(event) {
    $(this).parent().parent().remove();
});

或者

 $( "input.btn" ).click(function(event) {
        $(this).closest("tr").remove();
    });

因为你正在做的是去父母那里是 tr 然后寻找一个 tr

如果您的表格是由 javascript 呈现的，您可能还需要更改您的点击

$("input.btn" ).on(click, function(){
     $(this).closest("tr").remove();
});
于 2013-08-26T16:54:54.137 回答
1

这里的问题是您命名的函数remove根本不会触发您的函数。它触发内部remove功能，因此按钮被删除。

尝试将函数重命名为removeIt或不存在的东西。然后你可以让它工作。

同样，每当您尝试调用 removeIt 时，请这样做：onclick="removeIt(this)"并像removeIt(elem).

现在你可以做一个$(elem).parents('tr').remove():)

工作示例在这里。

干杯!

于 2013-08-26T16:55:18.830 回答
0

try this

Javascript

$(document).ready(function(){
$(".showaction").tipsy({gravity:'e'});

$(".deletenews") .click(function(){
var id_news = $(this).attr('rel');

var s = {
"id_news":id_news
}
$.ajax({
url:'delete_news.php',
type:'POST',
data:s,
beforeSend: function (){
        $(".loading[rel="+id_news+"]") .html("<img src=\"style/img/add.gif\" alt=\"Loading ....\" />");
        },
success:function(data){
$("tr[rel="+id_news+"]") .hide();
}
});
return false;
});




});

php

<table align="center" width="80%" cellpadding="0" cellspacing="0">
<tr>
<td colspan="2" class="td3">
news
</td>
</tr>
<tr>
    <td width="70%" class="td1">
title
    </td>
    <td width="20%" class="td1">

edit / remove 

 <?
    $select2 = $mysqli->query("SELECT * FROM news ORDER BY id  DESC LIMIT  20 ");
    $num2 = $select2->num_rows;
    while ($rows2 = $select2->fetch_array(MYSQL_ASSOC)){

$id_news2       = $rows2 ['id'];
$title_news2       = $rows2 ['title'];
$pic_news2       = $rows2 ['pic'];
$news_news2       = $rows2 ['news'];
?>
<tr rel="<? echo $id_news2; ?>">
    <td width="70%" class="td1">
<? echo $title_news2;  ?>
    </td>
    <td width="20%" class="td1">
<a href="edit_news.php?id=<? echo $id_news2; ?>"><img src="style/img/edit.gif" class="showaction" title="Edit" /></a> / <a rel="<? echo $id_news2; ?>" class="deletenews" href="#"><img src="style/img/del.gif" class="showaction" title="remove" /></a>
<span class="loading" rel="<? echo $id_news2; ?>"></span>
    </td>
</tr>
<tr>
<?
}
?>
</table>
于 2013-08-26T16:50:18.940 回答
0

尝试使用closest('tr').remove()

于 2013-08-26T16:45:44.750 回答