Redimensionner les cellules d'une table dynamiquement (menu inserttable)
Bonjour a tous
je suis en train de faire mon menu inserttable pour mon wysiwyg
je cherche actuellement a redimensionner les cellules avec la souris
visiblement je ne dois pas avoir la bonne gestion par les Evénements
Code:
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
134
135
| <html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=10">
<meta charset="utf-8">
<style type="text/css">
<!-- .editor {
font-family: tahoma
}
#menutable {
width: 500;
height: 500;
background-color: gray;
}
TD {
border: 1px solid black;
}
-->
</style>
<script>
var elarge = false;
var htop = 0;
var table;
function createTable() {
var ligne = document.getElementById("lignes").value;
var colone = document.getElementById("colones").value;
var divpar = document.getElementById("menutable");
table = document.createElement("Table");
divpar.appendChild(table);
var tb = document.createElement("TBODY");
table.appendChild(tb);
for (var i = 0; i < ligne; i++) {
var tr = document.createElement("TR");
for (var c = 0; c < colone; c++) {
var td = document.createElement("TD");
td.style.width = "50px";
td.style.height = "20px";
td.setAttribute("Width", 50);
td.id = "L" + (i + 1) + "c" + (c + 1);
tr.appendChild(td);
}
tb.appendChild(tr);
}
table.cellSpacing = 0;
table.cellPadding = 0;
table.style.borderCollapse = "collapse";
//table.addEventListener("mousemove", capte, false);
table.addEventListener("mousedown", enlarge, false);
table.addEventListener("mouseup", raise, false);
htop = table.offsetTop + table.parentElement.offsetTop;
divpar.addEventListener("mousemove", capte, false);
}
function capte(e) {
var X = e.pageX;
var Y = e.pageY;
var elem = document.elementFromPoint(X, Y);
if (elarge == false) {
var RR = elem.offsetLeft + Math.round(elem.style.width.replace("px", "") - (X - 8));
var HH = elem.parentElement.offsetTop + htop + Math.round(elem.style.height.replace("px", "") - (Y) - 8);
document.getElementById("vue").innerText = elem.id + "---" + HH;
if (RR < 2) {
e.target.style.cursor = "col-resize";
}
if (HH < 2) {
e.target.style.cursor = "row-resize";
}
if (RR > 2 && HH > 2) {
e.target.style.cursor = "pointer";
}
}
if (elem.style.cursor == "col-resize" && elarge == true) {
elem.style.width = (X - 8) - elem.offsetLeft + "px";
table.style.with=table.style.with.replace("px","")+((X - 8) - elem.offsetLeft )+ "px"
}
}
function enlarge(e) {
elarge = true;
}
function raise(e) {
elarge = false;
}
</script>
</head>
<body>
<div id=menutable>
<input type="text" id=lignes style="width:25px;" value=10 />
<input type="text" id=colones style="width:25px;" value=5 />
<input type="button" value="valider" onclick="createTable()" />
<input type="text" id=vue />
<br>
</div>
</body> |
