Question

我有一个表格，其中包含表格标题中的日期和左侧的水果。我想要做的就是从另一个被称为“吃掉”的物体中获取日期和水果。并在表格行/列中绘制一个与消耗的日期一致的X.

HTML

<table class="plan">
 <thead>
  <tr>
   <th><strong>Food</strong></th>
   <th>27/01/2017</th>
   <th>28/01/2017</th>    
   <th>29/01/2017</th>
   <th>30/01/2017</th>
   <th>31/01/2017</th>
   <th>01/02/2017</th>
   <th>02/02/2017</th>
  </tr>
 </thead>
 <tbody>
  <tr><td>Apple</td></tr>
  <tr><td>Banana</td></tr>
  <tr><td>Carrot</td></tr>
  <tr><td>Pear</td></tr>
 </tbody>
</table>

食物标题是通过javascript从一个对象＆＃39; food＆＃39;创建的，日期是通过momentJS和'eaten'生成的。是我想要绘制的对象数据。

的Javascript

var food = '{"food":[{"Name":"Apple"},{"Name":"Banana"},{"Name":"Carrot"},{"Name":"Pear"}]}';

$.each(JSON.parse(food), function(i, f) {
  var tblRow = "";
  tblRow += "<tr><td>" + f.Name + "</td></tr>";
  $(tblRow).appendTo(".plan tbody");
});

for(i = 7; i > 0; i--) {
  var day = moment().subtract('days', i).format('DD/MM/YYYY');
  $('<th>' + day + '</th>').appendTo('.plan thead tr');
};

var eaten = '{"eaten":[{"fields":[{"value":"02/02/2017"},{"value":"Carrot"}]},{"fields":[{"value":"31/01/2017"},{"value":"Pear"}]},{"fields":[{"value":"30/01/2017"},{"value":"Banana"}]},{"fields":[{"value":"29/01/2017"},{"value":"Apple"}]},{"fields":[{"value":"27/01/2017"},{"value":"Apple"}]}]}'

从被吃物体上绘制X的最佳方法是什么？我应该获取cellIndex / rowIndex然后比较html文本并绘制X？

JSFiddle

Answer 1

我的建议（不改变您的数据架构并尝试不改变您的大部分代码逻辑）：

解析您的JSON一次，以便进一步重用：

var eaten = JSON.parse(eatenJSON);
var food = JSON.parse(foodJSON);

使用您的日期填充days数组。

var days = [];
for(i = 7; i > 0; i--) {
    var day = moment().subtract('days', i).format('DD/MM/YYYY');
    days.push(day);
}

在data-day元素中设置data-food和td;

for (var i=0; i<days.length; i++) {
    tblRow += "<td data-day='" + days[i] + "' data-food='" + f.Name + "'></td>";
}

迭代eaten结构，找到包含对应data-day和data-food的元素，并将innerText设置为X，或者等等你想要的。

/* fill table */
eaten.eaten.forEach( function(userEaten) {
  var fields = userEaten.fields;
  var day = fields[0].value;
  var food = fields[1].value;
  document.querySelectorAll("td[data-day='" + day + "'][data-food='" + food + "']").forEach(function(td) {
     td.innerText = "X";
  });   
});

工作小提琴：https://jsfiddle.net/mrlew/5gj4udf6/1/

编辑：使用新的JSON更新了小提琴：https://jsfiddle.net/mrlew/5gj4udf6/2/

刚刚更换了这一行

$.each(food, function(i, f) {

使用：

food.food.forEach(function(f) {

Javascript情节＆＃39; X＆＃39;在表中来自对象数据

1 个答案: