Question

您好我想要像这样显示我的程序！[在此输入图像说明] [1]

这是我的css代码，我使用它来获取我的javascript的布局

        /*
            styles.css
        */

        body{
            background-color:#cecece;
            color:#fff;
            font-family: Arial, Tahoma, Sans-Serif;
            font-size:1em;
        }
        h1{
            color:#FF8000;
            text-align:center;
        }
        table{
            width:95%;
        }
        caption{
            font-size:1.2em;
            margin:10px;
            color:#FF8000;
        }
        th{
            width:33.333%;
            font-size:1.1em;
            text-align:left;
            color:steelblue;
        }
        #output{
            position:absolute;
            width:50%;
            height:70%;
            top:15%;
            left:25%;
            margin:0px;
            padding:10px;
            font-size:.9em;
            background-color:#2E2E2E;
            color:ivory;
        }

这是我的JavaScript代码，我打印输出

                        var mytable = "<table><caption>Grading Results</caption>";
            document.write(mytable);
            document.write('<td><tr><th>' + "Student"+'</th><th>' +  "Mark!" + '</th><th>'+"Grade" + '</th> </tr></td>');
            for(var i = 0; i < markArr.length; i++){
            document.write(' <tr><td>'+studentArr[i] + space1+markArr[i] + space1+gradeAwarded[i] + '</td> </th> ');
            }
            document.write(' </tr>');
            document.write('<td>'+ "The Highest mark was : "+max+ ''+'</td> </th>');
            document.write('<td>' + "The Lowest mark was : "+min+''+'</td> </th>');
            document.write('<td>'+ "The Average mark was : "+average+''+'</td> </th>');
            document.write('<td>' + "number A grades : "+A+''+'</td> </th>');
            document.write('<td>'+ "number B grades : "+B+''+'</td> </th>');
            document.write('<td>'+ "number C grades : "+C+''+'</td> </th>');
            document.write('<td>'+ "number F grades : "+F+''+'</td> </th>');
            document.write('</table>');

Answer 1

您需要更改以下内容：

在结束<br/>

</th>

在您的第一个<tr>和<th>之后加</tr> </th>
在for语句中放置<tr>，在关闭前放置</tr>}
将每个值置于<td>和</td>
将</table>移至for语句

编辑：

这就是你的javascript应该是这样的：

var mytable = "<table><caption>Grading Results</caption>";
document.write(mytable);
document.write('<tr><th>' + "Student"+'</th><th>' +  "Mark!" + '</th><th>'+"Grade" + '</th></tr>');
for (var i = 0; i < markArr.length; i++){
    document.write('<tr>');
    document.write('<td>' + studentArr[i] + '</td>');
    document.write('<td>' + markArr[i] + '</td>');
    document.write('<td>' + gradeAwarded[i] + '</td>');
    document.write('</tr>');
}
document.write('</table>');
document.write(''+ "The Highest mark was : "+max+ ''+'<br>');
document.write('' + "The Lowest mark was : "+min+''+'<br>');
document.write(''+ "The Average mark was : "+average+''+'<br>');
document.write('' + "number A grades : "+A+''+'<br>');
document.write(''+ "number B grades : "+B+''+'<br>');
document.write(''+ "number C grades : "+C+''+'<br>');
document.write(''+ "number F grades : "+F+''+'<br>');

（注意：我没有测试过这个）

Answer 2

 for(var i = 0; i < markArr.length; i++){
            document.write('<tr><td>'+studentArr[i] +'</td><td>'+ markArr[i] + '</td><td>'+gradeAwarded[i] + '</td></tr>');
            }    
 document.write('</table>');
     document.write('<ul>'+ '<li>The Highest mark was : '+max+ '</li>');
                document.write('<li>The Lowest mark was : '+min+'</li>');
                document.write('<li>The Average mark was : '+average+'</li>');
                document.write('<li>number A grades : '+A+'</li>');
                document.write('<li>number B grades : '+B+'</li>');
                document.write('<li>number C grades : '+C+'</li>');
                document.write('<li>number F grades : '+F+'</li>');
             document.write('</ul>');

在HTML结构中，您需要正确使用表格。所以你需要插入新的表行（<tr>）和新的单元格（<td>），而不仅仅是断行（<br>）。

此外，您正在寻找一个无序列表<ul>并将其放在表格中。每个列表项<li>

的基本css为黑点

然后你需要设置你的表格样式。从理论上说，如果你修复你的html，那一切都是正确的。但是，您可能需要向新<ul>添加一个保证金，请允许我说

ul {
  margin-left:2em;
}

如果标识不够，请增加＆＃34; 2＆＃34;到＆＃34; 3＆＃34;或＆＃34; 4＆＃34;。它是基于当前字体大小的基本衡量标准。

JavaScript输出无法正确显示

2 个答案: