一些jquery的实践

最新推荐文章于 2020-06-08 19:47:07 发布

蓉城浮世

最新推荐文章于 2020-06-08 19:47:07 发布

阅读量504

点赞数

分类专栏：网页模板

本文链接：https://blog.csdn.net/jingxianmoyang/article/details/9970791

版权

网页模板专栏收录该内容

1 篇文章 0 订阅

订阅专栏

针对通过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; 
}

蓉城浮世

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
一些jquery的实践

针对通过jquery添加出来的html元素，要想定义一些事件响应，必须在添加了html元素后再定义一次事件响应。见下面标红处，添加了table的一行后，再次定义了按钮的click事件。进销存管理平台<!--//指定当前组模块URL地址 var URL = '__URL__';var APP = '__APP__';var PUBLIC = '__PUBLIC__';
复制链接

扫一扫