動態插入 刪除行

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<link href="../style.css" rel="stylesheet" type="text/css">
</head>

<body leftmargin="0" topmargin="0" marginwidth="0" marginheight="10">
<table id="table1" width="100%" height="1" border="0" cellpadding="0" cellspacing="2">
<form name=frm method=post οnsubmit="return submit1();" action="productBrand.shtml?method=editProductBrand&id=$!pb.id">
    <input type=hidden name=isSubmit value="true">
<tr bgcolor="#CBD6E7">
    <td colspan=4 align=center height=18>修改價格規則</td>
</tr>
<tr bgcolor="#F0F0F0" >
    <td align=right>規則類型&nbsp;</td>
    <td colspan=3>
  <input  type="radio" name="ra" value="1" #if($!type==1) checked #end/>價格
  <input  type="radio" name="ra" value="2" #if($!type==2) checked #end/>百分比
    </td>
</tr>
<tr bgcolor="#F0F0F0">
    <td align=right>規則條目</td>
    <td colspan=3></td>
</tr>
<tr>
 <td>開始商品數量</td>
 <td>結束商品數量</td>
 <td>浮動參數</td>
 <td>操作  </td>
</tr>
#foreach($item in $items)
<tr>
 <td><input type=text value="$!item.startNum" name=url size=5></td>
 <td><input type=text value="$!item.endNum" name=url size=5></td>
 <td><input type=text value="$!item.param" name=url size=5></td>
  <td><input type=button value="刪除" οnclick="deleteCurrentRow();"/></td> 
</tr>
#end
<tr>
    <td colspan=2 align=center><font color=#ff0000>$!error</font></td>
</tr>
</form>
</table>
<tr bgcolor="#CBD6E7">
    <td  colspan=2 align=left>
     <input type=button value="增加" onClick="addRow();"/></td>
    <td colspan=2 align=left>
     <input type=submit value="提交審批">
    </td>
</tr>
</body>
</html>

<script language="javascript">
function addRow(){
var  table1=document.getElementById("table1");  

var len=table.rows[1].cells.length;       //返回表格中的列數 
var rowNum=table1.rows.length;   //返回表格的行數
//添加一行
var newTr = table1.insertRow();
//添加兩列
var newTd0 = newTr.insertCell();
var newTd1 = newTr.insertCell();
var newTd2 = newTr.insertCell();
var newTd3 = newTr.insertCell();
//設置列內容和屬性
newTd0.innerHTML = '<input type=text id="box4" size=5>';
newTd1.innerHTML = '<input type=text id="box4" size=5>';
newTd2.innerHTML = '<input type=text id="box4" size=5>';
newTd3.innerHTML = '<input type=button id="box4" value="刪除">';
newTd3.onclick = function () {deleteCurrentRow()};
}

function deleteCurrentRow(){
var table1=document.getElementById("table1");  
//得到所在行的行標
rowNumber=window.event.srcElement.parentElement.parentElement.rowIndex;
//刪除行
table1.deleteRow(rowNumber);
}
</script>

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章