javascript - 内容编辑后如何更改单元格背景？

Question

我正在将一些 csv 列导入到 html 表中。我需要进行一些验证:如果特定列的一个或多个单元格为空，则我不允许将数据导入到我的数据库中，并且我会用背景颜色突出显示空单元格。它是一个可编辑的表格；有人可以解释当空单元格已被编辑且不再为空时如何更改背景颜色吗？

这是我的 javascript 到目前为止的样子:

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;

  }

});

//This is how I build the html table after uploading the csv file

$('#upload').click(function(e) {

  // Prevent form to be submitted again after page refresh
  e.preventDefault();

  var formData = new FormData();
  formData.append('csv_file', $('#csv_file')[0].files[0]);
  // Append ajax action to formData so I can process the model from the controller
  formData.append('ajax_action', 'kmg_admin_fetch_csv_building_unit');

  $.ajax({

    method: "POST",
    data: formData,
    dataType: 'json',
    contentType: false,
    // cache:false,
    processData: false,

    success: function(data) {

      if (data.notice_code == KM_ERROR_CODE) {

        alert('err');

        $('#csv_file_data').html("<div class='alert alert-danger'>" + data.notice_message + "</div>");

      } else {

        var html = '<table class="table table-striped table-bordered beta">';

        if (data.column) {
          html += '<tr>';
          for (var count = 0; count < data.column.length; count++) {
            html += '<th>' + data.column[count] + '</th>';
          }
          html += '</tr>';
        }

        if (data.row_data) {
          for (var count = 0; count < data.row_data.length; count++) {
            html += '<tr>';
            html += '<td class="scala" contenteditable>' + data.row_data[count].scala + '</td>';
            html += '<td class="piano" contenteditable>' + data.row_data[count].piano + '</td>';
            html += '<td class="interno" contenteditable="true">' + data.row_data[count].interno + '</td>';
            html += '<td class="mq" contenteditable>' + data.row_data[count].mq + '</td>';
            html += '<td class="foglio" contenteditable>' + data.row_data[count].foglio + '</td>';
            html += '<td class="particella" contenteditable>' + data.row_data[count].particella + '</td>';
            html += '<td class="sub" contenteditable>' + data.row_data[count].sub + '</td></tr>';

          }
        }

        html += '<table>';
        html += '<div align="center"><button type="button" id="import_data" class="btn btn-success">Importa unità immobilari</button></div>';

        $('#csv_file_data').html(html);
        $('#upload_csv')[0].reset();

      }

    }
  });

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

<form id="upload_csv" method="post" enctype="multipart/form-data">
  <div class="row">
    <div class="col-md-5">
      <div class="form-group">
        <div class="fileinput fileinput-new" data-provides="fileinput">
          <div class="input-group input-large">
            <div class="form-control uneditable-input input-fixed input-medium" data-trigger="fileinput">
              <span class="fileinput-filename"> </span>
            </div>
            <span class="input-group-addon btn default btn-file">
                                                                            <span class="fileinput-new"> Seleziona documento </span>
            <span class="fileinput-exists"> Modifica </span>
            <input type="file" name="csv_file" id="csv_file" accept=".csv">
            </span>
            <a class="input-group-addon btn red fileinput-exists" data-dismiss="fileinput"> Rimuovi </a>
          </div>
        </div>
      </div>
    </div>

    {#
    <div class="col-md-1"> #}
      <button type="submit" id="upload" name="upload" class="btn blue" value="Upload"><i class="fa fa-cloud-upload"></i> Carica file csv</button> {# </div> #}
  </div>
</form>

<div class="clearfix margin-bottom-10"> </div>
<div id="csv_file_data"></div>

Answer 1

您可以将输入事件监听器附加到您的行。因此，每次行的文本为空字符串时，都会将其背景设置为红色，如果它不为空，则将其背景设置为不同的颜色。

$('.beta tr').each(function(i) {
  var column2cell = $($(this).children('td')[2]);

  if (column2cell.text() == "") {
    column2cell.css('background-color', 'red');
  }
  column2cell.on('input', function() {
    if ($(this).text() != "") {
      column2cell.css('background-color', '#dddddd');
    } else {
      column2cell.css('background-color', 'red');
    }
  });
});

table {
  font-family: arial, sans-serif;
  border-collapse: collapse;
  width: 100%;
}

td,
th {
  border: 1px solid #dddddd;
  text-align: left;
  padding: 8px;
}

tr {
  background-color: #dddddd;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="myTable" class="beta">
  <tr>
    <th>Company</th>
    <th>Contact</th>
    <th>Country</th>
  </tr>
  <tr>
    <td contentEditable="true">Company A</td>
    <td contentEditable="true">Person A</td>
    <td contentEditable="true"></td>
  </tr>
  <tr>
    <td contentEditable="true">Company B</td>
    <td contentEditable="true">Person B</td>
    <td contentEditable="true">Country B</td>
  </tr>
  <tr>
    <td contentEditable="true">Company C</td>
    <td contentEditable="true">Person C</td>
    <td contentEditable="true">Country C</td>
  </tr>
</table>