2015-08-20 5 views
0
<!DOCTYPE html> 
    <html> 
     <head> 
      <meta charset="utf-8" /> 
      <link rel="stylesheet" type="text/css" href="myFirstStyleSheet.css"> 

      <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script> 

      <script> 
       $.getJSON('/Users/skhare/tableList.json', function(tableList) { 
       var output="<table id=tableStyle>"; 
       output+="<tr>" + "<th>" + "Table Names" + "</th>" + "</tr>"; 
       for (var i in tableList.t) 
       { 
        output+="<tr>" + "<td>" + "<a href=/Users/skhare/tableDescription.html>" + tableList.t[i].name + "</a>" + "</td>" + "</tr>"; 
       } 

       output+="</table>"; 
       document.getElementById("placeholder").innerHTML=output; 
       }); 
      </script> 
     </head> 
     <body> 
      <div id="placeholder"></div> 
     </body> 
     </html> 

Приведенный выше код ничего не отображает, а также не отображает никаких ошибок. файл JSON как:не удалось просмотреть какой-либо результат

{"t": 
    [ 
     {"name":"DIM_BROWSER"}, 
     {"name":"DIM_CAMPAIGN"}, 
     {"name":"DIM_COLOR_DEPTH"}, 
     {"name":"DIM_CONNECTION_TYPE"}, 
     {"name":"DIM_COUNTRY"}, 
     {"name":"DIM_GEOGRAPHY"}, 
     {"name":"DIM_JAVASCRIPT_VERSION"}, 
     {"name":"DIM_LANGUAGE"}, 
     {"name":"DIM_OPERATING_SYSTEM"}, 
     {"name":"DIM_PAGENAME"} 
    ] 
    } 
+0

Проверьте консоль. Скорее всего, файл JSON не загружается. –

+0

Вам нужно будет запустить скрипт после pageload ... т.е. использовать 'window.onload' или' $ (document) .ready (...) ' – Daniel

ответ

2

Поместите код сценария в $(document).ready()

страница не может манипулировать безопасно, пока документ не будет «готов.» jQuery определяет это состояние готовности для вас. Код, включенный внутри $(document).ready(), запускается только после того, как страница Document Object Model (DOM) готова для выполнения кода JavaScript.

$(document).ready(function(){ 
    $.getJSON('/Users/skhare/tableList.json', function (tableList) { 
     var output = "<table id=tableStyle>"; 
     output += "<tr>" + "<th>" + "Table Names" + "</th>" + "</tr>"; 
     for (var i in tableList.t) { 
      output += "<tr>" + "<td>" + "<a href=/Users/skhare/tableDescription.html>" + tableList.t[i].name + "</a>" + "</td>" + "</tr>"; 
     } 

     output += "</table>"; 
     document.getElementById("placeholder").innerHTML = output; 
    }); 
}) 
+0

был выполнен. спасибо – sonal

+1

@sonal, вам нужно проверить этот вопрос как правильный. Это то, как вы благодарите автора :) – Bakhtiyor

0

Как уже отмечалось, причиной того, что это не работает для вас, что вы пытаетесь манипулировать элементами (т.е. <div id="placeholder">) до того, как DOM закончил рендеринг, и они присутствуют на этой странице.

Однако мой совет состоял бы в том, чтобы переместить весь ваш JavaScript до закрытия тега </body>, в отличие от использования $(document).ready(). Это помогает держать ваш код организованным (так как все JS будет в одном месте) и имеет дополнительное преимущество, которое к этому моменту DOM будет отображаться по определению.

<!DOCTYPE html> 
<html> 
    <head> 
    <meta charset="utf-8" /> 
    <link rel="stylesheet" type="text/css" href="myFirstStyleSheet.css"> 
    </head> 

    <body> 
    <div id="placeholder"></div> 

    <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script> 
    <script> 
     $.getJSON('/Users/skhare/tableList.json', function(tableList) { 
     var output="<table id=tableStyle>"; 
     output+="<tr>" + "<th>" + "Table Names" + "</th>" + "</tr>"; 
     for (var i in tableList.t) 
     { 
      output+="<tr>" + "<td>" + "<a href=/Users/skhare/tableDescription.html>" + tableList.t[i].name + "</a>" + "</td>" + "</tr>"; 
     } 

     output+="</table>"; 
     document.getElementById("placeholder").innerHTML=output; 
     }); 
    </script> 
    </body> 
</html> 
Смежные вопросы