As the title suggests, i need help with my Javascript datatable. I have some existing logic to handle a "enter" press, when multiple rows is marked. When i press enter, i want this logic:
If all rows are unchecked: Check all rows If all rows are checked: Uncheck all rows If atleast one row is checked: Check all rows
JS is not my strongest side, and i tried many different AI models to get help, but all where unsuccessful. So please head my call and help me resolve this.
Here is my code that reacts on enter keypress today:
///enter
if (charCode == 13) {
var inputTryOne = $(e.target).find("input[type='checkbox']");
var inputTryTwo = $(e.currentTarget).find("input[type='checkbox']");
var input = inputTryOne[0] ?? inputTryTwo[0];
if (input != undefined) {
input = $(input);
var td = input.closest("td");
td.closest("tr").toggleClass("selected");
input.prop("checked", !input.prop("checked"));
input.trigger("change");
this.parent.lykoGridKeyboardNavigation.moveDown(false, false);
return;
}
thismitEditedCells();
this.parent.lykoGridKeyboardNavigation.moveDown(false, false);
return;
}
The following code is the response from an AI was the closes to success, but it does not set the state of the row correct, it checks/unchecks the checkbox, but it does not trigger an event so the row "actually gets selected" and is included in calculations / gets a green row color.
if (charCode == 13) {
var inputTryOne = $(e.target).find("input[type='checkbox']");
var inputTryTwo = $(e.currentTarget).find("input[type='checkbox']");
var input = inputTryOne[0] ?? inputTryTwo[0];
if (input != undefined) {
// We're dealing with checkboxes
// Check if we have multiple cells selected
if (this.parent.selectedCells && this.parent.selectedCells.length > 1) {
console.log("Multiple cells selected:", this.parent.selectedCells.length);
// Find all unique rows and their checkboxes
var rows = [];
var checkboxes = [];
var checkedCount = 0;
var totalCount = 0;
// Use a map to track unique rows by ID to ensure uniqueness
var processedRows = {};
// First gather info about all selected rows
for (var i = 0; i < this.parent.selectedCells.length; i++) {
var cell = this.parent.selectedCells[i];
var row = $(cell).closest('tr')[0];
if (row) {
// Use the row's DOM element as a unique identifier
var rowId = row.id || i; // Use index as fallback if no ID
if (!processedRows[rowId]) {
processedRows[rowId] = true;
// Find the checkbox directly from the row
var checkbox = $(row).find('input[type="checkbox"]')[0];
if (checkbox) {
rows.push(row);
checkboxes.push(checkbox);
totalCount++;
// Check its current state
if (checkbox.checked) {
checkedCount++;
}
}
}
}
}
console.log("Found rows:", rows.length, "Total checkboxes:", totalCount, "Checked:", checkedCount);
// Determine what action to take
var setToChecked;
if (checkedCount === totalCount && totalCount > 0) {
// If ALL are checked, uncheck all
console.log("All are checked, unchecking all");
setToChecked = false;
} else {
// If ANY are checked or NONE are checked, check all
console.log("Not all are checked, checking all");
setToChecked = true;
}
// Update all checkboxes in one go
for (var j = 0; j < rows.length; j++) {
// Get the checkbox directly to ensure we're working with the actual element
var checkbox = checkboxes[j];
var row = rows[j];
console.log("Setting checkbox for row", j, "to", setToChecked);
// Set the checked state
checkbox.checked = setToChecked;
// Update row class based on the new state
if (setToChecked) {
$(row).addClass("selected");
} else {
$(row).removeClass("selected");
}
}
return;
}
// Single row case - keep the original behavior
input = $(input);
var td = input.closest("td");
td.closest("tr").toggleClass("selected");
input.prop("checked", !input.prop("checked"));
input.trigger("change");
this.parent.lykoGridKeyboardNavigation.moveDown(false, false);
return;
}
thismitEditedCells();
this.parent.lykoGridKeyboardNavigation.moveDown(false, false);
return;
}