今天帮同学用jQuery实现了一个小小的功能,特记录如下
test.html (部分代码)
<SCRIPT src="jquery.js"></SCRIPT>
<SCRIPT src="my.js"></SCRIPT>
<TABLE class="small" id="detailTable" cellSpacing="1" cellPadding="2" width="100%" align="center" bgColor="#000000" border="0">
<TBODY id="pagePic">
<tr class=TableData>
<td width="15%" align="right">第一页</td>
<td width="75%" align="left">文件图片1.jpg</td>
<td width="10%" align="left"><input class="BigButton" type="button" value="删除图片" name="listBtn2" onClick="doDelete()"></td>
</tr>
<tr class=TableData>
<td width="15%" align="right">第二页</td>
<td width="75%" align="left">文件图片2.jpg</td>
<td width="10%" align="left"><input class="BigButton" type="button" value="删除图片" name="listBtn2" onClick="doDelete()"></td>
</tr>
<tr class=TableData>
<td width="15%" align="right">第三页</td>
<td width="75%" align="left"><input name="file1" type="file"></td>
<td width="10%" align="left"><input class="BigButton" type="button" value="删除图片" name="listBtn2" onClick="doDelete()"></td>
</tr>
<tr class=TableData>
<td width="15%" align="right">第四页</td>
<td width="75%" align="left"><input name="file1" type="file">
</td>
<td width="10%" align="left"><input class="BigButton" type="button" value="删除图片" name="listBtn2" onClick="doDelete()"></td>
</tr>
<tr class=TableData id="upPic">
<td colspan="2" align="left"> </td>
<td width="10%"><input class="BigButton" type="button" value="添加图片" name="listBtn2" id="addPic""></td>
</tr>
</TBODY>
</TABLE>
my.js
$(function(){
var page;
//alert(page);
var num=new Array("一","二","三","四","五","六","七","八","九","十","十一","十二","十三","十四","十五","十六","十七","十八","十九","二十");
$("#addPic").click(function(){
page=$("#pagePic > tr").length;
$("#upPic").before("<tr class=TableData><td width=15% align=right>第"+num[page-1]+"页</td><td width=75% align=left><input name=file1 type=file></td><td width=10% align=left><input class=BigButton type=button value=删除图片 name=listBtn2 onClick=doDelete()></td></tr>");
}
);
});
效果图: