                        課程
                    
                        /前端開發
                        
                            /JavaScript
                        
                        /JavaScript進階篇

添加一行后會改變原table樣式，求大腿破

var?c?=?document.createElement('td');
????????????c.innerHTML?=?"<input?type='text'/>";
????????????r.appendChild(c);

在點雞加一行函數中，因為給每一個格子都賦值了<input type='text'/>，這樣添加后是可以編輯表格內容的，但是同樣也會同時改變表格大小樣式，求來個粗腿讓其不改變表格大小，謝謝。以下是完整代碼：

<!DOCTYPE?html>
<html>
<head>
????<meta?charset="UTF-8">
????<title>js_6?練習</title>
????<script?type="text/javascript">

????window.onload?=?function(){??//打開就啟動
????????highlight();
????}

????function?highlight(){
????????var?t?=?document.getElementById('table');
????????var?rs?=?t.getElementsByTagName('tr');
????????????for?(var?i?=?1;?i?<?rs.length;?i++)?{?//i=1跳過表頭
????????????????rs[i].onmouseover?=?function(){
????????????????????this.style.backgroundColor?=?'#f2f2f2';
????????????????}
????????????????rs[i].onmouseout?=?function(){
????????????????????this.style.backgroundColor?=?'#fff';
????????????????}
????????????}
????}

????function?rem(n){
????????var?t?=?n.parentNode.parentNode.parentNode;
????????t.removeChild(n.parentNode.parentNode);
????}

????function?addon(obj){
????????var?a?=?document.getElementById('table');
????????var?r?=?document.createElement('tr');

????????????var?c?=?document.createElement('td');
????????????c.innerHTML?=?"<input?type='text'/>";
????????????r.appendChild(c);
????????
????????????var?c?=?document.createElement('td');
????????????c.innerHTML?=?"<input?type='text'/>";
????????????r.appendChild(c);
????????????
????????????var?c?=?document.createElement('td');
????????????c.innerHTML?=?"<input?type='text'/>";
????????????r.appendChild(c);
????????????
????????????var?c?=?document.createElement('td');
????????????c.innerHTML?=?"<a?href='javascript:'?onclick='rem(this)''>DELETE</a>";
????????????r.appendChild(c);

????????a.appendChild(r);
????????highlight();?//新加的也要變色
????}
????</script>
</head>
<body>
<blockquote>制作一個表格，顯示班級的學生信息。<br>

要求：<br>

1.?鼠標移到不同行上時背景色改為色值為?#f2f2f2，移開鼠標時則恢復為原背景色?#fff?<br>

2.?點擊添加按鈕，能動態在最后添加一行<br>

3.?點擊刪除按鈕，則刪除當前行<br>
</blockquote>
<br>
<br>
<div>
<table?id="table"?border="1"?width="50%"?style="text-align:?center;"?>
????<tr>
????????<th>SID</th>
????????<th>Name</th>
????????<th>GENDER</th>
????????<th>OPERATION</th>
????</tr>
????<tr>
????????<td>111100</td>
????????<td>EMMA</td>
????????<td>female</td>
????????<td><a?href="javascript:"?onclick="rem(this)">DELETE</a></td>
????</tr>
????????<td>111101</td>
????????<td>RAY</td>
????????<td>male</td>
????????<td><a?href="javascript:"?onclick="rem(this)">DELETE</a></td>
????</tr>
????????<td>111102</td>
????????<td>SYA</td>
????????<td>female</td>
????????<td><a?href="javascript:"?onclick="rem(this)">DELETE</a></td>
????</tr>
</table>
<button?onclick="addon()">ADD?ONE?ROW</button>
</div>


</body>
</html>