jQuery ile bu satırın belirli td tıklama satır kaldırmak

3 Cevap php

i bir tablo var

<table class="oldService">
    <thead>
           <th>name</th>
           <th>age</th>
           <th>action</th>
    </thead>    
    <tbody>
    <?php foreach($array as $k=>$v){ ?>       
          <tr>
              <td><?php echo $k[name] ?></td>
              <td><?php echo $k[age]?></td>
              <td id="<?php $k[id]" class="delme">X</td>
          </tr>
    <?php } ?>        
    </tbody>
<table>

now i want to delete any row by clicking on X of each row except first and last row, and also need to confirm before deletion.

i jquery altında kullanılan

<script type="text/javascript">
jQuery(document).ready(function(){
    jQuery('table.oldService>tbody tr').not(':first').not(':last').click(function(){
    if(confirm('want to delete!')){
    jQuery(jQuery(this).addClass('del').fadeTo(400, 0, function() { 
            jQuery(this).remove()}));
    jQuery.get('deleteService.php', {id:jQuery(this).attr('id')});
    }
    else return false;});
});

</script>

this is working perfect,but it execute by click on that row( means any td), i want that this event only occour when user click on X(third td) . please suggest me how to modify this jquery so that the event occur on click of X.

UPDATE: i want that minimum one row should be in tbody, means if there is only one row then no function to delete that row, and if there is many rows then any row he can delete but not the all rows.

3 Cevap

Böyle biraz daha az kodla yapabilirsiniz:

jQuery('table.oldService').delegate('td.delme', 'click', function() {
    if(jQuery(this).parent().siblings(":not(.del)").length === 0) return;
    if(!confirm('want to delete!')) return;

    jQuery.get('deleteService.php', { id:this.id });
    jQuery(this).parent().addClass('del').fadeTo(400, 0, function() {
        jQuery(this).remove();
    });
});​

Bu yerine 1 Günde kişi başına <td> tablosu için bir olay işleyicisi ekler. Silinmez kalan herhangi kardeşler (son silinmesini önlemek) varsa önce biz kontrol edin. Onlar onaylamak eğer kontrol edin, sonra satırı silin.

Ayrıca yayınlanan soru dayalı bir kaç html düzeltmeleri gerekir. Son etiket </table> yerine <table> olması, ve <thead> {[sarılmış gereken (bu <td> elemanları gerekiyor 4)]}. Eğer herhangi bir sorun, you can see a working demo of this here varsa bana bildirin.

Ben tüm animasyon ve AJAX mantığı, ama burada genel olarak bu yapabileceğini nasıl etmedi:

$(function() {
    $('table.oldService td.delme:not(:first):not(:last)').click(function() {
       $(this).closest('tr').remove(); 
    });
});

Ayrıca, ben çok JSLint ile kodunuzu çalıştırmanızı öneririz. Deftere kod örneği içinde hatalar büyük bir numarası vardır.

Bu deneyin:

    <script type="text/javascript">
        jQuery(document).ready(function(){
    jQuery('table.oldService>tbody tr img.delete').not(':first').not(':last').click(function () {
        if(confirm('want to delete!'))
        {
          jQuery(jQuery(this).addClass('del').fadeTo(400, 0, function() { 
                jQuery(this).parent().parent().remove()}));
          jQuery.get('deleteService.php', {id:jQuery(this).attr('id')});
        }
        else return false;});
    });
</script>

html:

<table class="oldService">
        <thead>
               <th>name</th>
               <th>age</th>
               <th>action</th>
        </thead>    
        <tbody>
        <?php foreach($array as $k=>$v){ ?>       
              <tr>
                  <td><?php echo $v['name'] ?></td>
                  <td><?php echo $v['age']?></td>
                  <td><img id="<?php echo $v['id']?>" class="delete" src="del.gif" /></td>
              </tr>
        <?php } ?>        
        </tbody>
<table>

etiketler