Question

我正在使用flask创建Web应用程序。

/companies.html任务是创建一个表，其中包含从MongoDb数据库导入的一些文本和日期（在mLab中托管）。

这是python文件的重要部分：

@app.route('/companies', methods=['GET'])
def showCompanies():
    if 'userName' not in session:
        return redirect(url_for('start_page'))
    mongoCompanies = mongo.db.companies
    mLabCompanies = [x for x in mongoCompanies.find()]
    return render_template('companies.html', mLabCompanies=mLabCompanies)

以下是一些示例html：

{% for theCompany in mLabCompanies %}
<tr><td>{{theCompany.companyName}}</td> <td {{theCompany.companyShouldGetANumberDate}}</td> <td>{{theCompany.companyShouldGetBNumberDate}}</td></tr>
{% endfor %}

这只是一个样本。完整版包含114个单元格，其中约20％是日期，80％是标准文本。它运作良好 - 我的意思是生成表并填充数据库记录。

现在我需要js来比较这些日期和今天的颜色（如果日期是过去，则变为红色，如果日期是将来，则变为绿色）。

这是我创建的js。

<script>
function checkDate() {
    var todayDate = new Date();
    var checkedDate = Date.parse(theCompany.textContent);
    if (checkedDate > todayDate){
        theCompany.style.color = "green";
    } else {
        theCompany.style.color = "red"
    }
}
</script>

JS脚本不起作用。我应该改变什么？
在html中我应该放置JS以使其检查每个日期并更改其颜色？

Answer 1

JavaScript有几个语法错误。看起来您需要将theCompany.textContent中保存的日期字符串转换为日期，以便将其与todayDate进行比较。为此，您需要使用 Date.parse() 。

以下是更正后的版本：

<script>
  function checkDate() {
    var todayDate = new Date();

    // Depending on what "theCompany" is, this still may not work
    // It looks like it is an HTML element, in which case, you will
    // need to extract the content of the element (i.e. theCompany.textContent)
    // and then you'll need to make a new data from that string of data
    // before you try to compare it to "todayDate" with 
    // "Date.parse(valid date string here)"
    var checkedDate = Date.parse(theCompany.textContent);
    if (checkedDate > todayDate){
         theCompany.style.color = "green";
    } else {
         thCompany.style.color = "red"
    }
  }
</script>

Answer 2

在我看来，最好在服务器上运行，以删除日期上的本地时区变幻莫测，并从客户端删除不必要的代码。

据推测，您有一个包含公司名称和日期的表格，并且您希望根据日期是否在未来为日期单元格着色。因此，您需要一种方法来首先获取公司单元格，然后找到相关的日期单元格，然后适当地为单元格着色。

您可以使用带选择器的查询来获取公司名称，我建议您为单元格提供类或数据属性以区分它们。类似于日期单元格，因此很容易找到它们。您需要处理日期单元格中的值，该值可能不是有效日期。您可以编写小的解析函数（见下文）或使用库。

然后应用一个类来改变日期单元格的颜色，然后与＆＃34;今天＆＃34;进行比较，例如

修改

您似乎只想处理日期单元格并忽略公司单元格。以下是这样做的编辑版本，它只需要注释掉2行，然后对第三行进行少量更改（保留原始行并注释掉以显示更改）。

＆＃13;

/* Parse ISO formatted date, e.g. 2017-06-30 as local
** @param {string} s - date in ISO 8601 format
** @returns {Date} will be an invalid date if string is not a valid date
*/
function parseISOasLocal(s) {
  var b = s.split(/\D/);
  var d = new Date(b[0],--b[1],b[2]);
  return d && d.getMonth() == b[1]? d : new Date(NaN);
}

// Edited to only deal with dateCells

window.onload = function(){
  // Get all the company and date cells
//  var companyCells = document.querySelectorAll('.companyName');
  var dateCells = document.querySelectorAll('.companyDate');
  var today = new Date();
  // For each company cell, get the date cell and apply a class
  // based on whether the date is in the future or not
  // Invalid dates get the same class as past dates
//  [].forEach.call(companyCells, function(cell, i) {
  [].forEach.call(dateCells, function(dateCell) {

//    var dateCell = dateCells[i];
    var d = parseISOasLocal(dateCell.textContent);
    if (!isNaN(d) && d > today) {
      dateCell.classList.add('futureDate');
    } else {
      dateCell.classList.add('pastDate');
    } 
  });
}

＆＃13;

.futureDate {
  color: black;
  background-color: green;
}
.pastDate {
  color: black;
  background-color: red;
}

table {
  border-left: 1px solid #9999;
  border-top: 1px solid #9999;
  border-collapse: collapse;
}
td, th {
  border-right: 1px solid #9999;
  border-bottom: 1px solid #9999;
  padding: 5px 5px 5px 5px;
}

＆＃13;

<table>
  <tr>
    <th>Company name</th>
    <th>Date</th>
  </tr>
  <tr>
    <td class="companyName">Company A</td>
    <td class="companyDate">2016-07-15</td>
  </tr>
  <tr>
    <td class="companyName">Company B</td>
    <td class="companyDate">2017-07-15</td>
  </tr>
  <tr>
    <td class="companyName">Company C</td>
    <td class="companyDate">No date</td>
  </tr>

</table>

＆＃13;

以上内容涉及日期单元格中的无效值（例如，对于公司C），但依赖于公司和日期的顺序相同。无效日期与过去日期相同，可以使用if (isNaN(d))单独列出，并给出不同的类。

使用扩展语法，onload函数体可以是：

var today = new Date();
[...document.querySelectorAll('.companyDate')].forEach(cell => 
  cell.classList.add(parseISOasLocal(cell.textContent) > today? 'futureDate':'pastDate')
);

但网络可能尚未准备就绪。

Javascript比较html中的2个日期并更改颜色

2 个答案:

修改