jquery - jqueryテーブル行を削除

Question

私はテーブルを持っています

<table id="favoriteFoodTable">
    <th>
        Food Name:
    </th>
    <th>
        Restaurant Name:
    </th>
    <th>

    </th>
    <?php while ($row = $foods->fetch()) {
        ?>
        <tr>
            <td>
                <?php echo $row['foodName']; ?>
            </td>
            <td>
                <?php echo $row['restaurantName']; ?>
            </td>
            <td>
                <a class="deleteLink" href="" >delete</a>
            </td>
        </tr>
    <?php } ?>
</table>

私はこのjquery関数を使用しているので、ユーザーが削除をクリックすると、行の背景が変更され、行が削除されます

$(document).ready(function() {
    $("#favoriteFoodTable .deleteLink").on("click",function() {
        var td = $(this).parent();
        var tr = td.parent();
        //change the background color to red before removing
        tr.css("background-color","#FF3700");

        tr.fadeOut(400, function(){
            tr.remove();
        });
    });
});

背景だけが変わっているのに行が削除されていないのはなぜですか？の解き方？

Answer 1

行は削除されますが、クリックするとリンクをたどるので、ページが更新されるとすぐに復元されます。

デフォルトの動作を防ぐために、コールバックの最後にreturn false;またはを追加します。event.preventDefault();

$(document).ready(function() {
    $("#favoriteFoodTable .deleteLink").on("click",function() {
        var tr = $(this).closest('tr');
        tr.css("background-color","#FF3700");
        tr.fadeOut(400, function(){
            tr.remove();
        });
        return false;
    });
});

デモンストレーション

closest私はより信頼性の高いコードを使用したことに注意してください。別の要素が間にあるtr場合でも、は見つかります。

Answer 2

あなたがするのを忘れたのはあなたのリンクにハッシュを設定することです。例：

<a class="deleteLink" href="" >delete</a>

する必要があります

<a class="deleteLink" href="#" >delete</a>

また

return false;

あなたの終わりに

$(document).ready(function() {
    $("#favoriteFoodTable .deleteLink").on("click",function() {
        ...
        return false;
    });
});

Answer 3

別のオプションがあります。

function DeleteRowOfProductTable(productID){
    $('#YourTableId tr').each(function (i, row) {
        var $row = $(row);
        var productLabelId =  $row.find('label[name*="Product_' + productID + '"]');

       var $productLabelIdValue = $productLabelId.text();
       if (parseInt(productID) == parseInt($productLabelIdValue))
       {
           $row.remove(); 
       }
    });
 }

Answer 4

テーブル内の1行のみを一度に選択する場合

$("#data tr").click(function() {
    var selected = $(this).hasClass("highlight");
    $("#data tr").removeClass("highlight");
    if(!selected)
            $(this).addClass("highlight");

Answer 5

試す

var tr = $(this).closest('tr');
tr.detach();

私のために働いた！