JSFiddle - React, Tailwind, and code Playground

HTML

姓名:
<input type="text" id="userName" size="10" />&nbsp;&nbsp; Java:
<input type="text" id="java" size="3" maxlength="2" />&nbsp;&nbsp; HTML:
<input type="text" id="html" size="3" maxlength="2" />&nbsp;&nbsp; Sqlserver:
<input type="text" id="sql" size="3" maxlength="2" />&nbsp;&nbsp;
<input type="button" value="增加" onclick="addScore()" />
<hr size="3">
<br>
<input type="button" value="檢視表中成績" onclick="disScore()">
<hr size="3">
<table id="tabScore" width="470" border="1" bordercolor="#003399" align="center">
    <tr bgcolor="#0099FF">
        <th>姓名</th>
        <th>JAVA</th>
        <th>HTML</th>
        <th>SQLServer</th>
        <th>總成績</th>
    </tr>
    <tr>
        <td align="center">張三</td>
        <td align="center">87</td>
        <td align="center">92</td>
        <td align="center">79</td>
        <td align="center">258</td>
    </tr>
    <tr>
        <td align="center">李四</td>
        <td align="center">54</td>
        <td align="center">92</td>
        <td align="center">87</td>
        <td align="center">247</td>
    </tr>
    <tr>
        <td align="center">王五</td>
        <td align="center">94</td>
        <td align="center">81</td>
        <td align="center">67</td>
        <td align="center">269</td>
    </tr>
</table>

CSS

body, table, th, td {
    font-size:15px;
}
#tabScore {
    border-collapse:collapse;
}
#tabScore th {
    padding:5px
}
#tabScore td {
    padding:5px
}

JavaScript

function disScore() {
    var tab = document.getElementById("tabScore"), // 將所有宣告變數移到函數最前方方便維護且增進執行效率
        rows = tab.rows,
        output = '',
        i, I, td, name, java, html, sql, count;

    for (i = 1, I = rows.length; i < I; i++) {
        td = rows[i].getElementsByTagName('td'); // 抓取同一行的<td>標籤 藉此以避掉斷行字元也算一個childNode的窘境
        name = td[0].innerHTML; // innerHTML在跨瀏覽器支援性較好
        java = td[1].innerHTML;
        html = td[2].innerHTML;
        sql = td[3].innerHTML;
        count = td[4].innerHTML;
        output += name + ': ' + java + ", " + html + ", " + sql + ", " + count + '<br>'; // 將輸出資料暫存到output變數中
    }
    document.write(output);
}

function addScore() {

    var name = document.getElementById("userName").value,
        java = document.getElementById("java").value,
        html = document.getElementById("html").value,
        sql = document.getElementById("sql").value,

        count = parseInt(java, 10) + parseInt(html, 10) + parseInt(sql, 10),
        tab = document.getElementById("tabScore"),
        row = tab.insertRow(-1), // -1代表在最後(最下方)插入新的一行

        td_name = row.insertCell(-1), // 同上 -1代表在最後插入新的儲存格
        td_java = row.insertCell(-1),
        td_html = row.insertCell(-1),
        td_sql = row.insertCell(-1),
        td_count = row.insertCell(-1);

    td_name.style.textAlign = "center";
    td_name.innerHTML = name;

    td_java.style.textAlign = "center";
    td_java.innerHTML = java;

    td_html.style.textAlign = "center";
    td_html.innerHTML = html;

    td_sql.style.textAlign = "center";
    td_sql.innerHTML = sql;

    td_count.style.textAlign = "center";
    td_count.innerHTML = count;
}