Javascript 使用Java脚本创建表

Javascript 使用Java脚本创建表,javascript,html,arrays,for-loop,Javascript,Html,Arrays,For Loop,我在使用Java脚本创建显示数组的表时遇到问题。我必须使用外部Javascript文件来创建数组,并使用for循环来创建和填充表。我遇到的问题是脚本标记内部没有发生任何事情。我可以写“文档。写(‘Hellow World!')”,但什么也没发生。因此,当我尝试用数组创建for循环时,没有发生任何事情,这也就不足为奇了。任何帮助都将不胜感激。这是我第一次以这种方式使用Javascript,教授提供的注释中没有关于如何创建选项卡的相关信息;e使用for循环 myarray.js var classA

我在使用Java脚本创建显示数组的表时遇到问题。我必须使用外部Javascript文件来创建数组,并使用for循环来创建和填充表。我遇到的问题是脚本标记内部没有发生任何事情。我可以写“文档。写(‘Hellow World!')”,但什么也没发生。因此,当我尝试用数组创建for循环时,没有发生任何事情,这也就不足为奇了。任何帮助都将不胜感激。这是我第一次以这种方式使用Javascript,教授提供的注释中没有关于如何创建选项卡的相关信息;e使用for循环

myarray.js

var classArray = new Array();
classArray[0] = "CST415 Software Enterprise II";
classArray[1] = "CST420 Foundations for Distruibuted Web Applications in Java"
classArray[2] = "CST433 Database Technology"
classArray[3] = "Ethics and Professional Computing"
classArray[4] = "Introdiction to Graphics Programming"
可疑代码:

<table class="classes">
    <tr>
        <td>
            Classes Taken for Computer Science Major
        </td>
    </tr>
        <script type="text/javascript" src="myarray.js" >
            for(var i=0; i<5;i++){
                document.write('<tr><td>');
                document.write(classArray[i]);
                document.write('</td></tr>');

            }
        </script>
</table>

计算机科学专业选修课

对于(var i=0;i您不能有一个
加载一个外部.js文件(通过
src=
属性)和包含自己的内联代码(for循环)。您必须将其分为两部分:

<script type="text/javascript" src="myarray.js"></script>
<script type="text/javascript">
   for (...) {
      ....
   }
</script>

对于(…){
....
}

您不能让一个
同时加载一个外部.js文件(通过
src=
属性)和包含自己的内联代码(for循环)。您必须将其分为两部分:

<script type="text/javascript" src="myarray.js"></script>
<script type="text/javascript">
   for (...) {
      ....
   }
</script>

对于(…){
....
}

外部脚本标记中不能包含内联脚本


它们需要是两个独立的标记。

外部脚本标记中不能包含内联脚本


它们需要是两个独立的标记。

我宁愿重构代码以:

<script type="text/javascript">
var myTable = document.getElementById('my_table');
// use array literals, not new Array()
var elements = [
    "CST415 Software Enterprise II",
    "CST420 Foundations for Distruibuted Web Applications in Java",
    "CST433 Database Technology",
    "Ethics and Professional Computing",
    "Introdiction to Graphics Programming"
].map(function(title) {
     return '<tr><td>' + title + '</td></tr>'
});

document.getElementById('my_table').tBodies[0].innerHTML = elements.join('');
</script>

<table id="my_table" class="classes">
    <thead>
      <tr>
        <td>
            Classes Taken for Computer Science Major
        </td>
      </tr>
    </thead>
    <tbody>
    </tbody>
</table>

var myTable=document.getElementById('my_table');
//使用数组文字,而不是新数组()
变量元素=[
“CST415软件企业II”,
“Java分布式Web应用程序的CST420基础”,
“CST433数据库技术”,
“伦理与专业计算”,
“图形编程简介”
].地图(功能(标题){
返回“”+标题+“”
});
document.getElementById('my_table').tBodies[0]。innerHTML=elements.join('');
计算机科学专业选修课

您可以在这里查看:。

我宁愿重构您的代码:

<script type="text/javascript">
var myTable = document.getElementById('my_table');
// use array literals, not new Array()
var elements = [
    "CST415 Software Enterprise II",
    "CST420 Foundations for Distruibuted Web Applications in Java",
    "CST433 Database Technology",
    "Ethics and Professional Computing",
    "Introdiction to Graphics Programming"
].map(function(title) {
     return '<tr><td>' + title + '</td></tr>'
});

document.getElementById('my_table').tBodies[0].innerHTML = elements.join('');
</script>

<table id="my_table" class="classes">
    <thead>
      <tr>
        <td>
            Classes Taken for Computer Science Major
        </td>
      </tr>
    </thead>
    <tbody>
    </tbody>
</table>

var myTable=document.getElementById('my_table');
//使用数组文字,而不是新数组()
变量元素=[
“CST415软件企业II”,
“Java分布式Web应用程序的CST420基础”,
“CST433数据库技术”,
“伦理与专业计算”,
“图形编程简介”
].地图(功能(标题){
返回“”+标题+“”
});
document.getElementById('my_table').tBodies[0]。innerHTML=elements.join('');
计算机科学专业选修课

您可以在这里查看:。

可能不是最好的方法,但我使用jQuery实现了这一点

<script type="text/javascript" src="Scripts/jquery-1.4.1.min.js"></script>
<script type="text/javascript" src="myarray.js" >

<script type = "text/javascript">
for (i=0; i<5; i++) {
   $("#TableName").append("<tr><td>" + classArray[i] + "</td></tr>");
   //or if your table doesn't have a name you can find by element or by class
   $(".classes").....
   $("table").....
}
</script>


for(i=0;i可能不是最好的方法,但我使用jQuery来实现这一点

<script type="text/javascript" src="Scripts/jquery-1.4.1.min.js"></script>
<script type="text/javascript" src="myarray.js" >

<script type = "text/javascript">
for (i=0; i<5; i++) {
   $("#TableName").append("<tr><td>" + classArray[i] + "</td></tr>");
   //or if your table doesn't have a name you can find by element or by class
   $(".classes").....
   $("table").....
}
</script>


对于(i=0;i对于那些来自谷歌的人,发现其他答案不令人满意。以下是一个介绍,没有jQuery:

var table = document.createElement("table");
var tableBody = document.createElement("tbody");

var row = document.createElement("tr");

for (var i = 0; i < 5; i++) {
    var cell = document.createElement("td");
    var cellText = document.createTextNode("This is cell " + i);
    cell.appendChild(cellText);
    row.appendChild(cell);
}

tableBody.appendChild(row);

table.appendChild(tableBody);
var table=document.createElement(“表”);
var tableBody=document.createElement(“tbody”);
var行=document.createElement(“tr”);
对于(变量i=0;i<5;i++){
var cell=document.createElement(“td”);
var cellText=document.createTextNode(“这是单元格”+i);
cell.appendChild(cellText);
子行(单元格);
}
tableBody.appendChild(行);
table.appendChild(表体);

试一试。

对于那些来自谷歌但发现其他答案不令人满意的人来说。这里有一个介绍,没有jQuery:

var table = document.createElement("table");
var tableBody = document.createElement("tbody");

var row = document.createElement("tr");

for (var i = 0; i < 5; i++) {
    var cell = document.createElement("td");
    var cellText = document.createTextNode("This is cell " + i);
    cell.appendChild(cellText);
    row.appendChild(cell);
}

tableBody.appendChild(row);

table.appendChild(tableBody);
var table=document.createElement(“表”);
var tableBody=document.createElement(“tbody”);
var行=document.createElement(“tr”);
对于(变量i=0;i<5;i++){
var cell=document.createElement(“td”);
var cellText=document.createTextNode(“这是单元格”+i);
cell.appendChild(cellText);
子行(单元格);
}
tableBody.appendChild(行);
table.appendChild(表体);

尝试一下。

document.write现在是90年代。适应现代,改用DOM操作。另外,数组文字符号是你最好的朋友:
classArray=[“CST415”,“CST420”]
document.write已经是90年代了。适应现代,改用DOM操作。另外,数组文字符号是你最好的朋友:
classArray=[“CST415”,“CST420”];