43 lines
1.4 KiB
JavaScript
43 lines
1.4 KiB
JavaScript
// Hier den Code ergaenzen
|
|
// (Event-Handling fuer Hinzufuegen-Button, DOM-Manipulation fuer Tabelle)
|
|
var button = document.getElementsByTagName("button")[0];
|
|
button.onclick = function(){
|
|
createCheckbox();
|
|
}
|
|
var tbody = document.getElementsByTagName("tbody")[0];
|
|
var i = 0;
|
|
function createCheckbox(tr) {
|
|
// Hier den Code fuer die Erzeugung der Checkbox ergaenzen
|
|
// Empfohlene Strategie:
|
|
// 1. Erstelle eine Checkbox per DOM-API
|
|
// 2. Fuege einen Event-Handler fuer Klick auf die Checkbox hinzu
|
|
// 3. Falls Checkbox angehakt (checked): Text in Zeile (tr) durchstreichen
|
|
// 4. Sonst: Text in Zeile (tr) normal darstellen
|
|
var inputs = document.getElementsByTagName("input");
|
|
var content =inputs[inputs.length - 1].value;
|
|
var tr = document.createElement("tr");
|
|
|
|
var doneTd = document.createElement("td");
|
|
var checkbox = document.createElement("input");
|
|
checkbox.type = "checkbox";
|
|
|
|
checkbox.setAttribute("onclick", "toggleBox(" + i++ + ")");
|
|
doneTd.append(checkbox);
|
|
tr.append(doneTd);
|
|
|
|
var todoTd = document.createElement("td");
|
|
todoTd.append(document.createTextNode(content));
|
|
todoTd.style.textDecoration = "none";
|
|
tr.append(todoTd);
|
|
tbody.append(tr);
|
|
}
|
|
function toggleBox(num){
|
|
var text = document.getElementsByTagName("td")[num * 2 + 1];
|
|
if(text.style.textDecoration == "none"){
|
|
text.style.textDecoration = "line-through";
|
|
}else{
|
|
text.style.textDecoration = "none";
|
|
}
|
|
|
|
}
|