如何使用JavaScript打印表格，並且沒有DOM交互

Question

我正在寫一個小程序來輸出這樣的表：（ 這就是我想要的！）

到目前為止，這是我的（不正確）代碼：

var daysOfWeek = ['Mon', 'Tue', 'Wed', 'Thu']
var time = ['9am', '10am', '11am', '12pm', '1pm', '2pm'];

for(i = 0; i < 1; i++) {
  console.log("     "+daysOfWeek.join('  '));
   for (j = 0; j < time.length; j++ ) {
     if ((time[j] === '9am' || time[j] === '2pm') && (daysOfWeek[i] === 'Mon')) {
      console.log(time[j], 'Bowser');
     } else {
       console.log(time[j]);
     }
  }
}

這是我從代碼中收到的輸出：

我不知道如何在第一列中登錄Maggie，也不知道如何遍歷圖表以添加Fifi和Spike。 而且，我的代碼真的很亂...

有人可以幫我找到一種干凈，有效的方法來打印桌子嗎？

Answer 1

您需要一個數據結構來保存狗步行時間表。 您可以使用嵌套對象：

var schedule = {
    Mon: {
        '10am': 'Bowser',
        '2pm': 'Maggie'
    },
    Tue: {
        '11am': 'Fifi'
    },
    Wed: {
        '12pm': 'Spike'
    },
    'Thu': {
    }
}

然后，您的循環可以將每個時隙與計划中的時間進行匹配。

console.log("\t"+daysOfWeek.join('\t'));
for (j = 0; j < times.length; j++) {
    line = times[j];
    for (i = 0; i < daysOfWeek.length; i++) {
        if (schedule[daysOfWeek[i]][times[j]]) {
            lines += "\t" + schedule[daysOfWeek[i]][times[j]];
        } else {
            lines += "\t\t";
        }
    }
    console.log(line);
}

Answer 2

var daysOfWeek = ['Mon', 'Tue', 'Wed', 'Thu']
var time = ['9am', '10am', '11am', '12pm', '1pm', '2pm'];

var people = [{
    name: "Bowser",
    time: "9am",
    day: "Mon"
  }, {
    name: "Maggie",
    time: "12pm",
    day: "Mon"
  },

  {
    name: "George",
    time: "1pm",
    day: "Wed"
  },

];
var days = pad("");
for (var i in daysOfWeek) {
  days += pad(daysOfWeek[i]);
}
console.log(days);
for (var j in time) {

  var line = pad(time[j]);
  for (var i in daysOfWeek) {
    var p = getPersonAt(time[j], daysOfWeek[i]);
    if (p != null) {
      line += pad(p.name);
    } else {
      line += (pad(""));
    }
  }
  console.log(line);
}

function getPersonAt(time, day) {
  for (var i in people) {
    if (people[i].time == time && people[i].day == day) {
      return people[i];
    }
  }
  return null;
}

function pad(str) {
  while (str.length < 15) {
    str = str + " ";
  }
  return str;
}

我創建了一個小提琴，將結果打印到html。

我創建了具有名稱/時間/日期值的對象，並遍歷了所有時間和日期，並且當兩者都匹配時（getPersonAt返回了一個對象），我打印了對象的名稱。

填充功能可填充字符串，但如果名稱長度超過15個字符，則需要進行調整。

小提琴