JQuery와 삭제 테이블 행

Question

내가 삭제에 대한 사용자의 클릭이 행의 배경이 변경되고 행이 다음 삭제됩니다 그래서이 JQuery와 기능을 사용

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

테이블을 가지고

$(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; 
    }); 
}); 

Demonstration

내가 더 신뢰할 수있는 코드 closest를 사용 참고 : 다른 요소의 사이에 오면, tr은 여전히 ​​발견됩니다.

Answer 2

잊어 버린 것은 링크에 해시를 설정하는 것입니다. 예 :

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

은

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

Answer 3

의 말에

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

또는

return false; 

가 여기에 또 다른 옵션이 있어야합니다.

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