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