Warum wird in meiner bearbeitbaren Tabelle ein Textfeld anstelle eines Dropdown-Menüs gerendert? [geschlossen] ⇐ HTML

[Guest]

Ich entwickle ein jQuery-Plugin für bearbeitbare HTML-Tabellen. Die Tabelle sollte eine Inline-Bearbeitung ermöglichen und bestimmte Spalten (z. B. Spalte 1 für „Position“) sollten ein Dropdown-Menü zur Bearbeitung darstellen. Anstelle eines Dropdowns wird jedoch ein Textfeld gerendert.
Was ich getan habe:
Ich habe eine Logik implementiert, um zu überprüfen, ob eine Spalte für ein Dropdown konfiguriert ist. Wenn ja, sollte ein Element mit vordefinierten Optionen gerendert werden.
Wenn die Spalte nicht für ein Dropdown konfiguriert ist, wird ein Textfeld zur Bearbeitung gerendert.
Ich habe auch die Spaltenkonfiguration überprüft und console.log( )-Anweisungen zum Debuggen des Problems.
Erwartetes Verhalten:
Wenn ich auf eine Zelle in Spalte 1 doppelklicke, erwarte ich, dass ein Dropdown-Menü mit den folgenden Optionen angezeigt wird:

Code: Select all

Developer
Designer
Manager
Analyst

Tatsächliches Verhalten:
Wenn ich auf die Zelle in Spalte 1 doppelklicke, wird anstelle eines Dropdowns ein Textfeld gerendert. Für andere Spalten funktioniert das korrekte Verhalten (Textfeld) einwandfrei.

Code: Select all

if (settings.enableEditing) {
$table.on('dblclick', 'td', function() {
const $cell = $(this);
const colIndex = $cell.index(); // Get column index

// 4.1 Skip if the column is not editable
if (settings.editableColumns.length > 0 && !settings.editableColumns.includes(colIndex)) {
return; // Skip if column is not editable
}

// 4.2 Prevent multiple edit fields
if ($cell.find('input, select').length > 0) return;

// 4.3 Save original value
const originalValue = $cell.text().trim();

// Debugging: Check what colIndex is and what dropdownColumns[colIndex] contains
console.log("Selected column index: " + colIndex);
console.log("Dropdown columns value: ", settings.dropdownColumns[colIndex]);

// 4.4 Check if the column has a dropdown
if (settings.dropdownColumns && settings.dropdownColumns[colIndex] && settings.dropdownColumns[colIndex].length > 0) {
// 4.4.1 Create dropdown
const $dropdown = $('').addClass('editable-dropdown');
settings.dropdownColumns[colIndex].forEach((option) => {
const $option = $('')
.val(option)
.text(option)
.prop('selected', option === originalValue); // Set original value as selected
$dropdown.append($option);
});

// 4.4.2 Add Save and Cancel icons
const $saveIcon = $('')
.addClass('editable-save-icon')
.html('✔') // Checkmark icon (✔)
.on('click', function() {
const newValue = $dropdown.val();
$cell.empty().text(newValue); // Update cell value
if (settings.onEditComplete) {
settings.onEditComplete($cell, originalValue, newValue); // Trigger callback
}
});

const $cancelIcon = $('')
.addClass('editable-cancel-icon')
.html('✖') // Cross icon (✖)
.on('click', function() {
$cell.empty().text(originalValue); // Revert to original value
});

// 4.4.3 Append dropdown and icons to the cell
$cell.empty().append($dropdown).append($saveIcon).append($cancelIcon);
} else {
// 4.5 Default text input for non-dropdown columns
const $input = $('')
.attr('type', 'text')
.val(originalValue)
.addClass('editable-input');

// 4.5.1 Add Save and Cancel icons
const $saveIcon = $('')
.addClass('editable-save-icon')
.html('✔') // Checkmark icon (✔)
.on('click', function() {
const newValue = $input.val().trim();
$cell.empty().text(newValue);
if (settings.onEditComplete) {
settings.onEditComplete($cell, originalValue, newValue);
}
});

const $cancelIcon = $('')
.addClass('editable-cancel-icon')
.html('✖') // Cross icon (✖)
.on('click', function() {
$cell.empty().text(originalValue);
});

// 4.5.2 Append input and icons to the cell
$cell.empty().append($input).append($saveIcon).append($cancelIcon);

// 4.5.3 Focus input field
$input.focus();
}
});
}

$(document).ready(function() {
$('#smartDataTable').SmartDataTablePro({
enableEditing: true,
editableColumns: [1, 2], // Make Position and Age editable
dropdownColumns: {
1: ['Developer', 'Designer', 'Manager', 'Analyst'], // Dropdown for column 1 (Position)
},
nonEditableColumns: [0], // Column 0 (Name) is non-editable
onEditComplete: function($cell, originalValue, newValue) {
console.log(`Cell updated from "${originalValue}" to "${newValue}"`);
},
});
});

Ich wäre sehr dankbar, wenn jemand dieses Problem löst
Grüße