2010-06-30 16 views
1

De ma sélection sur la droite, je construis (clone) dynamiquement un ensemble de lignes à gauche. Là, j'ajoute aussi un bouton REMOVE. Je ne peux pas appeler une fonction jQuery à partir de ce bouton. Aussi en cliquant sur le bouton REMOVE, comment puis-je mettre la case à cocher de la rangée respective sur la droite à son état précédent (cochée). Il y a tout le code ci-dessous. Merci.jQuery - ajouter/supprimer des lignes de tableau

Exemple </script>

<script type="text/javascript"> 
$(document).ready(function(){ 

    $("#row_remove").click(function() {  
    alert("1"); 
    }); 

$('#tb11 tr') 
.filter(':has(:checkbox:checked)') 
.addClass('selected') 
.end() 
    .click(function(event) { 
    //alert("1"); 

    $(this).toggleClass('selected'); 

     if (event.target.type !== 'checkbox') { 

      $(':checkbox', this).attr('checked', function() { 

       if ($(this).is(":checked")) 
       { 
        $(this).closest("tr").clone().appendTo("#tbl2").append("<label><input type='text' name='textfield' id='textfield'/></label><button id='row_remove'>remove</button>"); 

        //ac 1 
        var findCheckBox = $("#tbl2 input:checkbox.chkclass"); 
        findCheckBox.remove(); 

       } 
       else 
       { 
        var index = $(this).closest("tr").attr("id"); 
        var findRow = $("#tbl2 tr[id='" + index + "']"); 
        findRow.remove(); 
       } 

      return !this.checked; 

      }); 
     } 
    }); 

}); 
</script> 

<style type="text/css"> 

table { 
    text-align: center; 
} 
.right { 
    text-align: left; 
} 
.right { 
    text-align: left; 
} 

    article, aside, figure, footer, header, hgroup, 
    menu, nav, section { display: block; } 

</style> 
</head> 

<body> 
<table width="100%" border="0" cellpadding="4"> 
    <tr> 
    <td width="32%" rowspan="3" valign="top" bgcolor="#EAEAEA"> 

    <table width="100%" border="0"> 

     <tr id="tbl2" width="100%"> 
     <!-- <td height="101" valign="top" bgcolor="#FFFFFF" class="right">&nbsp;</td>--> 
     </tr> 
    </table></td> 
    <td width="1%" bgcolor="#EAEAEA">&nbsp;</td> 
    <td width="67%" colspan="3" rowspan="3" valign="top" bgcolor="#EAEAEA"> 

    <table id="tb11" width="100%" border="0"> 
    <tbody> 
     <tr id="1"> 
     <td width="5%" height="20" valign="top" bgcolor="#FFFFFF"><input type="checkbox" class="chkclass" value="yes" checked="checked" /></td> 
     <td width="95%" valign="top" bgcolor="#FFFFFF" class="right">item 1</td> 
     </tr> 
     <tr id="2"> 
     <td width="5%" height="20" valign="top" bgcolor="#FFFFFF"><input type="checkbox" class="chkclass" value="yes" checked="checked" /></td> 
     <td width="95%" height="20" valign="top" bgcolor="#FFFFFF" class="right">item 2</td> 
     </tr> 
     <tr id="3"> 
     <td width="5%" height="20" valign="top" bgcolor="#FFFFFF"><input type="checkbox" class="chkclass" value="yes" checked="checked" /></td> 
     <td width="95%" height="20" valign="top" bgcolor="#FFFFFF" class="right">item 3</td> 
     </tr> 
     <tr id="4"> 
     <td width="5%" height="20" valign="top" bgcolor="#FFFFFF"><input type="checkbox" class="chkclass" value="yes" checked="checked" /></td> 
     <td width="95%" height="20" valign="top" bgcolor="#FFFFFF" class="right">item 4</td> 
     </tr> 
     <tr id="5"> 
     <td width="5%" height="20" valign="top" bgcolor="#FFFFFF"><input type="checkbox" class="chkclass" value="yes" checked="checked" /></td> 
     <td width="95%" height="20" valign="top" bgcolor="#FFFFFF" class="right">item 5</td> 
     </tr> 
     </tbody> 
    </table> 

    </td> 
    </tr> 
    <tr> 
    <td bgcolor="#EAEAEA">&nbsp;</td> 
    </tr> 
    <tr> 
    <td bgcolor="#EAEAEA">&nbsp;</td> 
    </tr> 
</table> 

</body> 
</html> 

Répondre

1

valeur d'attribut ID d'élément doit être unique !!! Rappelez-vous ceci pour toujours!

Découvrez clone() docs. Cette méthode a un paramètre facultatif "withDataAndEvents" qui est faux par défaut.

Questions connexes