How to change cell background after contenteditable

I’m importing some csv columns into a html table, I need to some validation, if one or more than one cells for a specific column are empty then I don’t allow to import data to my database and I highlight the empty cell with a background color. It is a editable table, can someone explain how I can change the background colour when the empty cell has bene edited and is not empty anymore?

this is what my javascript look like so far:

function NoneEmpty(arr) {
  for (var i = 0; i < arr.length; i++) {
    if (arr[i] === "") return false;
  }
  return true;
}

$(document).on('click', '#import_data', function (e) {

  if (NoneEmpty(interno) == false) {

    $('.beta tr').each(function (i) {
      var column2cell = $($(this).children('td')[2]);
      if (column2cell.text() == "") {
        column2cell.css('background-color', 'red');
      }
    });

    return;

  }

});

‘transparent’ is a valid declaration for background-color.

Alternatively, solve this problem with CSS in general instead of using Javascript.

.beta tr td:nth-child(2):empty {
  background-color: red;
}
1 Like

Hi @m_hutley I’ve managed to highlight (red backgroud) the empty cell and prevent import to database, the problem is I would like to remove the background after the use add some text into the cell, the table is editable using “contenteditable”

How does the CSS fail to solve that problem?

The CSS applies to empty cells. So when the cell stops being empty… the CSS stops applying to it…

1 Like

Hi guys, thanks fory your replies I’ve sorted it out in this way:


function check_if_empty_array(arr) {
	for (var i = 0; i < arr.length; i++) {
		if (arr[i] === "") return false;
	}
	return true;
}

// The intenro array has empty values then highlight the cell background
if (check_if_empty_array(interno) == false) {
	// Loop through each cell
	$('.csv_import_data_table tr').each(function (i) {
		// Get the column to be validated
		var column2cell = $($(this).children('td')[2]); // [2] specify column number
		// Check if cell in the specified column is empty
		if (column2cell.text() == "") {
			// Add pale red background to the cell is it is empty
			column2cell.css('background-color', '#ffb4b4');
			// Add danger class for validation message
			$('.alert_custom').addClass('alert-danger').show();
			// Show validation error message if empty cell in the table
			$('#csv_table_validation_error').html("Per favore assicurati che per ogni unità immobiliare venga specificato il valore dell'interno, puoi editare le celle senza caricare un nuovo file .csv oppure modificare il foglio .cvs ed importarlo nuovamente.");

		}

		// Catch event if the user add text to the empty cell 
		column2cell.on('input', function () {
			// If the cell has some text then change background to pale green
			if ($(this).text() != "") {
				column2cell.css('background-color', '#cfffb4');
			} else {
				// If the cell is still empty then add again pale red background
				column2cell.css('border-color', '#ffb4b4');
			}

		});

	});
	// This is important to prevent ajax to be sent if validation error
	return;

}

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.