selectable table

by Elias Youssef

HTML

<table id="selectableTable">
    <thead id="selectableTableHead">
        <tr>
            <th>Omschrijving 1</th>
            <th>Omschrijving 2</th>
        </tr>
    </thead>
    <tbody id="selectableTableBody">
       
    </tbody>
</table>

CSS

body {
	padding: 10px 10px;
	font-family: sans-serif;
}
.selectedTableItem {
	background-color: #7194ff;
}
#selectableTable {
	width: 100%;
	border-collapse: collapse;
	text-align: center;
	max-width: 850px;
}
tr {
	display: grid;
	grid-template-columns: 50% 50%;
}
#selectableTableHead {
	background-color: #95b1ff;
	border-top-left-radius: 5px;
	border-top-right-radius: 5px;
}
#selectableTableBody {
	height: 200px;
	overflow: auto;
	display: block;
}
td, th {
	padding: 10px 0;
}
tr:nth-child(even) {
	background-color: #e4ebff;
}
#selectableTableBody > tr:hover {
	background-color: #b3c6ff;
	cursor: pointer;
	user-select: none;
}
.selected {
	background-color: #5781ff !important;
}

JavaScript

var Artikelnummer = 0;
var Omschrijving_1 = 1;
var Omschrijving_2 = 2;
var Z_indexnr = 3;
var demoP = document.getElementById("demo");
var bosmanZIndexA = [
	[10087553, "this is something", "much some", 15667316, 108016],
	[10087539, "that is something", "much some", 15066703, 246641],
	[10087528, "this is something", "very some", 15920712, 4102],
	[10087530, "that is something", "much some", 15920704, 4103],
	[10087536, "this is something", "very some", 15920739, 4104],
	[10087555, "that is something", "much some", 15920720, 4101],
	[10087556, "this is something", "very some", 15920755, 4105]
];
var selectMenu = document.getElementById("selectMenu");
var selectableTableBody = document.getElementById("selectableTableBody");
var tr;
var td;
var tdText;
var rows;

function removeClass(currentValue) {
	currentValue.classList.remove("selected");
}

function fillSelect(item, index, array) {
	tr = document.createElement("TR");
	td = document.createElement("TD");
	tdText = document.createTextNode(item[Omschrijving_1]);
	td.appendChild(tdText);
	tr.appendChild(td);
	td = document.createElement("TD");
	tdText = document.createTextNode(item[Omschrijving_2]);
	td.appendChild(tdText);
	tr.appendChild(td);
	tr.classList.add("selectableItem");
	tr.id = "tableItem_" + item[Artikelnummer];
	tr.onclick = function (e) {
		if (e.ctrlKey || e.metaKey) {
			this.classList.toggle("selected");
		} else if (e.altKey){
			this.classList.remove("selected");
		} else {
			rows.forEach(removeClass);
			this.classList.add("selected");
		}
		console.log(rows.indexOf(this));
	};
	selectableTableBody.appendChild(tr);
}
bosmanZIndexA.forEach(fillSelect);
rows = Array.from(document.querySelectorAll("#selectableTableBody > tr"));