無名的博客

任意增加或刪除一行html元素

代碼如下：

<script language="javascript">
var curRow=null;
function selectRow(tr1){
if(curRow)
curRow.bgColor="#FFFFFF";
tr1.bgColor="e7e7e7";
curRow=tr1;
}
function addRow(src){
var newrow = src.insertRow(src.rows.length-1);
newrow.attachEvent("onclick",function(){selectRow(newrow);});
newrow.height=20;
var i=4;
while(i--){
var newcell = newrow.insertCell();
switch(i){
case 0: newcell.innerHTML= '<input type="button" onClick="javascript:delRow(this.parentElement.parentElement)" value="刪除此行">';break;
default: newcell.innerHTML=div1.innerHTML;break;
}
}
}
function delRow(src){
src.parentElement.deleteRow(src.rowIndex);
}
</script>

<table id="tb" width="100%"  border="1" >
  <tr>
    <th scope="col" width="25%">一</th>
    <th scope="col" width="25%">二</th>
    <th scope="col" width="25%">三</th>
    <th scope="col" width="25%">四</th>
  </tr>
  <tr id="blankRow" onClick="addRow(this.parentElement)">
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
</table>
<div id="div1" style="display:none "><inpute type="text"></div>

posted on 2005-10-18 10:47 十三郎 閱讀(753) 評論(1)  編輯  收藏 所屬分類: JAVASCRIPT