天天看點

table中的添加删除行操作

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title></title>

<mce:style type="text/css"><!--

th{background-color:#00CCFF;text-align:left;padding:2px 12px;}

td{background-color:#eee;border-bottom:1px solid #ccc;padding:2px 12px;}

.mart_20{margin-top:20px;}

--></mce:style><style type="text/css" mce_bogus="1">th{background-color:#00CCFF;text-align:left;padding:2px 12px;}

td{background-color:#eee;border-bottom:1px solid #ccc;padding:2px 12px;}

.mart_20{margin-top:20px;}</style>

</head>

<body>

<table width="500" cellspacing="0" cellpadding="0" id="tbl">

<tr>

<th>Title 1</th>

<th>Title 2</th>

<th>Operation</th>

</tr>

</table>

<input class="mart_20" type="button" value="Add New" οnclick="addNew()" />

<mce:script type="text/javascript" language="javascript"><!--

var tableCon=document.getElementById("tbl"); //擷取table

/*添加行操作*/

function addNew(){

var tdNum = tableCon.rows.length ; //擷取表格列數

var newTR=tableCon.insertRow(tdNum); //建立新行

for(i=0;i<tableCon.rows(0).cells.length;i++){

newTR.insertCell(i); //在新行中建立i個單元格

} //第一列Index的數值

newTR.cells(0).innerHTML="<input type='text' />"; //第一列的IP位址輸入框

newTR.cells(1).innerHTML="3"; //第二列的數值

newTR.cells(2).innerHTML="<a href="#1" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" mce_href="#1" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" οnclick='deleteTR(this.parentNode.parentNode)'>delete</a>"; //删除按鈕

}

/*删除行操作*/

function deleteTR(current){

current.parentNode.deleteRow(current.rowIndex); //删除目前行

}

// --></mce:script>

</body>

</html>

最新研制。。尚為小小小小鳥一隻,難免疏忽一樓某些細節。

繼續閱讀