Javascript не пишет на страницу

0

Я использую php и javascript для создания страницы репозитория, над которой я работаю, и до сих пор таблица, которую я генерирую через jQuery, на самом деле не записывает на страницу. Все журналы консоли работают нормально, но ничего больше.

В настоящее время я работаю так, что php файл, который является открытым, вызывает другой, у которого есть 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
    У меня работает: jsfiddle.net/8958S
  • 0
    @Christoph Кроме того факта, что яд и волшебник находятся в списке героев, а не в списке злодеев.
Показать ещё 2 комментария
Теги:

2 ответа

2
Лучший ответ

Вы должны включить все ваши js в готовый метод

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

или вы создаете метод js и вызываете это при событии onload тела, чтобы код запускался после добавления вашей таблицы в дерево DOM.

  • 0
    Это работает. Это странно, потому что я сделал это (кроме переменных, которых не было в функции, кроме i и table ), и это не сработало. Не думал бы, что это будет иметь значение. Может быть, я забыл обновить свой сервер. Новая проблема, Venom & Wizard теперь в списке героев.
  • 0
    Это правильный ответ, поэтому вы должны пометить его. Для любых новых проблем / вопросов вы должны создать новую тему, тем самым вы будете помогать другим, а также играть свою роль в SO.
Показать ещё 1 комментарий
0

Когда вы просматриваете источник страницы, вы не найдете новые (динамически) добавленные элементы. Для того, чтобы посмотреть на них, попробуйте использовать document.documentElement.innerHTML это даст вам текущий html страницы.

Просмотр источника показывает только источник страницы, когда он был визуализирован с сервера, то есть исходный источник страницы, а не версия, которая была впоследствии изменена при использовании javascript.

  • 0
    Под источником просмотра я имел в виду, что я проверял элемент, который был таким же, но гораздо более аккуратным.

Ещё вопросы

Сообщество Overcoder
Наверх
Меню