2014-02-25 33 views
0

我正在使用php和javascript来创建我正在处理的存储库页面,到目前为止,通过jQuery生成的表格实际上并未写入页面。所有的控制台日志工作正常,但没有别的。Javascript未写入页面

我目前有它的工作,所以打开的PHP文件调用另一个JavaScript中(和表的基地)的JavaScript。

的PHP文件被称为是这样的:

<script> 
    var h = ['Black Panther', 'Black Widow', 'Cable', 'Captain America', 'Colossus', 'Cyclops', 'Daredevil', 'Deadpool', 'Emma Frost', 'Gambit', 
       'Ghost Rider', 'Hawkeye', 'Hulk', 'Human Torch', 'Iron Man', 'Jean Grey', 'Loki', 'Luke Cage', 'Moon Knight', 'Ms Marvel', 'Nightcrawler', 
       'Punisher', 'Rocket Raccoon', 'Scarlet Witch', 'Spider-Man', 'Squirrel Girl', 'Storm', 'Thing', 'Thor', 'Wolverine']; 

    var v = ['Black Cat', 'Blob', 'Bullseye', 'Dr. Doom', 'Dr. Octopus', 'Electro', 'Elektra', 'Gorgon', 'Green Goblin', 'Grim Reaper', 'Hood', 
       'Juggernaut', 'Kingpin', 'Kurse', 'Lady Deathstrike', 'Living Laser', 'Loki', 'Madame Hydra', 'Magneto', 'Malekith', 'Mandarin', 
       'Mister Sinister', 'M.O.D.O.K.', 'Moleman', 'Pyro', 'Rhino', 'Sabretooth', 'Shocker', 'Taskmaster', 'Tombstone', 'Venom', 'Wizard']; 

    var e = ['Brood', 'Cliffwalker Tribe', 'Dark Elves', 'Frost Giants', 'Hand', 'Hydra', 'Latverian Drones', 'Maggia', 'Mercenary', 'N\'Garai Demons', 
       'Purifier', 'Rock Trolls', 'Serpent Men', 'Storm Giants', 'Toad']; 

    var i, table = $('tbody'); 


    for(i = 0; i < 32; i++) { 
     $row = $('<tr id="row' + i + '"></tr>'); 
     $row.append('<td onclick="location.href=\'?s=' + v[i].toLowerCase().replace(' ','') + '\'">' + v[i] + '</td>'); 
     console.log('Villain Added: ' + v[i]); 
     if(i > 29) { table.append($row);continue; } 
     $row.prepend('<td onclick="location.href=\'?s=' + h[i].toLowerCase().replace(' ','') + '\'">' + h[i] + '</td>'); 
     console.log('Hero Added: ' + h[i]); 
     if(i > 14) { table.append($row);continue; } 
     $row.append('<td onclick="location.href=\'?s=' + e[i].toLowerCase().replace(' ','') + '\'">' + e[i] + '</td>'); 
     console.log('Enemy Added: ' + e[i]); 

     table.append($row); 
    } 

</script> 

<table class="table table-bordered table-hover"> 
    <thead> 
     <th>Heroes</th> 
     <th>Villains</th> 
     <th>Enemies</th> 
    </thead> 

    <tbody> 
    </tbody> 
</table> 

的页面显示确切的代码,当我查看该页面的源代码。 tbody元素应该已经写入所有内容时为空。

我的问题是,有什么我做错了吗?我对PHP非常陌生,只是用它来使我更容易组织我的代码。我已经试过在创建表之后放置实际的函数,将它放在文档加载函数中(它不应该改变任何内容)并且什么都不起作用。

请帮我解决这个问题。干杯。

+1

适用于我:http://jsfiddle.net/8958S/ – Christoph

+0

@Christoph除了毒液和精灵在英雄列表中而不是在恶棍列表中。 – Spedwards

+0

在桌子后面移动脚本,它会正常工作:) – Archer

回答

2

必须包括准备方法

$(document).ready(function() {  
    // your code here 
}); 

里面所有的JS或创建一个js方法,因此,该代码被执行后,你的表被添加到调用该对身体的onload事件DOM树。

+0

这有效。这很奇怪,因为我这样做了(除了变量不在'''和'table'之外的函数中)并且它不起作用。不会想到这会有关系。也许我忘记了更新我的服务器。 然而,新的问题,毒液和巫师现在在英雄名单。 – Spedwards

+0

这是正确的答案,所以你应该标记它。对于任何新问题/问题,您应该通过这样做来创建一个新话题,您将帮助其他人,并在您的社区中发挥自己的作用。 – Zubair1

+1

@ Zubair1它不会让你标记约8-10分钟的答案,所以我正在等待。我有完整的意图来标记它。至于新的问题,我知道该怎么做:P – Spedwards

0

当您查看页面的源代码时,将不会找到新(动态)添加的元素。 看着他们尝试使用document.documentElement.innerHTML这会给你当前的页面的HTML。

查看源仅显示从服务器呈现的页面源,即页面的原始源,而不是稍后在使用javascript时修改的版本。

+0

By viewsource我的意思是我检查了那个和那个相同的元素,但是很多很整洁。 – Spedwards