checkbox input in selection table missing surrounding td.

[rouilj]

This is the cause of #72's issue with the checkbox not being vertically aligned to the middle.

Fix is to wrap the checkbox in a td and adjust the javascript code to account for the td wrapper.

The original patch was incomplete. I forgot changing the enter and space key handlers to check the checkbox. This is the new patch.

diff --git a/html/classhelper.js b/html/classhelper.js
index 3ff630ef..7297ec71 100644
--- a/html/classhelper.js
+++ b/html/classhelper.js
@@ -813,11 +826,13 @@ class ClassHelper extends HTMLElement {
             row.classList.add("row-style");

             if (includeCheckbox) {
+                const td = document.createElement('td');
                 const checkbox = document.createElement("input");
                 checkbox.setAttribute("type", "checkbox");
                 checkbox.checked = false;
                 checkbox.setAttribute("tabindex", -1);
-                row.appendChild(checkbox);
+                td.appendChild(checkbox)
+                row.appendChild(td);
                 if (preSelectedValues.includes(entry[headers[0]])) {
                     checkbox.checked = true;
                 }
@@ -834,7 +849,10 @@ class ClassHelper extends HTMLElement {
         if (includeCheckbox) {
             tbody.addEventListener("click", (e) => {
                 let id, tr;
-                if (e.target.tagName === "INPUT" || e.target.tagName === "TD") {
+                if (e.target.tagName === "INPUT" ) {
+                  tr = e.target.parentElement.parentElement;
+                 id = tr.dataset.id;
+               } else if (e.target.tagName === "TD") {
                     id = e.target.parentElement.dataset.id;
                     tr = e.target.parentElement;
                 } else if (e.target.tagName === "TR") {
@@ -842,8 +860,10 @@ class ClassHelper extends HTMLElement {
                     tr = e.target;
                 }

-                if (e.target.tagName !== "INPUT") {
-                    tr.children.item(0).checked = !tr.children.item(0).checked;
+              if (e.target.tagName !== "INPUT") {
+               /* checkbox is only child of the first td of the table row */
+               let checkbox = tr.children.item(0).children.item(0);
+               checkbox.checked = !checkbox.checked;
                 }

                 this.dispatchEvent(new CustomEvent("selection", {
@@ -1059,7 +1084,8 @@ class ClassHelper extends HTMLElement {
                 if (e.target.tagName == "TR" && e.shiftKey == false) {
                     e.preventDefault();
                     let tr = e.target;
-                    tr.children.item(0).checked = !tr.children.item(0).checked;
+                    let checkbox = tr.children.item(0).children.item(0)
+                    checkbox.checked = !checkbox.checked;
                     this.dispatchEvent(new CustomEvent("selection", {
                         detail: {
                             value: tr.dataset.id
@@ -1076,7 +1102,8 @@ class ClassHelper extends HTMLElement {
                 if (e.target.tagName == "TR" && e.shiftKey == false) {
                     e.preventDefault();
                     let tr = e.target;
-                    tr.children.item(0).checked = !tr.children.item(0).checked;
+                    let checkbox = tr.children.item(0).children.item(0)
+                    checkbox.checked = !checkbox.checked;
                     this.dispatchEvent(new CustomEvent("selection", {
                         detail: {
                             value: tr.dataset.id