JS: diminution compteur, à cacher()

Question

Si j'ai une

normale

<?php echo "Today (".mysql_num_rows($query)."); ?> 

qui se révèle comme aujourd'hui (10) s'il y a 10 lignes.

Maintenant, sous ce compteur, j'ai un while() qui sort toutes les lignes à l'intérieur d'un <tr>.

Dans un <td> à l'intérieur du tr j'ai ce bouton de suppression, qui se cache le plus proche «tr».

Comment puis-je quand vous cachez le 'tr' le Aujourd'hui (10) va diminuer à Aujourd'hui (9)?

-

Je ne pense pas que son possible avec le contre-courant (de mysql_num_rows), mais peut-être si vous comptez combien de « tr » il y a, dans le Today(), vous pourriez faire quelque chose qui diminue, mais Je ne sais pas comment faire cela. Bien que ce soit juste une pensée ..

Answer 1

vous pouvez faire quelque chose comme ceci:

$('.deleteButton').click(function() { 
    var curn = parseInt($('.counter').text(), 10); 
    if(curn - 1 >= 0) 
     $('.counter').text(curn - 1); 
}); 

et de changer votre écho

<?php echo "Today (<span class='counter'>".mysql_num_rows($query)."</span>)"; ?> 

Answer 2

Enroulez le nombre de sorte que vous pouvez sélectionner facilement:

<?php echo 'Today (<span id="number">'.mysql_num_rows($query).'</span>)'; ?> 

Puis, quand un bouton de suppression est cliqué:

// Get the number element once 
var num = $('#number'); 

// Set an onclick event on your button 
$('.delete').click(function(){ 

    // Find the closest table row and remove it 
    $(this).closest('tr').remove(); 

    // num.text() will get the text inside the number element 
    // parseInt is used to convert it from string to int 
    // subtract 1 to update the number 
    var newNumber = parseInt(num.text(), 10) - 1; 

    // And set the new number text 
    num.text(newNumber); 

    // Stop the default browser action - might cause the page to reload or to scroll 
    return false; 
}); 

Answer 3

Alter votre PHP en conséquence:

<?php echo 'Today (<span class="counter">' . mysql_num_rows($query) . '</span>)'; ?> 

Et quelque chose comme ceci pour votre bouton de suppression:

$('#theTable').delegate('button.delete', 'click', function (event) { 
    $(this).closest('tr').slideUp(); 

    $('span.counter').text(function (index, val) { 
     return (parseInt(val, 10) - 1); 
    }); 

    event.preventDefault(); 
}); 

Notez l'utilisation de delegate: Il est beaucoup plus efficace que ce serait bind un gestionnaire d'événements à chaque bouton de suppression.

Vous devrez modifier le sélecteur pour votre table et votre bouton de suppression en conséquence.

Answer 4

Sortie de votre compteur à un var JavaScript et l'utiliser dans votre boucle et appel de la fonction Today(). Je suppose que vous essayez de sortir un appel de fonction côté client à partir du serveur?

 <?php echo "var count=".mysql_num_rows($query).";Today(count);" ?> 

Dans votre compteur de suppression de gestionnaire et décrément appel Aujourd'hui (chiffre) à nouveau.

Answer 5

essayer à l'adresse: http://jsfiddle.net/xMZgv/7/

Today(<span id="counter">3</span>) 

<table> 
    <tr><td>hello</td><td>delete</td></tr> 
    <tr><td>world</td><td>delete</td></tr> 
    <tr><td>hi</td><td>delete</td></tr> 
</table> 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.js"></script> 
<script> 

    $(function() { 
     $('table tr').find('td:last').click(function() { 
      $(this).parent().remove(); 
      $('#counter').html($('#counter').html() - 1) 
     }) 
    }) 

</script>