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) 测试效果：
总结：
学以致用。实践是最快的捷径！
时间： 2024-11-08 22:34:06