Redimensionner les cellules d'une table dynamiquement (menu inserttable)

**patricktoulon** · 03/04/2017, 19h21

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 html :

Sélectionner tout - Visualiser dans une fenêtre à part

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>

**Beginner.** · 03/04/2017, 19h26

Salut,

Ah je n'avais pas compris que tu en étais déjà au redimensionnement, moi j'en étais encore à l'insertion dynamique d'une table...

**patricktoulon** · 03/04/2017, 19h30

re
a ben l'insertion n'a rien de compliqué ( se sera insertnode ou appendChild dans le wig )mais détrompe toi je n'en suis pas a l'insertion
actuellement la table est créée dans la div du menu

**Beginner.** · 03/04/2017, 19h40

Ben pourquoi ne pas commencer par la "création" et l'insertion là où se trouve le curseur ?

Et je pense que ce serait mieux de fixer les dimensions de la table plutôt que de fixer celles de chaque cellule, ça correspond mieux à ce qui se fait (l'éditeur de ce forum, CKEditor, OppenOffice...)...

**patricktoulon** · 03/04/2017, 19h58

re
insérer la table au curseur rendrait quasiment impossible de le faire avec la souris car trop fastidieux j'utilise deja les event mouve et down t up dans le wysiwyg pour d'autre fonctions ca me ferait tout modifier on avait mis cela au point avec noSmoking et autre notamment pour le drag &&eplace des divs
et crois moi j'ai pas envie de recommencer

non sur ce div: comme ca on fait e qu'on veut