Ich habe eine Klasse um Checkboxen als Slider darzustellen
Die CSS Klasse :
.slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #ccc;
-webkit-transition: .4s;
transition: .4s;
}
.slider:before {
position: absolute;
content: "";
height: 15px;
width: 15px;
left: 2px;
bottom: 0px;
background-color: white;
-webkit-transition: .4s;
transition: .4s;
}
input:checked + .slider {
background-color: #2196F3;
}
input:focus + .slider {
box-shadow: 0 0 1px #2196F3;
}
input:checked + .slider:before {
-webkit-transform: translateX(15px);
-ms-transform: translateX(15px);
transform: translateX(15px);
}
/* Rounded sliders */
.slider.round {
border-radius: 15px;
}
.slider.round:before {
border-radius: 50%;
}
Die statische Html Syntax sieht so aus :
<label class="switch">
<input type="checkbox" id="status-detailed" name="status-
detailed"
title="Show detailed
status"/>
<span class="slider round"></span>
Wie kann ich die Slider Checkboxen dynamisch erzeugen ?
Die normale Checkbox habe ich so erzeugt:
thiscell = cfgValvesTable.rows[row].cells[2];
el = document.createElement('input');
el.setAttribute('type', 'checkbox');
el.setAttribute('name', 'cfgVActive' + row);
el.setAttribute('id', 'cfgVActive' + row);
thiscell.appendChild(el);
Vielen Dank schon mal für die Antworten