<!DOCTYPE?html>
<html>
?<head>
??<title>?new?document?</title>??
??<meta?http-equiv="Content-Type"?content="text/html;?charset=UTF-8"/>???
??<script?type="text/javascript">?
????window.onload?=?function(){??????????????
????//鼠標移到不同行上時背景色改為色值為?#f2f2f2，移開鼠標時則恢復為原背景色?#fff
var?tr=document.getElementsByTagName('tr');
for(var?i=0;i<tr.length;i++){
tr[i].onmouseover=function(){
this.style.backgroundColor='#f2f2f2';
}
tr[i].onmouseout=function(){
this.style.backgroundColor='#fff';
}
}
}???
????//?編寫一個函數(shù)，供添加按鈕調(diào)用，動態(tài)在表格的最后一行添加子節(jié)點；
function?addrow(){
var?tbody=document.getElementById('table').lastChild;
var?tr=document.getElementsByTagName('tr');
//根據(jù)列標題，獲取列數(shù)
var?th=document.getElementsByTagName('th');
var?newtr=document.createElement('tr');
for(var?i=0;i<th.length;i++){
var?newtd=document.createElement('td');
if(i!=2){
newtd.innerHTML="<input?type='text'>";
}else{
newtd.innerHTML="<a?href='javascript:;'?onclick='deleterow(this)'>刪除</a>"
}
//newtd.offsetWidth=th[i].offsetWidth;
newtd.style.width=th[i].offsetWidth;
console.log(th[i].offsetWidth);
newtr.appendChild(newtd);
}
tbody.appendChild(newtr);
}
????//?創(chuàng)建刪除函數(shù)
????function?deleterow(obj){
????var?tbody=document.getElementById('table');
????//console.log(tbody);
????var?tr=obj.parentNode.parentNode;
????tbody.lastChild.removeChild(tr);
????}????
??</script>?
?</head>?
?<body>?
??<table?border="1"?width="50%"?id="table">
??<tr>
<th>學號</th>
<th>姓名</th>
<th>操作</th>
??</tr>??
??<tr>
<td>xh001</td>
<td>王小明</td>
<td><a?href="javascript:;"?onclick="deleterow(this)">刪除</a></td>???<!--在刪除按鈕上添加點擊事件??-->
??</tr>
??<tr>
<td>xh002</td>
<td>劉小芳</td>
<td><a?href="javascript:;"?onclick="deleterow(this)">刪除</a></td>???<!--在刪除按鈕上添加點擊事件??-->
??</tr>??
??</table>
??<input?type="button"?value="添加一行"?onclick="addrow()"?/>???<!--在添加按鈕上添加點擊事件??-->
?</body>
</html>在addrow()函數(shù)，使用newtd.style.width=th[i].offsetWidth賦值的
js設(shè)置添加行后可以獲取到原先每列的寬度，但是賦值給新增加行的每一列，不起作用
jugge
2017-03-06 15:12:43
