Question

我有这个脚本，但我希望能够显示2行/ 7列而不是7行/ 2列。

<script type="text/javascript">

    var date = new Date(); // today
    var times = prayTimes.getTimes(date, [48.23, 4.28], 2);
    var list = ['Fajr', 'Sunrise', 'Dhuhr', 'Asr', 'Maghrib', 'Isha'];
    var html = '<table id="timetable">';
    html += '<tr><td colspan="7">'+ date.toLocaleDateString()+ '</td></tr>';
    for(var i in list)  {
        html += '<tr><td>'+ list[i]+ '</td>';
        html += '<td>'+ times[list[i].toLowerCase()]+ '</td></tr>';
    }
    html += '</table>';
    document.getElementById('table').innerHTML = html;

</script>

Answer 1

使用单独的循环创建每一行，首先迭代并打印列表中的项目，然后是相应的时间。

var date = new Date(); // today
var times = prayTimes.getTimes(date, [48.23, 4.28], 2);
var list = ['Fajr', 'Sunrise', 'Dhuhr', 'Asr', 'Maghrib', 'Isha'];
var html = '<table id="timetable">';
html += '<tr><td colspan="7">'+ date.toLocaleDateString()+ '</td></tr>';
html += '<tr>';
for(var i in list)  {
    html += '<td>'+ list[i]+ '</td>';
}
html += "</tr>";
html += "<tr>";
for (var i in list) {
    html += '<td>'+ times[list[i].toLowerCase()]+ '</td></tr>';
}
html += '</tr></table>';
document.getElementById('table').innerHTML = html;

Answer 2

这是我的解决方案

2行，第一行显示list[i]，第二行显示times[list[i].toLowerCase()]

<script type="text/javascript">

    var date = new Date(); // today
    var times = prayTimes.getTimes(date, [48.23, 4.28], 2);
    var list = ['Fajr', 'Sunrise', 'Dhuhr', 'Asr', 'Maghrib', 'Isha'];
    var html = '<table id="timetable">';
    html += '<tr><td colspan="7">'+ date.toLocaleDateString()+ '</td></tr>';
    html += '<tr>';
    for(var i in list)  {
        html += '<td>'+ list[i]+ '</td>';
    }
    html += '</tr>';

    html += '<tr>';
    for(var i in list)  {
        html += '<td>'+ times[list[i].toLowerCase()]+ '</td>';
    }
    html += '</tr>';

    html += '</table>';
    document.getElementById('table').innerHTML = html;

Html javascript行而不是col

2 个答案: