1、javascript
<script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
bindListener();
});
// 用來綁定事件(使用unbind避免重複綁定)
function bindListener() {
$("a[name=remove]").unbind().click(function () {
$(this).parent().remove();
})
}
function addimg(N,MorA,D) {
var day;
switch(D)
{
case 1: day="2012-9-1"; break
case 2: day="2012-9-2";break
case 3: day="2012-9-3";break
case 4: day="2012-9-4";break
case 5: day="2012-9-5";break
default:null;
}
if(MorA==1)
{
$("#div" + N).append('<div class="iptdiv"><input type="text" name="'+D+'-text1-'+MorA+ '" value="'+day+'" class="ipt" disabled="disabled" /><input type="text" name="'+D+'-text1-'+MorA+ '" value="上午" class="ipt" disabled="disabled" /><input type="text"
name="'+D+'-text1-'+MorA+ '" class="ipt"/><input type="text" name="'+D+'-text1-'+MorA+ '" class="ipt" /><input type="text" name="'+D+'-text1-'+MorA+ '" class="ipt" /><input type="text" name="'+D+'-text1-'+MorA+ '" class="ipt" /><input type="text" name="'+D+'-text1-'+MorA+
'" class="ipt" /><a href="#" name="remove"> 刪除行</a></div>');
}
if(MorA==2)
{
$("#div" + N).append('<div class="iptdiv"><input type="text" name="'+D+'-text1-'+MorA+ '" value="'+day+'" class="ipt" disabled="disabled" /><input type="text" name="'+D+'-text1-'+MorA+ '" value="下午" class="ipt" disabled="disabled" /><input type="text"
name="'+D+'-text1-'+MorA+ '" class="ipt"/><input type="text" name="'+D+'-text1-'+MorA+ '" class="ipt" /><input type="text" name="'+D+'-text1-'+MorA+ '" class="ipt" /><input type="text" name="'+D+'-text1-'+MorA+ '" class="ipt" /><input type="text" name="'+D+'-text1-'+MorA+
'" class="ipt" /><a href="#" name="remove"> 刪除行</a></div>');
}
// 爲新元素節點添加事件偵聽器
//download jb51.net
bindListener();
}
<!--
function searchObjByTagName(obj, tag)
{
while(obj!=null && typeof(obj.tagName)!="undefind"){
if(obj.tagName==tag.toUpperCase()) return(obj);
obj=obj.parentElement; } return null;
}
function findValue()
{
var inputs = document.getElementById("oTable").getElementsByTagName("input");
var str = "";
for(var i=0; i<inputs.length; i++)
{
if(inputs[i].name)
str+="name="+inputs[i].name +",value="+inputs[i].value+";\n";
}
document.getElementById("hiddenfiled1").value=str;
alert(str);
}
//-->
</script>
2、頁面代碼
<form id="form1" runat="server">
<div class="m-box">
<table id="oTable" border="1">
<tr>
<td>
日期1
</td>
<td>
<table>
<tr>
<td>
<table>
<tr>
<td>
上午
</td>
<td>
<div id="div1">
<a href="javascript:addimg(1,1,1)">增加行</a>
<%--<a href="#" name="remove">刪除行</a>--%>
</div>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<table>
<tr>
<td>
下午
</td>
<td>
<div id="div2">
<a href="javascript:addimg(2,2,1)">增加行</a>
<%--<a href="#" name="remove">刪除行</a>--%>
</div>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
<td>
</td>
</tr>
<tr>
<td>
日期2
</td>
<td>
<table>
<tr>
<td>
<table>
<tr>
<td>
上午
</td>
<td>
<div id="div3">
<a href="javascript:addimg(3,1,2)">增加行</a>
<%--<a href="#" name="remove">刪除行</a>--%>
</div>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<table>
<tr>
<td>
下午
</td>
<td>
<div id="div4">
<a href="javascript:addimg(4,2,2)">增加行</a>
<%--<a href="#" name="remove">刪除行</a>--%>
</div>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
<td>
</td>
</tr>
<tr>
<td>
日期3
</td>
<td>
<table>
<tr>
<td>
<table>
<tr>
<td>
上午
</td>
<td>
<div id="div5">
<a href="javascript:addimg(5,1,3)">增加行</a>
<%--<a href="#" name="remove">刪除行</a>--%>
</div>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<table>
<tr>
<td>
下午
</td>
<td>
<div id="div6">
<a href="javascript:addimg(6,2,3)">增加行</a>
<%--<a href="#" name="remove">刪除行</a>--%>
</div>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
<td>
</td>
</tr>
<tr>
<td>
日期4
</td>
<td>
<table>
<tr>
<td>
<table>
<tr>
<td>
上午
</td>
<td>
<div id="div7">
<a href="javascript:addimg(7,1,4)">增加行</a>
<%--<a href="#" name="remove">刪除行</a>--%>
</div>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<table>
<tr>
<td>
下午
</td>
<td>
<div id="div8">
<a href="javascript:addimg(8,2,4)">增加行</a>
<%--<a href="#" name="remove">刪除行</a>--%>
</div>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
<td>
</td>
</tr>
<tr>
<td>
日期5
</td>
<td>
<table>
<tr>
<td>
<table>
<tr>
<td>
上午
</td>
<td>
<div id="div9">
<a href="javascript:addimg(9,1,5)">增加行</a>
<%--<a href="#" name="remove">刪除行</a>--%>
</div>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<table>
<tr>
<td>
下午
</td>
<td>
<div id="div10">
<a href="javascript:addimg(10,2,5)">增加行</a>
<%--<a href="#" name="remove">刪除行</a>--%>
</div>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
<td>
</td>
</tr>
</table>
<asp:Button ID="save" OnClientClick="findValue();" runat="server" Text="保存" OnClick="save_Click" />
<span id="span1" runat="server"></span>
<asp:HiddenField ID="hiddenfiled1" runat="server" /><span id="span2" runat="server"></span>
</div>
</form>
3、後臺代碼
根據需要編寫
