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
|
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="pear2pear.js"></script>
<script src="<a href="https://code.jquery.com/jquery-1.12.4.js"></script" target="_blank">https://code.jquery.com/jquery-1.12.4.js"></script</a>>
<script src="<a href="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script" target="_blank">https://code.jquery.com/ui/1.12.1/jq...i.js"></script</a>>
<script>
var ProductTab = []
var nom = document.getElementById("intitule");
var prix = document.getElementById("prix");
var quantite = document.getElementById("quantite");
function onLoad() {
ProductTab.push({name : "Processeur", price : 199.9, quantity : 15});
ProductTab.push({name : "EcranLCD", price : 99.9, quantity : 3});
ProductTab.push({name : "Carte mère", price : 338.14, quantity : 5});
ProductTab.push({name : "Adaptateur VGA-HDMI", price : 7.99, quantity : 2});
ProductTab.push({name : "Carte graphique", price : 449.99, quantity : 4});
AddProduct("Souris", 7.80, 10);
FillMaterialTable();
}
function FillMaterialTable() {
var htmlContent = " ";
for(var i = 0; i < ProductTab.length; i++)
{
htmlContent += "<tr><td>" + ProductTab[i].name + "</td><td>" + ProductTab[i].price + "</td><td>" + ProductTab[i].quantity + "</td></tr>";
}
$("#MaterialTableContentId").html(htmlContent);
$("#MaterialTableContentId").show();
}
function AddProduct(nom, prix, quantite){
ProductTab.push({name : nom, price : prix, quantity : quantite});
}
</script>
<script>
$( function() {
$( "#dialog" ).dialog({
autoOpen: false, height: 400,width: 350,modal: true,
});
$( "#opener" ).on( "click", function() {
$( "#dialog" ).dialog( "open" );
});
$('#dialog').keyup(function() {
var $intitule = $('.intitule');
var $prix = $('.prix');
var $quantite = $('.quantite');
if (!$intitule.val() || !$prix.val() || !$quantite.val()) {
$('.submit').attr('disabled', true);
}
else {
$('.submit').attr('disabled', false);
}
}
).keyup();
}
);
</script>
</head>
<body onload="onLoad()">
<table id="MaterialTableId">
<caption>
Materiel
</caption>
<thead>
<tr>
<th>
Intitulé
</th>
<th>
Prix Unitaire
</th>
<th>
Quantité Restante
</th>
</tr>
</thead>
<tbody id ="MaterialTableContentId"></tbody>
</table>
<div id="dialog">
<form onsubmit="AddProduct(document.getElementById('intitule').value, document.getElementById('prix').value, document.getElementById('quantite').value);FillMaterialTable();return false">
<p>
Intitulé :
<input id="intitule" class="intitule" type="text" />
</p>
<p>
Prix :
<input id="prix" class="prix" type="text" />
</p>
<p>
Quantité restante :
<input id="quantite" class="quantite" type="text" />
</p>
<input type="submit" class="submit" value="Valider" />
<input type="submit" value="Annuler" />
</form>
</div>
<button id="opener">Ajouter un produit</button>
</body>
</html> |
Ajout d'un produit dans un tableau
Répondre avec citation
Partager