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

使ってみてclosest('tr').remove()

于 2013-08-26T16:45:44.750 に答える
0

これを試して

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">

編集/削除 

 <?
    $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 に答える