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

您可以将 input 事件侦听器附加到行中。因此，每当一行文本为空字符串时，将其背景设为红色，如果不为空，则将其设置为另一种颜色。

$('.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>

Answer 2

只需指出属性contenteditable="false"与缺少属性一样，而contenteditable="true"和contenteditable都使其可编辑。

如果您希望动态地操作$(this).prop("contenteditable",false);，就可以使用。

现在，我们（一旦得到解决）就可以将功能锁定在实际属性上，然后我们就不必处理td[2]并进行维护（如果您添加列等），请在在我的示例中，我分别设置了一些。

然后，您可以使用input事件。然后，代码在这里真的很简单，请不要在类中使用.css(，只需切换它们即可-我在这里使用bootstrap来显示多个，但就像您的empty-cell示例一样，您的代码也可以。请注意，如果有人放置空格，它将转换为 -因此我也添加了该条件，但使用了警告类。用空格和空格测试不同的单元，以查看实际情况（将其设为空格）。

通过将其链接到包装器元素$('#csv-file-data')以及将其清空的动作（而不是文档），使此代码与动态创建的表兼容，但不适用于文档，因此例如，如果您有其他表，则该代码特定于此

$(function() {
  $('#csv-file-data')
    .on('input', 'tbody td[contenteditable]', function(event) {
      $(this)
        .toggleClass('alert alert-warning', ($(this).html() == " " || $(this).html() == "&nbsp;"))
        .toggleClass('empty-cell alert alert-danger', ($(this).html() == ""));
    });
});

td.empty-cell {
  background-color: red;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.bundle.min.js" integrity="sha384-xrRywqdh3PHs8keKZN+8zzc5TX0GRTLCcmivcbNJWm2rs5C8PRhcEn3czEjhAO9o" crossorigin="anonymous"></script>

<div class="input-group">
  <div class="input-group-prepend">
    <span class="input-group-text" id="inputGroupFileAddon01">Upload</span>
  </div>
  <div class="custom-file">
    <input type="file" class="custom-file-input" id="upload" aria-describedby="inputGroupFileAddon01">
    <label class="custom-file-label" for="inputGroupFile01">Choose file</label>
  </div>
</div>
<div id="table-container">
  <div id="csv-file-data">
    <table class="table table-striped table-bordered beta">
      <thead>
        <tr>
          <th>scala</th>
          <th>piano</th>
          <th>interno</th>
          <th>mq</th>
          <th>foglio</th>
          <th>particella</th>
          <th>sub</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td class="scala" contenteditable="false">scala stuff</td>
          <td class="piano" contenteditable="false">piano stuff</td>
          <td class="interno" contenteditable="true">interno stuff</td>
          <td class="mq" contenteditable="false">mq stuff</td>
          <td class="foglio" contenteditable="false">foglio stuff</td>
          <td class="particella" contenteditable="false">particella stuff</td>
          <td class="sub" contenteditable="false">sub stuff</td>
        </tr>
        <tr>
          <td class="scala">scala stuffcan be edited</td>
          <td class="piano">piano stuff can edit</td>
          <td class="interno" contenteditable="true">interno stuff</td>
          <td class="mq" contenteditable="false">mq stuff</td>
          <td class="foglio" contenteditable="false">foglio stuff</td>
          <td class="particella">particella stuff</td>
          <td class="sub">sub stuff</td>
        </tr>
        <tr>
          <td class="scala" contenteditable="false">scala stuff</td>
          <td class="piano" contenteditable="false">piano stuff</td>
          <td class="interno" contenteditable="true">interno stuff</td>
          <td class="mq">mq stuff</td>
          <td class="foglio">foglio stuff</td>
          <td class="particella">particella stuff</td>
          <td class="sub">sub stuff</td>
        </tr>
      </tbody>
    </table>
  </div>

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

2 个答案: