Question

尽管在JSFiddle中成功测试，但当我尝试在浏览器中启动html时，下面的代码无效。

基本上，这是一个时间表，根据table1的值，将表格2中GMT时间更新为GMT-7时间。

这是HTML：

<html>
<head>
<script type="text/javascript" src="js/rtm.js" ></script>
</head>
<body>
<table width=600px id="mytable1">
<tr>
    <td>GMT</td>
    <td>Monday</td>
    <td>Tuesday</td>
    <td>Wednesday</td>
    <td>Thursday</td>
    <td>Friday</td>
</tr>
<tr>
    <td>Person A</td>
    <td>09:00 - 17:30</td>
    <td>17:00 - 01:30</td>
    <td>09:00 - 17:30</td>
    <td>17:00 - 01:30</td>
    <td>09:00 - 17:30</td>
</tr>
<tr>
    <td>Person B</td>
    <td>09:00 - 17:30</td>
    <td>17:00 - 01:30</td>
    <td>09:00 - 17:30</td>
    <td>17:00 - 01:30</td>
    <td>09:00 - 17:30</td>
</tr>
</table>
<table width=600px id="mytable2">
<tr>
    <td>GMT-7</td>
    <td>Monday</td>
    <td>Tuesday</td>
    <td>Wednesday</td>
    <td>Thursday</td>
    <td>Friday</td>
</tr>
<tr>
    <td>Person A</td>
    <td>09:00 - 17:30</td>
    <td>17:00 - 01:30</td>
    <td>09:00 - 17:30</td>
    <td>17:00 - 01:30</td>
    <td>09:00 - 17:30</td>
</tr>
<tr>
    <td>Person B</td>
    <td>09:00 - 17:30</td>
    <td>17:00 - 01:30</td>
    <td>09:00 - 17:30</td>
    <td>17:00 - 01:30</td>
    <td>09:00 - 17:30</td>
</tr>
</table>
</body>
</html>

......和JS：

var t1 = document.getElementById('mytable1');
var t2 = document.getElementById('mytable2');

for (x = 1; x <= 7; x++) { //Loop through the days(columns)          

for (y = 1; y < t1.rows.length; y++) { //Loop through the people(rows)
    var cell1 = t1.rows[y].cells[x].innerHTML;
    var start = cell1.split(' - ')[0];
    var stop = cell1.split(' - ')[1];
    var starttime = new Date('', '', '', start.split(':')[0], start.split(':')[1]);
    var stoptime = new Date('', '', '', stop.split(':')[0], stop.split(':')[1]);
    var starttime2 = new Date('', '', '', starttime.getHours() - 7, starttime.getMinutes());
    var stoptime2 = new Date('', '', '', stoptime.getHours() - 7, stoptime.getMinutes());
    t2.rows[y].cells[x].innerHTML = ((starttime2.getHours() < 10) ? "0" : "") + starttime2.getHours() + ':' + ((starttime2.getMinutes() < 10) ? "0" : "") + starttime2.getMinutes() + ' - ' + ((stoptime2.getHours() < 10) ? "0" : "") + stoptime2.getHours() + ':' + ((stoptime2.getMinutes() < 10) ? "0" : "") + stoptime2.getMinutes();
    }
}

Answer 1

这是因为您的脚本在加载DOM之前执行。将js代码包含在onload函数中，如下所示：

window.onload= function(){

    var t1 = document.getElementById('mytable1');
    var t2 = document.getElementById('mytable2');

    for (x = 1; x <= 7; x++) { //Loop through the days(columns)          

    for (y = 1; y < t1.rows.length; y++) { //Loop through the people(rows)
        var cell1 = t1.rows[y].cells[x].innerHTML;
        var start = cell1.split(' - ')[0];
        var stop = cell1.split(' - ')[1];
        var starttime = new Date('', '', '', start.split(':')[0], start.split(':')[1]);
        var stoptime = new Date('', '', '', stop.split(':')[0], stop.split(':')[1]);
        var starttime2 = new Date('', '', '', starttime.getHours() - 7, starttime.getMinutes());
        var stoptime2 = new Date('', '', '', stoptime.getHours() - 7, stoptime.getMinutes());
        t2.rows[y].cells[x].innerHTML = ((starttime2.getHours() < 10) ? "0" : "") + starttime2.getHours() + ':' + ((starttime2.getMinutes() < 10) ? "0" : "") + starttime2.getMinutes() + ' - ' + ((stoptime2.getHours() < 10) ? "0" : "") + stoptime2.getHours() + ':' + ((stoptime2.getMinutes() < 10) ? "0" : "") + stoptime2.getMinutes();
        }
    }
}

Answer 2

我能想到的唯一原因是你的JS代码执行是在DOM构建之前发生的。如果您使用的是jquery，请将代码放在$（document）.ready（handler）中，否则navin的答案也会有效。

$(document).ready(function(){
    var t1 = document.getElementById('mytable1');
    var t2 = document.getElementById('mytable2');
    for (x = 1; x <= 7; x++) { //Loop through the days(columns)          
    for (y = 1; y < t1.rows.length; y++) { //Loop through the people(rows)
        var cell1 = t1.rows[y].cells[x].innerHTML;
        var start = cell1.split(' - ')[0];
        var stop = cell1.split(' - ')[1];
        var starttime = new Date('', '', '', start.split(':')[0], start.split(':')[1]);
        var stoptime = new Date('', '', '', stop.split(':')[0], stop.split(':')[1]);
        var starttime2 = new Date('', '', '', starttime.getHours() - 7, starttime.getMinutes());
        var stoptime2 = new Date('', '', '', stoptime.getHours() - 7, stoptime.getMinutes());
        t2.rows[y].cells[x].innerHTML = ((starttime2.getHours() < 10) ? "0" : "") + starttime2.getHours() + ':' + ((starttime2.getMinutes() < 10) ? "0" : "") + starttime2.getMinutes() + ' - ' + ((stoptime2.getHours() < 10) ? "0" : "") + stoptime2.getHours() + ':' + ((stoptime2.getMinutes() < 10) ? "0" : "") + stoptime2.getMinutes();
        }
    }
});

结帐jquery文档了解更多详情http://api.jquery.com/ready/

JavaScript无法在HTML文件中运行

2 个答案: