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
|
<html>
<head>
<title>Test Tab1
</title>
</head>
<script language="javascript">
function switch(var ID, var name)
{
var table = document.getElementById(ID);
var detail = table.getElementsByName(name + "_detail");
var resume = table.getElementsByName(name + "_resume");
var span = table.getElementsByName(name + "_switch");
if(detail[0].style.display == "table-cell")
{
for(var i = 0; i < detail.length; ++i) detail[i].style.display = "none";
for(var i = 0; i < resume.length; ++i) resume[i].style.display = "table-cell";
span[0].src = "moins.jpg"; /* chuis pas sûr de cette ligne ! */
} else {
for(var i = 0; i < detail.length; ++i) detail[i].style.display = "table-cell";
for(var i = 0; i < resume.length; ++i) resume[i].style.display = "none";
span[0].elements[0].text = "plus.jpg"; /* chuis pas sûr de cette ligne ! */
}
}
</script>
<body>
<h1>Table initiale</h1>
<table width="100%" border="1" id="doc_X">
<tr>
<td rowspan="2">Nom</td>
<td colspan="6">Doc <img src="plus.jpg" name="doc_switch" onclick="switch('doc_X', 'doc')" /></td>
<td colspan="2">metric 1 <span name="met1_switch" onclick="switch('doc_X', 'ms')">+</span></td>
<td colspan="7">metric 2 <span name="met2_switch" onclick="switch('doc_X', 'mc')">+</span></td>
</tr>
<tr>
<td width="6%" name="doc_detail">Doc1</td>
<td width="6%" name="doc_detail">Doc2</td>
<td width="6%" name="doc_detail">Doc3</td>
<td width="6%" name="doc_detail">Doc4</td>
<td width="6%" name="doc_detail">Doc5</td>
<td width="6%" name="doc_detail">Doc6</td>
<td width="6%" name="ms_detail">MS1</td>
<td width="6%" name="ms_detail">MS2</td>
<td width="6%" name="mc_detail">MC1</td>
<td width="6%" name="mc_detail">MC2</td>
<td width="6%" name="mc_detail">MC3</td>
<td width="6%" name="mc_detail">MC4</td>
<td width="6%" name="mc_detail">MC5</td>
<td width="6%" name="mc_detail">MC6</td>
<td width="6%" name="mc_detail">MC7</td>
</tr>
<tr>
<td>Composant1</td>
<td name="doc_detail">1</td>
<td name="doc_detail">1</td>
<td name="doc_detail">0</td>
<td name="doc_detail">1</td>
<td name="doc_detail">0</td>
<td name="doc_detail">1</td>
<td name="ms_detail">1</td>
<td name="ms_detail">1</td>
<td name="mc_detail">0</td>
<td name="mc_detail">0</td>
<td name="mc_detail">1</td>
<td name="mc_detail">1</td>
<td name="mc_detail">0</td>
<td name="mc_detail">1</td>
<td name="mc_detail">1</td>
</tr>
<tr>
<td>Composant2</td>
<td name="doc_detail">0</td>
<td name="doc_detail">1</td>
<td name="doc_detail">0</td>
<td name="doc_detail">1</td>
<td name="doc_detail">0</td>
<td name="doc_detail">0</td>
<td name="ms_detail">1</td>
<td name="ms_detail">1</td>
<td name="mc_detail">1</td>
<td name="mc_detail">0</td>
<td name="mc_detail">1</td>
<td name="mc_detail">1</td>
<td name="mc_detail">1</td>
<td name="mc_detail">1</td>
<td name="mc_detail">1</td>
</tr>
<tr>
<td>Composant3</td>
<td name="doc_detail">1</td>
<td name="doc_detail">0</td>
<td name="doc_detail">0</td>
<td name="doc_detail">0</td>
<td name="doc_detail">0</td>
<td name="doc_detail">1</td>
<td name="ms_detail">0</td>
<td name="ms_detail">1</td>
<td name="mc_detail">0</td>
<td name="mc_detail">1</td>
<td name="mc_detail">0</td>
<td name="mc_detail">0</td>
<td name="mc_detail">0</td>
<td name="mc_detail">1</td>
<td name="mc_detail">1</td>
</tr>
</table>
</body>
</html> |
Partager