2014-02-25 31 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