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
|
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<title>Exemple</title>
<style type="text/css">
thead, tfoot {
text-align: center;
}
#table1{
table-layout: fixed; /* la tableau prend la taille définie et ignore le contenu*/
width: 100px; /* le table layout ne marche pas sous Mozilla si on ne met pas de taille (même 1px suffit)
on peut mettre en pourcentage aussi*/
}
td {
white-space: nowrap;
overflow: hidden; /* pour les navigateurs autres que IE (cache le texte qui dépasse) */
text-overflow: ellipsis; /* ne marche que sous IE (tronque le texte en ajoutant '...') */
}
.sortable tr {
overflow: hidden;
white-space:nowrap;
}
thead tr td {
white-space: normal;
}
#IdCommentaire{
background-color:#FFFFE7;
border: 1px solid #DEDEDE;
color: black;
position:absolute;
visibility:hidden;
white-space:pre;/*nowrap;*/ /* indique de prendre le formatage tel quel avec retours à la ligne tabulations etc)*/
}
</style>
<script type="text/javascript" src="js/framework/prototype.js"></script>
<script type="text/javascript">
//<![CDATA[
function show_comment(event) {
var elt_div = $('IdCommentaire');
// on récupère ce qui est à l'origine du show comment
var elt_td = Event.element(event)
if (elt_div) {
//elt_div.innerHTML='<pre>'+elt_td.innerHTML+'</pre>';
elt_div.innerHTML=elt_td.innerHTML;
//elt_div.innerHTML=elt_td.innerText.replace('\n','|');
//cloneNode = elt_td.cloneNode(true);
//elt_div.innerHTML="";
//elt_div.appendChild(cloneNode);
//elt_div.innerHTML=elt_td.firstChild.nodeValue.replace('\n','|');
elt_div.style.visibility="visible";
}
}
function hide_comment() {
var elt_div = $('IdCommentaire')
if (elt_div) {
elt_div.style.visibility="hidden";
}
}
function initEvents() {
if ($('detailBody')){
Event.observe($('detailBody'), 'mouseover', show_comment.bindAsEventListener());
Event.observe($('detailBody'), 'mouseout', hide_comment);
}
}
Event.observe(window, 'load', initEvents, false);
//]]>
</script>
</head>
<body>
<div id="IdCommentaire"></div>
<div id="inProgress" style="visibility: hidden;"><h4 style="color:#FEA620; margin:0px">Sort in progress, please wait...</h4></div>
<table id="table1" border="1" style="cellspacing: 0;cellpadding: 2;" >
<thead >
<tr >
<td valign="top" style=" width: 60px;">Exemple</td>
</tr>
</thead>
<tbody id="detailBody">
<tr >
<td> test1
Test 2 apres retour a la ligne
</td>
</tr >
<tr >
<td>dcvvko fbgfrb
bnnthn
thn
hyn hy
hy
,hjy
jy,jyu, jk,h
,hjy,jy
</td>
</tr >
<tr >
<td>un
deux
trois
</td>
</tr>
</tbody>
</table>
</body>
</html> |
Partager