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> |
Partager