使用 HTML 和 JavaScript 水平显示表格标题和内容的问题

NJH 发表于 Dev

新泽西州

所以我试图水平显示一张桌子，但我觉得我的柜台好像干扰了我的桌子的布局。代码按照我想要的方式工作，只是设计是现阶段的问题

var scores = [];

function enterScores(){

    for(var i=1; i<=10; i++){
        scores[i] = prompt("Enter score " + (i));
    }
}

function displayScores(){
    
  document.getElementById("display").innerHTML = ("<tr>")

  for(var i=1; i<=10; i++){
    document.getElementById("display").innerHTML += ("<th>Score " + i)
    document.getElementById("display").innerHTML += ("<td style='padding: 5px;'><center>" + scores[i] + "</center>");
  }
  document.getElementById("display").innerHTML += ("</tr>")
}

function Average(){
  var sum = 0;

  for(var i = 1; i < scores.length; i++){
    sum += parseInt(scores[i], 10);
  }

  var avg = sum/scores.length;
  document.getElementById("average").innerHTML = ("<b>Your score average is: </b>" + avg);
}

  <input type="button" onclick="enterScores()" value="Enter Scores">
  <input type="button" onclick="displayScores()" value="Display Scores">
  <input type="button" onclick="Average()" value="Calculate Average">

  <br><br><font face="arial" size="2">
  
  <table border="1" style="border-collapse: collapse;" id="display"></table>
	<p id="average"></p>

AG_

检查下面的代码，首先将变量中的所有数据插入表中。

var scores = [];

function enterScores(){

    for(var i=1; i<=10; i++){
        scores[i] = prompt("Enter score " + (i));
    }
}

function displayScores(){
    var data = ""; 
    var stringTh = "";
    var stringTd = "" ;

  for(var i=1; i<=10; i++){
    stringTh += "<th>Score " + i + '</th>';
    stringTd += "<td style='padding: 5px;'><center>" + scores[i] + "</center></td>";
  }
  data = "<tr>" + stringTh + "</tr>";
  data += "<tr>" + stringTd + "</tr>";
  document.getElementById("display").innerHTML = data;
}

function Average(){
  var sum = 0;

  for(var i = 1; i < scores.length; i++){
    sum += parseInt(scores[i], 10);
  }

  var avg = sum/scores.length;
  document.getElementById("average").innerHTML = ("<b>Your score average is: </b>" + avg);
}

<input type="button" onclick="enterScores()" value="Enter Scores">
  <input type="button" onclick="displayScores()" value="Display Scores">
  <input type="button" onclick="Average()" value="Calculate Average">

  <br><br><font face="arial" size="2">
  
  <table border="1" style="border-collapse: collapse;" id="display"></table>
	<p id="average"></p>

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。