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
| <!doctype html>
<html lang="fr">
<head>
<meta charset="utf-8">
<title>test du contenu de tableau html</title>
<style type="text/css">
* {margin:0;padding:0;}
body {margin:10px;background:#000;color:#ddd;font:bold 1em Helvetica, Arial, sans-serif;}
h1 {margin:0 0 20px 0;}
div {margin:0 auto;width:300px;}
table {width:300px;border-style:none;background:#333;}
td {border:solid 2px #333;background:#666;text-align:center;}
select {width:50px;}
button {border:solid 2px #333;background:#666;color:#ddd;font-weight:bold;}
button:hover {background:#ddd;color:#666;}
p {margin:20px 0 0 0;}
</style>
</head>
<body>
<h1>Test du contenu de tableau html</h1>
<div>
<table id="t">
<tr><td>a</td><td>d</td></tr>
<tr><td>b</td><td>e</td></tr>
<tr><td>c</td><td>f</td></tr>
</table>
<form id="f" method="post" action="succes.html">
<p>
<label for="s">choisir une lettre</label>
<select id="s" name="s">
<option value=""></option>
<option value="a">a</option>
<option value="b">b</option>
<option value="c">c</option>
<option value="d">d</option>
<option value="e">e</option>
<option value="f">f</option>
<option value="g">g</option>
<option value="h">h</option>
<option value="i">i</option>
<option value="j">j</option>
<option value="k">k</option>
</select>
<button id="b" type="button" value="soumettre">soumettre</button>
</p>
</form>
<p id="p">quel sera le résultat?</p>
</div>
<script type="text/javascript">
var FC = {
Evenement: {
evenements: [],
ajouter: function(elm, evt, fn) {
var fni = function(e) { // prévient le comportement par défaut
if (fn(e)===false) { // false explicitement car peut être undefined en cas de délégation d'évènement
if (e.preventDefault) { e.preventDefault(); }
else { e.returnValue = false; }
}
};
if (document.addEventListener) { elm.addEventListener(evt, fni, false); }
else if (document.attachEvent) { elm.attachEvent("on" + evt, fni); }
FC.Evenement.evenements.push([elm, evt, fni]);
},
supprimer: function(elm, evt, fn) {
var evts = FC.Evenement.evenements;
for (var i=evts.length-1; i>=0; i--) {
if (evts[i][0]===elm && evts[i][1]===evt) {
if (document.removeEventListener) { elm.removeEventListener(evts[i][1], evts[i][2], false); }
else if (document.detachEvent) { elm.detachEvent("on" + evts[i][1], evts[i][2]); }
FC.Evenement.evenements.splice(i,1);
}
}
}
}
}
var a = [],
rows = document.getElementById("t").rows,
rowsLength = rows.length,
cellsLength = rows[0].cells.length,
p = document.getElementById("p");
for (var i=0;i<rowsLength;i++) {
for (var j=0;j<cellsLength;j++) {
a.push(rows[i].cells[j].firstChild.nodeValue);
}
}
FC.Evenement.ajouter(document.getElementById("b"), "click", function(e) {
var sel = document.getElementById("s"),
v = sel.options[sel.selectedIndex].value,
aLength = a.length,
str = "";
for (var i=0;i<aLength;i++) {
if (a[i]===v) {
str = '"'+ v + '" a été trouvé dans le tableau.';
break;
}
}
if (str==="") {
str = "rien à signaler.";
}
p.firstChild.nodeValue = str;
});
</script>
</body>
</html> |
