JavaScript在HTML文件中不起作用_Javascript_Jquery_Html

JavaScript在HTML文件中不起作用

javascript jquery html

JavaScript在HTML文件中不起作用,javascript,jquery,html,Javascript,Jquery,Html,尽管在JSFIDLE中成功地进行了测试，但当我尝试在浏览器中启动html时，下面的代码仍然不起作用本质上，它是一个时间表，根据表1的值将表2中的GMT时间更新为GMT-7时间以下是HTML： <html> <head> <script type="text/javascript" src="js/rtm.js" ></script> </head> <body> <table width=600px id="myt

尽管在JSFIDLE中成功地进行了测试，但当我尝试在浏览器中启动html时，下面的代码仍然不起作用

本质上，它是一个时间表，根据表1的值将表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();
    }
}

这是因为脚本是在加载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();
        }
    }
}

我能想到的唯一原因是JS代码的执行发生在DOM构建之前。如果您使用的是jquery，请将代码放在$document中。readyhandler，否则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文档了解更多详细信息

您可以提供一个更好的描述，说明发生了什么，而不是下面的描述不起作用。它一点作用都没有吗？JS控制台上是否有错误？