码迷,mamicode.com
首页 > Web开发 > 详细

jQuery简单操作

时间:2014-12-29 16:50:27      阅读:198      评论:0      收藏:0      [点我收藏+]

标签:jquery   合并单元格   jquery基础   jquery常用函数   jquery插件   

    jQuery简单操作  


一:简介

      

        在前端方面一直很小白、只了解一些基本的JS、还不是太熟悉、jQuery也是、用的时候有时候很简单的用法还要去查、系统的学习一下、把常用的记录一下做个备忘、也是笔记。不断更新。。。

 

二:常用函数

 

        1、$(‘#id’).remove()——移除id为id的元素。

        2、$(‘#id’).empty()—— 移除id为id的元素中的内容。

 

三:实用插件

 

        1、table中合并相同内容的单元格:

                a)       内容:

	//封装的一个JQuery小插件、实现相同内容合并单元格的代码
	jQuery.fn.rowspan = function(colIdx) {
		return this.each(function() {
			var that;
			$('tr', this).each(
					function(row) {
						$('td:eq(' + colIdx + ')', this).filter(':visible').each(
								function(col) {
									if (that != null
											&& $(this).html() == $(that).html()) {
										rowspan = $(that).attr("rowSpan");
										if (rowspan == undefined) {
											$(that).attr("rowSpan", 1);
											rowspan = $(that).attr("rowSpan");
										}
										rowspan = Number(rowspan) + 1;
										$(that).attr("rowSpan", rowspan);
										$(this).hide();
									} else {
										that = this;
									}
								});
					});
		});
	}


                b)       测试内容:动态生成数据table、页面和js:

<body onload="init();">
	<div align="center">
		<table id="logDetailTable" width="99%" border="1" collapse="collapse">
		<thead>
			<tr>
				<th width="20%" height="40px">项目名称</th>
				<th width="20%" height="40px">监控类型</th>
				<th width="35%" height="40px">子项目名</th>
				<th width="25%" height="40px">日志信息</th>
			</tr>
		</thead>
		<tbody id="logDetailInfo">

		</tbody>
	</table>
	</div>
	
</body>
function init(){
	//获取数据集result
	...
	//构建table:
	for (var i in result){
		fillShowLogTable(result[i]);
	}
	
	//指定要合并的table的那些行
	$('#logDetailTable').rowspan(0);
	$('#logDetailTable').rowspan(1);
}

function fillShowLogTable(list){
	var str = '';
	str += '<tr><td style="width:20%;text-align:center">'+list.PRO_TITLE+'</td>';
	str += '<td style="width:20%;height:30px;text-align:center">'+list.SUB_PROJECT_NAME+'</td>';
	str += '<td style="width:35%;height:30px;text-align:center">'+list.TASK_NAME+'</td>';
		
	if(list.TIP_VALUE == 'no'){
		list.TIP_VALUE = '无新日志';
		str += '<td class="noNewLog" style="width:25%;height:30px;text-align:center">'+list.TIP_VALUE+'</td></tr>';
	}else if(list.TIP_VALUE == 'yes'){
		list.TIP_VALUE = '有新日志';
		str += '<td class="hasNewLog" style="width:25%;height:30px;text-align:center">'+list.TIP_VALUE+'</td></tr>';
	}
	$(str).appendTo($('#logDetailInfo'));
}


                c)       测试效果:

 技术分享


总结:

 

       学以致用。实践是最快的捷径!


jQuery简单操作

标签:jquery   合并单元格   jquery基础   jquery常用函数   jquery插件   

原文地址:http://blog.csdn.net/crave_shy/article/details/42239625

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!