<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>JS Table Cell Selector</title>
<style>
table {
border-collapse: collapse;
}
table td, table th {
border: solid #000 1px;
padding: 5px;
width: 30px;
height: 20px;
text-align: center;
vertical-align: center;
}
thead {
background-color: #DDF;
}
tfoot {
background-color: #DFD;
}
.tcs-select {
background-color: #A6DCED;
}
.tcs-ignore {
background-color: #BBB;
}
.tcs-select.tcs-ignore,
.tcs-ignore .tcs-select {
background-color: #7AAAB9;
}
.interface {
font-size: 1.2em;
}
.interface input[type=number] {
width: 3em;
}
.tables {
display: flex;
flex-direction: row;
align-items: flex-end;
}
#size-matrix {
margin-left: 3em;
}
</style>
</head>
<body>
<h1>JS Table Cell Selector</h1>
<div class="tables">
<table id="tcs-table">
<thead>
<tr class="tcs-ignore">
<th>0.0</th>
<th>0.1</th>
<th>0.2</th>
<th>0.3</th>
<th>0.4</th>
<th>0.5</th>
<th>0.6</th>
</tr>
<tr class="">
<th>1.0</th>
<td>1.1</td>
<td>1.2</td>
<td>1.3</td>
<td>1.4</td>
<td>1.5</td>
<td>1.6</td>
</tr>
<tr>
<th>2.0</th>
<td>2.1</td>
<td>2.2</td>
<td>2.3</td>
<td>2.4</td>
<td>2.5</td>
<td>2.6</td>
</tr>
</thead>
<tbody>
<tr>
<th>3.0</th>
<td>3.1</td>
<td class="tcs-ignore">3.2</td>
<td>3.3</td>
<td>3.4</td>
<td>3.5</td>
<td>3.6</td>
</tr>
<tr>
<th>4.0</th>
<td>4.1</td>
<td>4.2</td>
<td>4.3</td>
<td colspan="2" rowspan="2">4.4</td>
<td>4.6</td>
</tr>
<tr>
<th>5.0</th>
<td>5.1</td>
<td class="tcs-ignore" rowspan="2">5.2</td>
<td>5.3</td>
<td>5.6</td>
</tr>
<tr>
<th>6.0</th>
<td>6.1</td>
<td>6.3</td>
<td>6.4</td>
<td>6.5</td>
<td>6.6</td>
</tr>
</tbody>
<tfoot>
<tr>
<th>7.0</th>
<td>7.1</td>
<td>7.2</td>
<td>7.3</td>
<td>7.4</td>
<td>7.5</td>
<td class="tcs-ignore">7.6</td>
</tr>
<tr>
<th>8.0</th>
<td>8.1</td>
<td class="tcs-ignore" colspan="2">8.2</td>
<td>8.4</td>
<td>8.5</td>
<td>8.6</td>
</tr>
</tfoot>
</table>
<div id="size-matrix">
<strong>Size matrix</strong>, where cells contain values [back up, back left, col position]:<br>
<table></table>
</div>
</div>
<br>
<br>
<div class="interface">
<form>
<input type="checkbox" name="deselectOutTableClick" value="1"> deselectOutTableClick<br>
<input type="checkbox" name="enableChanging" value="1" checked> enableChanging<br>
<input type="checkbox" name="selectIgnoreClass" value="1" checked> selectIgnoreClass<br>
<input type="checkbox" name="ignoreThead" value="1"> ignoreThead<br>
<input type="checkbox" name="ignoreTfoot" value="1"> ignoreTfoot<br>
<br>
Y1: <input type="number" name="coord1-y" value="5"> X1: <input type="number" name="coord1-x" value="3"><br><br>
Y2: <input type="number" name="coord2-y" value="6"> X2: <input type="number" name="coord2-x" value="4"><br><br>
<button id="select">Select</button>
<button id="select-all">Select all</button>
<button id="deselect">Deselect</button>
<button id="coords">Get coordinates</button>
<br><br>
<button id="clear">Clear</button>
<button id="copy">Copy</button>
<button id="cut">Cut</button>
<button id="paste">Paste</button> (array for pasting: [[a, b, c], [d, e, f], [g, h, i]]
<br><br>
<button id="destroy">Destroy</button>
<button id="init">Init</button>
</form><br>
<b>Open the browser console!!!</b>
</div>
<script>
document.addEventListener("DOMContentLoaded", function(e) {
console.log('example');
var table = document.getElementById("tcs-table");
var options = {
changeTracking: true,
deselectOutTableClick: false,
enableChanging: true,
onStartSelect: function (event, cell) {
console.log("start select");
},
onSelect: function (prevState, cell, coord) {
console.log('select',prevState, coord);
},
onDeselect: function (cell, coord) {
console.log('deselect',coord);
},
onFinishSelect: function (event) {
console.log("finish select");
}
};
var buffer = new TableCellSelector.Buffer();
var tcs = new TableCellSelector(table, options, buffer);
// out size matrix
var sizeTable = document.getElementById("size-matrix").getElementsByTagName("table")[0];
tcs.obSelector.matrix.forEach(function(rowData) {
var row = document.createElement('tr');
rowData.forEach(function (cellData) {
var cell = document.createElement('td');
cell.appendChild(document.createTextNode(cellData));
row.appendChild(cell);
});
sizeTable.appendChild(row);
});
function getCoord() {
return [
[
document.getElementsByName("coord1-y")[0].value,
document.getElementsByName("coord1-x")[0].value
],
[
document.getElementsByName("coord2-y")[0].value,
document.getElementsByName("coord2-x")[0].value
]
]
}
// options
document.getElementsByName("deselectOutTableClick")[0].onclick = function (e) {
tcs.destroy();
options["deselectOutTableClick"] = this.checked;
tcs = new TableCellSelector(table, options, buffer);
};
document.getElementsByName("enableChanging")[0].onclick = function (e) {
tcs.destroy();
options["enableChanging"] = this.checked;
tcs = new TableCellSelector(table, options, buffer);
};
document.getElementsByName("selectIgnoreClass")[0].onclick = function (e) {
options["selectIgnoreClass"] = this.checked;
tcs.destroy();
tcs = new TableCellSelector(table, options, buffer);
};
document.getElementsByName("ignoreThead")[0].onclick = function (e) {
options["ignoreThead"] = this.checked;
tcs.destroy();
tcs = new TableCellSelector(table, options, buffer);
};
document.getElementsByName("ignoreTfoot")[0].onclick = function (e) {
options["ignoreTfoot"] = this.checked;
tcs.destroy();
tcs = new TableCellSelector(table, options, buffer);
};
// btns
document.getElementById("select").onclick = function (e) {
e.preventDefault();
var coords = getCoord();
var res = tcs.select(coords[0], coords[1]);
console.log("select = " + res);
};
document.getElementById("select-all").onclick = function (e) {
e.preventDefault();
var res = tcs.selectAll();
console.log("selectAll = " + res);
};
document.getElementById("deselect").onclick = function (e) {
e.preventDefault();
var res = tcs.deselect();
console.log("deselect = " + res);
};
document.getElementById("coords").onclick = function (e) {
e.preventDefault();
var res = tcs.getCoords();
console.log("coords = " + (res ? "[["+res[0]+"],["+res[1]+"]]" : res));
};
document.getElementById("clear").onclick = function (e) {
e.preventDefault();
console.log("clear");
tcs.clear();
};
document.getElementById("copy").onclick = function (e) {
e.preventDefault();
console.log("copy");
console.log(tcs.copy());
};
document.getElementById("cut").onclick = function (e) {
e.preventDefault();
console.log("cut");
console.log(tcs.cut());
};
document.getElementById("paste").onclick = function (e) {
e.preventDefault();
console.log("paste");
console.log(tcs.paste(
[
["a", "b", "c"],
["d", "e", "f"],
["g", "h", "i"]
]
));
};
document.getElementById("init").onclick = function (e) {
e.preventDefault();
tcs = new TableCellSelector(table, options);
console.log("init");
};
document.getElementById("destroy").onclick = function (e) {
e.preventDefault();
tcs.destroy();
console.log("destroy");
};
});
</script>
</body>
</html>