1 pièce(s) jointe(s)
Ajouter une colonne à un tableau en Javascript
Salut!
J'ai un simple tableau qui est de base à 3 colonnes, et 2 lignes.
Pièce jointe 220688
Voici son code HTML :
Code:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26
| <FORM id="form_qte">
<TABLE id="qte" name="qte" border="1" style="background-color:FFFFFF;border-collapse:collapse;border:1px solid FFCC00;color:000000;width:100%" cellpadding="0" cellspacing="0">
<TR align="center" style="font-weight:bold;background-color:C5C5C5" id="Row1">
<TD>1</TD>
<TD>2</TD>
<TD></TD>
<TD>T</TD>
</TR>
<TR height="210" style="background-color:F6F5F5" id="Row2" >
<div id="div_qte">
<TD>
<input name="1" id="1" align="justify" type="number_format" size="2" class="tot_auto_qte" onkeypress="return isNumberKey(event)" />
</TD>
<TD>
<input name="2" id="2" align="justify" type="number_format" size="2" class="tot_auto_qte" onkeypress="return isNumberKey(event)" />
</TD>
<TD>
<input name="" id="" align="justify" type="number_format" size="2" onkeypress="return isNumberKey(event)" />
</TD>
<TD>
<input name="T" id="T" align="justify" type="number_format" size="4" onkeypress="return isNumberKey(event)" disabled="disabled" />
</TD>
</div>
</TR>
</TABLE>
</FORM> |
Avec celui-ci s'accompagne un script en Javascript permettant d'ajouter une colonne lorsque l'utilisateur appuie sur le bouton " + " :
Code:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19
| <!-- Détecte et gère l'action sur le clic sur le bouton " but_add_col " -->
<script>
$(document).ready(function add_col() {
var myform = $('#form_qte'),
iter = 0;
$('#but_add_col').click(function () {
myform.find('tr').each(function(){
var trow = $(this);
if(trow.index() === 0){
trow.append('<td>'+iter+'</td>');
}else{
trow.append('<td><input name="'+iter+'" id="'+iter+'" align="justify" type="number_format" size="2" onkeypress="return isNumberKey(event)" /></td>');
}
});
});
});
StkFunc(add_col);
</script> |
Ce script fonctionne presque à merveille. Il ajoute la colonne mais elle disparaît presque instantanément. Si vous avez besoin de plus d'infos n'hesitez pas ! :)