<body>
<table border="1" id="myTable" style="width:400px">
<tr>
<td>張三</td>
<td>54</td>
</tr>
<tr>
<td>李四</td>
<td>78</td>
</tr>
</table>
<hr />
姓名:<input id="txtName" type="text" />
<br />
成績:<input id="txtScore" type="text" />
<br />
<input id="btn" type="button" value="請輸入成績資料" onclick="InsertData()"/>
<script>
把ID呼叫近來
var myTable = document.getElementById("myTable");
var Name = document.getElementById("txtName");
var Score = document.getElementById("txtScore");
function InsertData() {
創造元素tr,td
var tr = document.createElement("tr");
var td1 = document.createElement("td");
var td2 = document.createElement("td");
innerText是指兩個元素之間的文字,例如張三(在兩個tr之中)
td1.innerText = Name.value;
td2.innerText = Score.value;
appendChild代表［加入］
把td1加入到tr
tr.appendChild(td1);
tr.appendChild(td2);
把tr加入到myTable
myTable.children[0].appendChild(tr);
}
</script>
</body>
留言列表
