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 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186
| <head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta http-equiv="content-script-type" content="text/javascript" />
<meta http-equiv="content-style-type" content="text/css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"> </script>
<style>
body{
background-image:url(http://zupimages.net/up/16/10/mt5x.jpg);
background-repeat:no-repeat;
background-size:cover;
}
fieldset {
margin-bottom: 15px;
padding: 10px;
width: 50%;
margin-left: auto;
margin-right: auto;
background-color: #e1e6fe;
border-left:7px solid blue;
border-right:7px solid blue;
border-bottom:3px solid blue;
-webkit-box-shadow: 1px 6px 15px red;
-moz-box-shadow: 1px 6px 15px red;
box-shadow: 1px 6px 15px red;
}
textarea {
background-color: #e1e6fe;
border-radius:5px 5px 0px 0px;
}
legend {
padding: 0px 3px;
font-weight: bold;
font-variant: small-caps;
}
input[type=button] {
margin-bottom: 15px;
padding: 10px;
width: 5%;
margin-left: auto;
margin-right: auto;
background-color: #e1e6fe;
border-left:2px solid blue;
border-right:2px solid blue;
border-bottom:3px solid blue;
-webkit-box-shadow: 1px 6px 15px red;
-moz-box-shadow: 1px 6px 15px red;
box-shadow: 1px 6px 15px red;
}
</style>
<body>
<div align="center"><span style="text: bold;"><strong>Générateur de Tableaux</strong></span> </div><br>
<fieldset>
<legend align="center">Contruisez votre Tableau</legend>
<table width="25%" >
<tr>
<td>
Nombres de Lignes :<br>
Nombres de Colonnes :
</td>
<td>
<input id="line" type="text" size="5" maxlength="2"><br>
<input id="column" type="text" size="5" maxlength="2">
</td><br>
</tr>
</table>
</fieldset>
<fieldset>
<legend align="center">Encadrez votre Tableau</legend>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<div align="center"><td>Bordure du Tableau : <br>
Bordure des Lignes : <br />
Bordure des Cases : <br /></td>
<td>
<select id="bt_width">
<option value="0">0px</option>
<option value="1">1px</option>
<option value="2">2px</option>
<option value="3">3px</option>
<option value="4">4px</option>
<option value="5">5px</option>
</select>
<select id="bt_type">
<option value="none">pas de bordure</option>
<option value="dotted">en pointillés</option>
<option value="solid">pleine</option>
<option value="double">double</option>
<option value="groove">en relief</option>
<option value="ridge">en effet 3D</option>
<option value="inset">rentrante</option>
<option value="outset">sortante</option>
</select>
Code Couleur : <input id="bt_color" type="text" placeholder="#Votre code couleur" class="code-color"><br>
<select id="bl_width">
<option value="0">0px</option>
<option value="1">1px</option>
<option value="2">2px</option>
<option value="3">3px</option>
<option value="4">4px</option>
<option value="5">5px</option>
</select>
<select id="bl_type">
<option value="none">pas de bordure</option>
<option value="dotted">en pointillés</option>
<option value="solid">pleine</option>
<option value="double">double</option>
<option value="groove">en relief</option>
<option value="ridge"> en effet 3D</option>
<option value="inset">rentrante</option>
<option value="outset">sortante</option>
</select>
Code Couleur : <input id="bl_color" type="text" placeholder="#Votre code couleur" class="code-color"><br>
<select id="bc_width">
<option value="0">0px</option>
<option value="1">1px</option>
<option value="2">2px</option>
<option value="3">3px</option>
<option value="4">4px</option>
<option value="5">5px</option>
</select>
<select id="bc_type">
<option value="none">pas de bordure</option>
<option value="dotted">en pointillés</option>
<option value="solid">pleine</option>
<option value="double">double</option>
<option value="groove">en relief</option>
<option value="ridge">en effet 3D</option>
<option value="inset">rentrante</option>
<option value="outset">sortante</option>
</select>
Code Couleur : <input id="bc_color" type="text" placeholder="#Votre code couleur" class="code-color"></td></div>
</tr>
</table>
</fieldset>
<center><input value="Générer" id="generate" onclick="generate()" type="button" ></center>
<fieldset>
<form name="selectall">
<legend align="center">Code<br></legend> <textarea id="result" style="width: 100%; height: 400px;"></textarea><br><br>
</fieldset>
<center><input type="button" value="Selectionner" onClick="javascript:this.form.result.focus();this.form.result.select();"></center>
</form>
<fieldset>
<legend align="center">Aperçu</legend><br><div id="tofull"></div>
</fieldset>
<center>Copiez le code dans votre message base fournie par Orange retravaillée par Graphcode</center>
<script type="text/javascript">
function generate() {
var i,j, result, b1='',b2='',b3='';
if(jQuery('#bt_width').attr('value')!='0') b1=' border:'+jQuery('#bt_width').attr('value')+'px '+jQuery('#bt_type').attr('value')+' '+jQuery('#bt_color').attr('value')+';';
if(jQuery('#bl_width').attr('value')!='0') b2=' style="border:'+jQuery('#bl_width').attr('value')+'px '+jQuery('#bl_type').attr('value')+' ' +jQuery('#bl_color').attr('value')+';"';
if(jQuery('#bc_width').attr('value')!='0') b3=' style="border:'+jQuery('#bc_width').attr('value')+'px '+jQuery('#bc_type').attr('value')+' '+jQuery('#bc_color').attr('value')+';"';
result='<table style="width: 100%; border-collapse:collapse;'+b1+'">';
for(i=0;i<parseInt(jQuery('#line').attr('value'));i++)
{
result+='\n\t<tr'+b2+'>';
for(j=0;j<parseInt(jQuery('#column').attr('value'));j++)
result+='\n\t\t<td'+b3+'>Votre contenu '+(1+j+i*(parseInt(jQuery('#column').attr('value'))))+'</td>';
result+='\n\t</tr>';
}
jQuery('#result').attr('value',result+'\n</table>');
jQuery('#tofull').html(result+'\n</table>');
};
</script>
</body> |
Partager