一些jquery的实践

来源：互联网发布：wps办公表格软件编辑：程序博客网时间：2024/06/06 04:02

针对通过jquery添加出来的html元素，要想定义一些事件响应，必须在添加了html元素后再定义一次事件响应。见下面标红处，添加了table的一行后，再次定义了按钮的click事件。

<!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><link rel="stylesheet" type="text/css" href="excel-2007.css"/><script src="jquery.js"></script><script language="JavaScript"><!--//指定当前组模块URL地址 var URL = '__URL__';var APP = '__APP__';var PUBLIC = '__PUBLIC__';function add_item(){var new_item_html = "<tr>\<td align=center><input type=\"button\" class=\"del_item\" value=\"x\" /></td>\<td><input name=\"item_name[]\"></td>\<td><input name=\"item_format[]\"></td>\<td><input name=\"item_unit[]\"></td>\<td><input name=\"item_price_white[]\"></td>\<td><input name=\"item_price_black[]\"></td>\<td><input name=\"item_price_color[]\"></td>\<td><input name=\"item_remark[]\"></td>\</tr>";$("table#quotation").append(new_item_html);$("input.del_item").click(function(){$(this).closest("tr").empty();})}$(document).ready(function(){add_item();$("input.add_item").click(function(){add_item();})$("input").onfocus(function(){$(this).css("border", "2px solid #000000");})$("input").onblur(function(){$(this).css("border", "2px solid #ffffff");})});//--></script></head><body><!-- 菜单区域  --><!-- 主页面开始 --><div id="main" class="main" ><!-- 主体内容  --><div class="content" ><div class="title">角色组列表</div><!--  功能组区域  --><div class="operate" ><html:imageBtn name="edit" value="编辑" click="edit()" style="impBtn hMargin fLeft shadow" /><html:imageBtn name="delete" value="删除" click="del()" style="impBtn hMargin fLeft shadow" /><!-- 功能组区域结束 --><!-- 列表显示区域  --><div class="list" ><form><table id="quotation" border="1" class="ExcelTable2007"><tr rowspan=4 class="heading"><td colspan=8>合 昌 線 帶 染 整（越南）有 限 公 司<br />HE CHANG THREADS  DYEING (VIETNAM)CO;LTD<br />報價單<br />Quotation</td></tr><tr><td colspan=8>客戶寶號：<input name="customer_name" /></td></tr><tr><td colspan=4>聯 絡 人：<input name="contactor" /></td><td colspan=4>日期（DATE）:<input name="date" /></td><tr><td rowspan=2>項次</td><td rowspan=2>品名</td><td rowspan=2>規格</td><td rowspan=2>單位</td><td colspan=3 align=center>單價(<select name="money_unit" id="money_unit"><option value="USD">USD</option><option value="YND">YND</option></select>)</td><td rowspan=2>備註</td></tr><tr><td>WHITE</td><td>BLACK</td><td>COLOR</td></tr></table><input type="button" class="add_item" value="+" /><input type="submit" /></form></div><!--  分页显示区域 --><div class="page">{$page}</div><!-- 列表显示区域结束 --></div><!-- 主体内容结束 --></div><!-- 主页面结束 --></body></html>

其中用到的css

table.ExcelTable2007 {border: 1px solid #B0CBEF;border-width: 1px 0px 0px 1px;font-size: 11pt;font-family: Calibri;text-align: left;font-weight: 100;border-spacing: 0px;border-collapse: collapse;}table.ExcelTable2007 TH {background-image: url(excel-2007-header-bg.gif);background-repeat: repeat-x; font-weight: normal;font-size: 14px;border: 1px solid #9EB6CE;border-width: 0px 1px 1px 0px;height: 17px;}table.ExcelTable2007 TD {border: 0px;background-color: white;padding: 0px 4px 0px 2px;border: 1px solid #D0D7E5;border-width: 0px 1px 1px 0px;}table.ExcelTable2007 TD B {border: 0px;background-color: white;font-weight: bold;}table.ExcelTable2007 TR.heading {background-color: #E4ECF7;text-align: center;border: 1px solid #9EB6CE;border-width: 0px 1px 1px 0px;font-weight: bold;}table.ExcelTable2007 input {  width: 80px;  padding: 2px 4px 2px 4px;  margin: 0;  border: 2px solid #000000; } table.ExcelTable2007 input.del_item { width: auto; height: auto;border: 1px solid #000000;margin: 0 auto;padding: 0 auto;} table.ExcelTable2007 input:focus {  border: 2px solid #000000; }