Forum d'entraide PHPFrance

Venez poser vos questions PHP, MySQL, HTML5, CSS, Javascript, Gestion de serveurs à la communauté PHPfrance
https://forum.phpfrance.com/

Ajout de div et de lignes

https://forum.phpfrance.com/viewtopic.php?f=7&t=272698

Page 1 sur 1

Ajout de div et de lignes

Posté : 29 déc. 2014, 22:14
par dayou05
Bien le bonjour à tous !
Alors voilàa j'explique mon but afin de répondre a un cahier des charges concernant une société : J'a un tableau, et à chaque clique sur le boutton + entourer en rouge je voudrais que cela m'ajoute une ligne entourer en rouge à chaque cliques en JS ou JQUERY ....
Je ne sais pas du tout comment m'y prendre ..
Un grand merci à vous !
tab.png
Voici mon code actuel : 
<!DOCTYPE html>
<html>
<body>
<head>

  <meta charset="UTF-8">

  <title>CodePen - Minimal Flat Table Design</title>

<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js'></script>
 
		<link rel="stylesheet" type="text/css" href="animate.css" media="screen" />
    <style type="text/css">

        html {
            height: 100%;
            width: 100%;
        }

        body {
            font-family: 'PT Sans', Tahoma, Arial, serif;
            line-height: 13px
        }

    </style>
	<link rel="stylesheet" type="text/css" href="css/style.css" media="screen" />
	 <link rel="stylesheet" type="text/css" href="buttons.css"/>
[javascript]
<script type='text/javascript'>

// On attend que la page soit chargée
jQuery(document).ready(function()
{
// On cache la zone de texte
jQuery('#sForm').hide();
// toggle() lorsque le lien avec l'ID #toggler est cliqué
jQuery('.button.plusTd').click(function()
{
jQuery('#sForm').toggle(400);
return false;
});
});
/* ]]> */

// On attend que la page soit chargée
jQuery(document).ready(function()
{
// On cache la zone de texte
jQuery('#sForm').hide();
// toggle() lorsque le lien avec l'ID #toggler est cliqué
jQuery('.button.plusTd2').click(function()
{
jQuery('#sForm').toggle(400);
return false;
});
});
/* ]]> */



// On attend que la page soit chargée
jQuery(document).ready(function()
{
// On cache la zone de texte
jQuery('#sFormadd').hide();
// toggle() lorsque le lien avec l'ID #toggler est cliqué
jQuery('.button.plusTd1').click(function()
{
jQuery('#sFormadd').toggle(400);
return false;
});
});
/* ]]> */

</script>
[/javascript] 
</head>

<?php
/* ------------------ CASE A COCHER ------------------ */
 // connexion
$mysql_user="admin";
$mysql_password="admin";
$reqco = mysql_connect("localhost",$mysql_user,$mysql_password);

//sélection de la BDD
$reqse = mysql_select_db("tp_arexx",$reqco);

//résupération des informations
$reqt=mysql_query("SELECT * FROM tp_arexx_capteurs",$reqco);
if ( $reqco == NULL ) 
{ 
    echo " Cet agent n'a participé à aucune session."; 
} 

/* ------------------ CASE A COCHER ------------------ */
/* ------------------ CASE A COCHER ------------------ */

if(!empty($_POST['champ'])) {
    // selection des noms de tables
    $sql = 'select Arexx_Table FROM tp_arexx_capteurs WHERE Arexx_index in('.implode(',',$_POST['champ']).')';
    $req = mysql_query($sql);
    while($d = mysql_fetch_assoc($req)) {
        $sql = 'DROP TABLE '.$d['Arexx_Table'];
        $req = mysql_query($sql);
    }
    mysql_free_result($req);
    // suppression des lignes
    $delete =  'DELETE FROM tp_arexx_capteurs WHERE Arexx_index in('.implode(',',$_POST['champ']).')';
	$req1 = mysql_query($delete);
    
}
        

 ?>
[javascript]
<script type="text/javascript">

function generate(layout) {

var n = noty({
animation: {
open: 'animated zoomIn', // Animate.css class names
close: 'animated zoomOut', // Animate.css class names
},

text : 'Supression de X élements et de leurs tables liées.<br>Opérations terminées correctements.</br>',
type : 'success',
dismissQueue: true,
layout : layout,
theme : 'defaultTheme',

}).setTimeout(3800).close();


console.log('html: ' + n.options.id);
}


function generateAll() {

generate('center');


}

$(document).ready(function () {

generateAll();

});

</script>
[/javascript] 
<?php

 


/* ------------------ A partir d'ici table : alimentaire Lecture ------------------ */
$reponse = mysql_query("SELECT * FROM tp_arexx_capteurs"); // Requête SQL
?>

 <form method="POST" id="form" name="form">
 
 <div class="top-shadow">
<table class="flatTable" table border="0" CELLSPACING="0" >
  <tr class="titleTr">
    <td class="titleTd">Liste des capteurs</td>
    <td colspan="4"></td>
    <td class="plusTd button"></td>

				    <td class="plusTd3 button"></td>
	</div>
	
  </tr>
  <tr class="headingTr">
 <td><center>Index du capteur</center></td> 
<td><center>Nom du capteur</center></td> 
<td><center>Identifiant du capteur</center></td> 
<td><center>Type du capteur</center></td> 
<td><center>Table correspondant au capteur</center></td>
<td><center>Supprimer le capteur</center></td>
<td><center>Edition&nbsp;</center></td>
    <td></td>
  </tr>

<?php
//Affichage des informations

while ($tab_contenu=mysql_fetch_array($reponse)){


?> 

<tr>
<td><center><?php echo $tab_contenu['Arexx_index']; ?></center></td> 
<td><center><?php echo $tab_contenu['Arexx_Name']; ?></center></td> 
<td><center><?php echo $tab_contenu['Arexx_Id']; ?></center></td> 
<td><center><?php echo $tab_contenu['Arexx_Type']; ?></center></td> 
<td><center><?php echo $tab_contenu['Arexx_Table']; ?></center></td>
<section title=".squaredFour">
    <!-- .squaredFour -->
    <div class="squaredFour">
     <td style="text-align:center;width:20%;"><input type="checkbox" id="squaredFour" name="champ[]" value="<?php echo $tab_contenu['Arexx_index']; ?>" /></td>
	

      <label for="squaredFour"></label> 
    </div>
    <!-- end .squaredFour -->
  </section>
 <td class="controlTd">
      <div class="settingsIcons">
        <span class="settingsIcon"><img src="http://i.imgur.com/nnzONel.png" alt="X" /></span>
        <span class="settingsIcon"><img src="http://i.imgur.com/UAdSFIg.png" alt="placeholder icon" /></span>
        <div class="settingsIcon"><img src="http://i.imgur.com/UAdSFIg.png" alt="placeholder icon" /></div>
      </div>  
    </td>
</tr> 

<?php 
} 

?> 
</table>
















  <form method="POST" action="Create.php" name="form">

<div id="sForm" class="sForm sFormPadding">
		<table class="flatTable" table border="0" CELLSPACING="0" >
       

  <tr class="titleTr">
    <td class="titleTd">Ajouter un capteur</td>
    <td colspan="4"></td>
			
    
	<td class="plusTd2 button"></td>
		<td class="plusTd4 button"></td>
	<td class="plusTd1 button"></td>
	

	      

  </tr>
  <tr class="headingTr">
 <td><center>&nbsp;Index du capteur&nbsp;</center></td> 
<td><center>&nbsp;Nom du capteur&nbsp;</center></td> 
<td><center>&nbsp;Identifiant du capteur&nbsp;</center></td> 
<td><center>&nbsp;Type du capteur&nbsp;</center></td> 
<td><center>&nbsp;Table correspondant au capteur&nbsp;</center></td>
    <td></td>
  </tr>


<div id="sFormadd" class="sForm sFormPadding">


 <tr>
<td><center><input type="text" name="index" id="text" size="15" value=""  maxlength="20"></center> </td> 
<td><input type="text" name="nom" size="15" id="text0" value="" class="remplit" maxlength="20"><br></td> 
<td><input type="text" name="id" size="15" id="text1"  value="" class="remplit" maxlength="20"> </td> 
<td><input type="text"  size="15" name="type" id="text2" value="" class="remplit" maxlength="20"><br></td> 
<td><input type="text" name="table" size="15" id="text3" value="" class="remplit" maxlength="20"> </td> 
</tr> 
</form>

<?php 
$reponse1 = mysql_query("SELECT * FROM tp_arexx_capteurs");
//Affichage des informations
while ($tab_contenu=mysql_fetch_array($reponse1)){


	 include 'Create.php';



}

?>

 </div>

</table>
 <div class="bottom-shadow"></div>
    </div>

<link href='http://fonts.googleapis.com/css?family=Lato:100,300,400,700,900' rel='stylesheet' type='text/css'>

  <script src='http://codepen.io/assets/libs/fullpage/jquery.js'></script>

  <script src="js/index.js"></script>
  



</ul>

</form>

    </div>
<script src="jquery-1.7.2.min.js"></script>

<!-- noty -->

<link rel="stylesheet" type="text/css" href="font-awesome/css/font-awesome.min.css" media="screen" />
<script type="text/javascript" src="js/noty/packaged/jquery.noty.packaged.min.js"></script>
script de notification :
[javascript]
<script type="text/javascript">
$('.button.plusTd3').click(function(){

if( $('input[id="squaredFour"]').is(':checked') ){


function generate(layout) {

var n = noty({
animation: {
open: 'animated zoomIn', // Animate.css class names
close: 'animated zoomOut', // Animate.css class names
},

text : 'Voulez vous vraimmant continuer ?',
type : 'alert',
dismissQueue: true,
layout : layout,
theme : 'defaultTheme',
buttons : [
{addClass: 'btn btn-primary', text: 'Oui, supprimer', onClick: function ($noty) {
$noty.close();
document.forms["form"].submit();
}

},
{addClass: 'btn btn-danger', text: 'Annuler', onClick: function ($noty) {
$noty.close();
noty({dismissQueue: true, force: true, layout: layout, theme: 'defaultTheme', text: 'Vous avez annuler l\'opération', type: 'error'}).setTimeout(3500).close();

}
}

]
});
console.log('html: ' + n.options.id);
}


function generateAll() {

generate('center');


}

$(document).ready(function () {

generateAll();

});
}

else {
noty({text: 'Vous devez sélectionner au moins une case pour éffectuer cette opération.', type: 'error'}).setTimeout(3500).close();
}
});
</script>
<script type="text/javascript">
$('.button.plusTd4').click(function(){

if($(".remplit").val()==""){
noty({text: 'Vous devez remplir au moins une case pour éffectuer cette opération.<br> Seule la case "Index du capteur" peut rester vide.</br>', type: 'error'}).setTimeout(3500).close();
}
else {
function generate(layout) {

var n = noty({
animation: {
open: 'animated zoomIn', // Animate.css class names
close: 'animated zoomOut', // Animate.css class names
},

text : 'Voulez vous vraimmant continuer ?',
type : 'alert',
dismissQueue: true,
layout : layout,
theme : 'defaultTheme',
buttons : [
{addClass: 'btn btn-primary', text: 'Oui, ajouter', onClick: function ($noty) {
$noty.close();
document.forms["form"].submit();



}

},
{addClass: 'btn btn-danger', text: 'Annuler', onClick: function ($noty) {
$noty.close();
noty({dismissQueue: true, force: true, layout: layout, theme: 'defaultTheme', text: 'Vous avez annuler l\'opération', type: 'error'}).setTimeout(3500).close();

}
}

]
});
console.log('html: ' + n.options.id);
}


function generateAll() {

generate('center');


}

$(document).ready(function () {

generateAll();

});

}
});

</script>
[/javascript] 
</body>
</html>

Code entier :
<!DOCTYPE html>
<html>
<body>
<head>

  <meta charset="UTF-8">

  <title>CodePen - Minimal Flat Table Design</title>

<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js'></script>
 
		<link rel="stylesheet" type="text/css" href="animate.css" media="screen" />
    <style type="text/css">

        html {
            height: 100%;
            width: 100%;
        }

        body {
            font-family: 'PT Sans', Tahoma, Arial, serif;
            line-height: 13px
        }

    </style>
	<link rel="stylesheet" type="text/css" href="css/style.css" media="screen" />
	 <link rel="stylesheet" type="text/css" href="buttons.css"/>



<script type='text/javascript'>

// On attend que la page soit chargée 
jQuery(document).ready(function()
{
   // On cache la zone de texte
   jQuery('#sForm').hide();
   // toggle() lorsque le lien avec l'ID #toggler est cliqué
   jQuery('.button.plusTd').click(function()
  {
      jQuery('#sForm').toggle(400);
      return false;
   });
});
/* ]]> */ 

// On attend que la page soit chargée 
jQuery(document).ready(function()
{
   // On cache la zone de texte
   jQuery('#sForm').hide();
   // toggle() lorsque le lien avec l'ID #toggler est cliqué
   jQuery('.button.plusTd2').click(function()
  {
      jQuery('#sForm').toggle(400);
      return false;
   });
});
/* ]]> */ 



// On attend que la page soit chargée 
jQuery(document).ready(function()
{
   // On cache la zone de texte
   jQuery('#sFormadd').hide();
   // toggle() lorsque le lien avec l'ID #toggler est cliqué
   jQuery('.button.plusTd1').click(function()
  {
      jQuery('#sFormadd').toggle(400);
      return false;
   });
});
/* ]]> */ 

</script>

</head>


<?php
/* ------------------ CASE A COCHER ------------------ */
 // connexion
$mysql_user="admin";
$mysql_password="admin";
$reqco = mysql_connect("localhost",$mysql_user,$mysql_password);

//sélection de la BDD
$reqse = mysql_select_db("tp_arexx",$reqco);

//résupération des informations
$reqt=mysql_query("SELECT * FROM tp_arexx_capteurs",$reqco);
if ( $reqco == NULL ) 
{ 
    echo " Cet agent n'a participé à aucune session."; 
} 

/* ------------------ CASE A COCHER ------------------ */
/* ------------------ CASE A COCHER ------------------ */

if(!empty($_POST['champ'])) {
    // selection des noms de tables
    $sql = 'select Arexx_Table FROM tp_arexx_capteurs WHERE Arexx_index in('.implode(',',$_POST['champ']).')';
    $req = mysql_query($sql);
    while($d = mysql_fetch_assoc($req)) {
        $sql = 'DROP TABLE '.$d['Arexx_Table'];
        $req = mysql_query($sql);
    }
    mysql_free_result($req);
    // suppression des lignes
    $delete =  'DELETE FROM tp_arexx_capteurs WHERE Arexx_index in('.implode(',',$_POST['champ']).')';
	$req1 = mysql_query($delete);
    
}
        

 ?>
<script type="text/javascript">
   
    function generate(layout) {

        var n = noty({
		animation: {
        open: 'animated zoomIn', // Animate.css class names
        close: 'animated  zoomOut', // Animate.css class names
    },
		
            text        : 'Supression de X élements et de leurs tables liées.<br>Opérations terminées correctements.</br>',
            type        : 'success',
            dismissQueue: true,
            layout      : layout,
            theme       : 'defaultTheme',
           
        }).setTimeout(3800).close();


        console.log('html: ' + n.options.id);
    }

		
    function generateAll() {

        generate('center');


    }

    $(document).ready(function () {

        generateAll();

    });

  </script>
<?php

 


/* ------------------ A partir d'ici table : alimentaire Lecture ------------------ */
$reponse = mysql_query("SELECT * FROM tp_arexx_capteurs"); // Requête SQL
?>

 
 <form method="POST" id="form" name="form">
 
 <div class="top-shadow">
<table class="flatTable" table border="0" CELLSPACING="0" >
  <tr class="titleTr">
    <td class="titleTd">Liste des capteurs</td>
    <td colspan="4"></td>
    <td class="plusTd button"></td>

				    <td class="plusTd3 button"></td>
	</div>
	
  </tr>
  <tr class="headingTr">
 <td><center>Index du capteur</center></td> 
<td><center>Nom du capteur</center></td> 
<td><center>Identifiant du capteur</center></td> 
<td><center>Type du capteur</center></td> 
<td><center>Table correspondant au capteur</center></td>
<td><center>Supprimer le capteur</center></td>
<td><center>Edition&nbsp;</center></td>
    <td></td>
  </tr>


<?php
//Affichage des informations

while ($tab_contenu=mysql_fetch_array($reponse)){


?> 
<tr>
<td><center><?php echo $tab_contenu['Arexx_index']; ?></center></td> 
<td><center><?php echo $tab_contenu['Arexx_Name']; ?></center></td> 
<td><center><?php echo $tab_contenu['Arexx_Id']; ?></center></td> 
<td><center><?php echo $tab_contenu['Arexx_Type']; ?></center></td> 
<td><center><?php echo $tab_contenu['Arexx_Table']; ?></center></td>
<section title=".squaredFour">
    <!-- .squaredFour -->
    <div class="squaredFour">
     <td style="text-align:center;width:20%;"><input type="checkbox" id="squaredFour" name="champ[]" value="<?php echo $tab_contenu['Arexx_index']; ?>" /></td>
	

      <label for="squaredFour"></label> 
    </div>
    <!-- end .squaredFour -->
  </section>
 <td class="controlTd">
      <div class="settingsIcons">
        <span class="settingsIcon"><img src="http://i.imgur.com/nnzONel.png" alt="X" /></span>
        <span class="settingsIcon"><img src="http://i.imgur.com/UAdSFIg.png" alt="placeholder icon" /></span>
        <div class="settingsIcon"><img src="http://i.imgur.com/UAdSFIg.png" alt="placeholder icon" /></div>
      </div>  
    </td>
</tr> 

<?php 
} 

?> 
</table>
















  <form method="POST" action="Create.php" name="form">

<div id="sForm" class="sForm sFormPadding">
		<table class="flatTable" table border="0" CELLSPACING="0" >
       

  <tr class="titleTr">
    <td class="titleTd">Ajouter un capteur</td>
    <td colspan="4"></td>
			
    
	<td class="plusTd2 button"></td>
		<td class="plusTd4 button"></td>
	<td class="plusTd1 button"></td>
	

	      

  </tr>
  <tr class="headingTr">
 <td><center>&nbsp;Index du capteur&nbsp;</center></td> 
<td><center>&nbsp;Nom du capteur&nbsp;</center></td> 
<td><center>&nbsp;Identifiant du capteur&nbsp;</center></td> 
<td><center>&nbsp;Type du capteur&nbsp;</center></td> 
<td><center>&nbsp;Table correspondant au capteur&nbsp;</center></td>
    <td></td>
  </tr>


<div id="sFormadd" class="sForm sFormPadding">


 <tr>
<td><center><input type="text" name="index" id="text" size="15" value=""  maxlength="20"></center> </td> 
<td><input type="text" name="nom" size="15" id="text0" value="" class="remplit" maxlength="20"><br></td> 
<td><input type="text" name="id" size="15" id="text1"  value="" class="remplit" maxlength="20"> </td> 
<td><input type="text"  size="15" name="type" id="text2" value="" class="remplit" maxlength="20"><br></td> 
<td><input type="text" name="table" size="15" id="text3" value="" class="remplit" maxlength="20"> </td> 
</tr> 
</form>


<?php 
$reponse1 = mysql_query("SELECT * FROM tp_arexx_capteurs");
//Affichage des informations
while ($tab_contenu=mysql_fetch_array($reponse1)){


	 include 'Create.php';



}

?>
 </div>

</table>
 <div class="bottom-shadow"></div>
    </div>

<link href='http://fonts.googleapis.com/css?family=Lato:100,300,400,700,900' rel='stylesheet' type='text/css'>

  <script src='http://codepen.io/assets/libs/fullpage/jquery.js'></script>

  <script src="js/index.js"></script>
  



</ul>

</form>

    </div>
<script src="jquery-1.7.2.min.js"></script>

<!-- noty -->

<link rel="stylesheet" type="text/css" href="font-awesome/css/font-awesome.min.css" media="screen" />
<script type="text/javascript" src="js/noty/packaged/jquery.noty.packaged.min.js"></script>

<script type="text/javascript">
$('.button.plusTd3').click(function(){
			
if( $('input[id="squaredFour"]').is(':checked') ){


    function generate(layout) {

        var n = noty({
		animation: {
        open: 'animated zoomIn', // Animate.css class names
        close: 'animated  zoomOut', // Animate.css class names
    },
		
            text        : 'Voulez vous vraimmant continuer ?',
            type        : 'alert',
            dismissQueue: true,
            layout      : layout,
            theme       : 'defaultTheme',
            buttons     : [
                {addClass: 'btn btn-primary', text: 'Oui, supprimer', onClick: function ($noty) {
                    $noty.close(); 
					document.forms["form"].submit();
		}

                },
                {addClass: 'btn btn-danger', text: 'Annuler', onClick: function ($noty) {
                    $noty.close();
                  noty({dismissQueue: true, force: true, layout: layout, theme: 'defaultTheme', text: 'Vous avez annuler l\'opération', type: 'error'}).setTimeout(3500).close();
				  
                }
                }
		
            ]
        });
        console.log('html: ' + n.options.id);
    }
	
	
    function generateAll() {

        generate('center');
      

    }

    $(document).ready(function () {

        generateAll();

    });
}

else {
    noty({text: 'Vous devez sélectionner au moins une case pour éffectuer cette opération.', type: 'error'}).setTimeout(3500).close();
}
});
</script>
<script type="text/javascript">
$('.button.plusTd4').click(function(){
			
if($(".remplit").val()==""){
   noty({text: 'Vous devez remplir au moins une case pour éffectuer cette opération.<br> Seule la case "Index du capteur" peut rester vide.</br>', type: 'error'}).setTimeout(3500).close();
   }
   else {
    function generate(layout) {

        var n = noty({
		animation: {
        open: 'animated zoomIn', // Animate.css class names
        close: 'animated  zoomOut', // Animate.css class names
    },
		
            text        : 'Voulez vous vraimmant continuer ?',
            type        : 'alert',
            dismissQueue: true,
            layout      : layout,
            theme       : 'defaultTheme',
            buttons     : [
                {addClass: 'btn btn-primary', text: 'Oui, ajouter', onClick: function ($noty) {
                    $noty.close(); 
					document.forms["form"].submit();
		

	
		}

                },
                {addClass: 'btn btn-danger', text: 'Annuler', onClick: function ($noty) {
                    $noty.close();
                  noty({dismissQueue: true, force: true, layout: layout, theme: 'defaultTheme', text: 'Vous avez annuler l\'opération', type: 'error'}).setTimeout(3500).close();
					
                }
                }
		
            ]
        });
        console.log('html: ' + n.options.id);
    }
	
	
    function generateAll() {

        generate('center');
      

    }

    $(document).ready(function () {

        generateAll();

    });
   
}
});

</script>
</body>
</html>

Re: Ajout de div et de lignes

Posté : 30 déc. 2014, 01:18
par Elie
Met la page accessible en ligne ca sera beaucoup plus simple que de coller un code qui ne marchera pas chez nous !

D'après moi ton bouton est plusTd4 donc

[javascript]/* La le texte est en brut mais l'interet serait
de mettre un iD a ce <tr> et de copier le
contenu grace à clone();
http://api.jquery.com/clone/ */

$('.plusTd4').on('click',function() {
$('#sFormadd').after('<tr><td><center><input type="text" name="index" id="text" size="15" value="" maxlength="20"></center> </td><td><input type="text" name="nom" size="15" id="text0" value="" class="remplit" maxlength="20"><br></td><td><input type="text" name="id" size="15" id="text1" value="" class="remplit" maxlength="20"> </td><td><input type="text" size="15" name="type" id="text2" value="" class="remplit" maxlength="20"><br></td><td><input type="text" name="table" size="15" id="text3" value="" class="remplit" maxlength="20"> </td></tr>');
});[/javascript]

http://api.jquery.com/after/

Bon après je suis obligé de donner mon avis mais les balises <table> <tr> <td> <center> ca ne se fait plus ... Mettre un <br> dans un <td> ca n'a aucun sens non plus.
Mettre un <div> entre 2 <tr> et fermer son <form> avant de fermer sa <table> non plus !
Il serait peut-être temps d'installer HTML Validator (https://addons.mozilla.org/fr/firefox/a ... serprofile) et de se perdre 2 semaines a bien comprend le HTML5 et le CSS3 bref !

Dis moi ce qui se passe mais ton code a besoin d'un réel clean !

Re: Ajout de div et de lignes

Posté : 30 déc. 2014, 18:28
par dayou05
Un grand merci ! Effectivement je vais t'écouter et m'y mettre sérieusement ! Parce'que c'est le basard même si dans ma tête tout est a peu prés clair.
Ton code a l'air de bien fonctionner seulement cela s'ajoute n'importe ou .. J'ai essayer plusieurs choses mais sans succès.
tab-ajout.png
Et le code actuel :

[javascript] http://api.jquery.com/clone/ */
jQuery(document).ready(function()
{


$('.plusTd1').on('click',function() {
$('#sFormadd').after('<tr><td><center><input type="text" name="index" id="text" size="15" value="" maxlength="20"></center> </td><td><input type="text" name="nom" size="15" id="text0" value="" class="remplit" maxlength="20"><br></td><td><input type="text" name="id" size="15" id="text1" value="" class="remplit" maxlength="20"> </td><td><input type="text" size="15" name="type" id="text2" value="" class="remplit" maxlength="20"><br></td><td><input type="text" name="table" size="15" id="text3" value="" class="remplit" maxlength="20"> </td></tr>');
});
});[/javascript]

Je vais essayer de mettre la page en ligne et j'avais penser à ta solution seulement je manquait de ressources et d’expérience on va dire ...
Merci !

Re: Ajout de div et de lignes

Posté : 30 déc. 2014, 19:46
par Elie
Autant pour moi ...
J'avais pas vu que ton div #sFormadd n'était pas fermé.
Même si le code est pas propre utlise $('#sFormadd').prepend()

Re: Ajout de div et de lignes

Posté : 30 déc. 2014, 19:54
par dayou05
Malheureusement, toujours pareil ...
De quelle div parle tu ? Celle de Sformadd est bien fermer il me semble ..
Merci

Re: Ajout de div et de lignes

Posté : 30 déc. 2014, 20:00
par Elie
<div id="sFormadd" class="sForm sFormPadding">


 <tr>
sFormadd n'est pas fermé donc le code est censé rajouté tout entre le <div> et le <tr> ...
Reviens me voir quand ton code est propre alors :/

Re: Ajout de div et de lignes

Posté : 30 déc. 2014, 21:38
par dayou05
Voilà après quelques heures de recherche j'ai enfin réussit, maintenant je n'arrive donc pas a récupérer les champs afin de les ajouter dans ma base de données, faudrait t'il faire une boucle while ?
Je ne sais pas du tout par ou commencer, voilà un grand merci !
Voici, le code de la page create.php :
<!-- noty -->
<html>
<body>
<head>
<link rel="stylesheet" type="text/css" href="font-awesome/css/font-awesome.min.css" media="screen" />
<script type="text/javascript" src="js/noty/packaged/jquery.noty.packaged.min.js"></script>
<script src="jquery-1.7.2.min.js"></script>
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js'></script>
  <script src='http://codepen.io/assets/libs/fullpage/jquery.js'></script>
  
<?php
if( (!empty($_POST['nom'])) && (!empty($_POST['id'])) && (!empty($_POST['type'])) && (!empty($_POST['table']))  ){



// On commence par récupérer les champs 
if(isset($_POST['index'])) $index=$_POST['index'];
else    $index=""; 

if(isset($_POST['nom']))      $nom=$_POST['nom']; 
else      $nom="nom";

if(isset($_POST['id']))      $id=$_POST['id']; 
else     $id="id";

if(isset($_POST['type']))     $type=$_POST['type']; 
else   $type="type";

if(isset($_POST['table']))     $table=$_POST['table']; 
else     $table="table";


// connexion
$mysql_user="admin";
$mysql_password="admin";
$reqco = mysql_connect("localhost",$mysql_user,$mysql_password) or die('Erreur de connexion '.mysql_error());

//sélection de la BDD
$reqse = mysql_select_db("tp_arexx",$reqco) or die('Erreur de connexion '.mysql_error());
     
    // on écrit la requête sql 
     $sql="INSERT INTO `tp_arexx_capteurs` (`Arexx_index`, `Arexx_Id`, `Arexx_Type`, `Arexx_Table`, `Arexx_Name`)
      VALUES('$_POST[index]','$_POST[id]','$_POST[type]','$_POST[table]','$_POST[nom]')";
     
    // on insère les informations du formulaire dans la table 
    mysql_query($sql) or die('Erreur SQL !'.$sql.'<br>'.mysql_error()); 
	//sélection de la BDD
$reqse = mysql_select_db("tp_arexx",$reqco);

 $sql_query = "CREATE TABLE `$_POST[table]` ( `Arexx_index` BIGINT(4) AUTO_INCREMENT NOT NULL, `marqueur_temps` VARCHAR(16) CHARACTER SET latin1 COLLATE latin1_general_ci NOT NULL, `mesure` VARCHAR(20) CHARACTER SET latin1 COLLATE latin1_general_ci NOT NULL,
 `rssi` VARCHAR(10) CHARACTER SET latin1 COLLATE latin1_general_ci NOT NULL, `jour` DATE NOT NULL, `heure` TIME NOT NULL, PRIMARY KEY (`Arexx_index`))";   // Requête 
      $result_query=mysql_query($sql_query);
	  mysql_query($sql_query);     // Exécution de la requête 
      $Erreur = mysql_error(); 
?>
 <script type="text/javascript">
   
    function generate(layout) {

        var n = noty({
		animation: {
        open: 'animated zoomIn', // Animate.css class names
        close: 'animated  zoomOut', // Animate.css class names
    },
		
            text        : 'Enregistrement effectué correctement.',
            type        : 'success',
            dismissQueue: true,
            layout      : layout,
            theme       : 'defaultTheme',
           
        }).setTimeout(3500).close();
		setTimeout(function(){window.location.reload()}, 3450);	

        console.log('html: ' + n.options.id);
    }
	
	
    function generateAll() {

        generate('center');
      

    }

    $(document).ready(function () {

        generateAll();

    });
	


		  			
	

  </script>
  <?php
 } 
	  else {
	  }
	  ?>
	</body>
	</head>
	</html>
PS : Le code Javascript est juste pour l'affichage d'une Alert.

Re: Ajout de div et de lignes

Posté : 30 déc. 2014, 23:24
par Elie
Tu configures (mal) des variables que tu utilises pas :
if(isset($_POST['table']))     $table=$_POST['table']; 
else     $table="table";

$table = !empty($_POST['table']) ? $_POST['table'] : 'table';
En fait ce qu'il faut faire quand tu ajoutes plusieurs trucs c'est de donner comme nom a tes champs un tableau :

Ex : name="nom[]" ...
Comme ca le premier sera $_POST['nom'][0]...

Donc oui tu fais genre
foreach($_POST['nom'] as $k => $v) {
    $sql="INSERT INTO `tp_arexx_capteurs` (`Arexx_index`, `Arexx_Id`, `Arexx_Type`, `Arexx_Table`, `Arexx_Name`) VALUES('".$_POST['index'][$k]."','".$_POST['id'][$k]."','".$_POST['type'][$k]."','".$_POST['table'][$k]."','".$_POST['nom'][$k]."')";
}
En PDO c'est meme plus simple grace à prepare().

Donc ouais je te laisse regarder mais t'as déjà une piste pour avancer :)

Au passage c'est vraiment du suicide ton principe de faire une page vide, juste pour afficher le noty !
En fait ce que tu veux faire ca s'appelle de l'ajax !
Je clique sur "Ajouter", ca envoie les INSERT en ajax et ca afficher le noty a chaque fois que l'insert a marché ...
Mon site de sous-titres est bourré de ca :)

http://www.subsynchro.com/include/js/release.js
Regarde la fonction supprimerAlerte() par exemple !

Re: Ajout de div et de lignes

Posté : 31 déc. 2014, 19:08
par dayou05
Ah oui! c'est vraiment impressionnant comme tu gère bien les choses !
C'est vrai que l'AJAX m'attire pas mal, du coup je vais m'y lancer, et c'est que l'affichage des noty est pas très mâlins, car même si cela n'a pas fonctionner sa affichera quand même que cela aura fonctionner ...
Enfin pour un débutant c'est plutôt bien ahah :
Après une nuit passer dessus je suis encore sur la page php pour récupérer les valeurs de tous les champs ... et sa marche toujours pas mais je vais trouver je pense! Malgré ta piste..
Voilàa merci à toi!
Heures au format UTC+02:00
Page 1 sur 1
Powered by phpBB® Forum Software © phpBB Limited
https://www.phpbb.com/