web前端开发的时候经常会遇到要做表单的页面或者做一些表格的效果如相同内容要同一个单元格里面显示,一般的方法是table里面在套table但是这种方法会增加页面的负担影响页面加载速度但是如果用DIV有不好控制写的css样式要很多,那怎么办呢?我们就中和下利用JQuery来和他一个table里面相同内容的单元格,这里代码跟大家分享下,希望对大家有用,如下:
<script type="text/javascript">
jQuery.fn.rowspan = function(colIdx) { //封装的一个JQuery小插件
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;
}
});
});
});
}
$(function() {
$(“#table1″).rowspan(0);//传入的参数是对应的列数从0开始,哪一列有相同的内容就输入对应的列数值
$(“#table1″).rowspan(2);
});
</script>
<body>
<table id="table1" border="1" cellpadding="5" cellspacing="0" width="300px">
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>f</td>
<td>3</td>
<td>s</td>
</tr>
</table>
</body>
分享到:
相关推荐
jqgrid合并单元格 .jqgrid { width: 80%; margin: 0 auto; } /* 这个代码是解决表头有一点点错位的问题 */ .ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-...
jquery datatable 单元格合并,通过js实现相同内容单元格动态合并!!!jquery datatable 单元格合并,通过js实现相同内容单元格动态合并!!!
////table中指定行第N列合并单元格(合并后会多出一列,删除N+1单元格即可) var tds = $("#dgList .TableHeader1").find('td'); tds[6].setAttribute("colSpan", "2"); 还可以写成:tds[6].attr("rowSpan", 2);
判断是否合并单元格: tr = $("#printPage tr").length;// 获取当前表格中tr的个数 var mark = 0; //要合并的单元格数 var index = 0; //起始行数 /* * 要合并单元格,需要存储两个参数, * 1,开始合并的单元格的...
表格:合并单元格 参考示例:合并单元格 调用方法:margeCells。如下代码: 代码如下: grid.on(“load”, onLoad); function onLoad(e) { var grid = e.sender; var marges = [ { rowIndex: 1, columnIndex: 0, ...
可编辑的类似于excel功能的jQuery开发的表格,功能上还有很多的缺陷...目前的问题还有在 IE低版本上还存在着合并时只将单元格删除没有添加colspan这个属性,不知道是什么情况。 本人:笨熊熊 QQ:26732421 期待高手指点!
Jquery datagrid实现单元格编辑
jq分页与选中功能,自己写的小功能学习用,分享大家,有问题可以解决一下,谢谢! 2个功能:一个为分页功能,另一个选中功能!!
JQ JS javascript 截图功能 画图功能
主要介绍了jQuery实现合并表格单元格中相同行操作,结合实例形式分析了jQuery针对table表格实现单元格合并的相关操作技巧,需要的朋友可以参考下
jquery实现图片预览功能,支撑图片旋转,放大缩小,下载
jQuery做的展开收缩效果,可用于网上商城的功能展示
利用jq实现倒计时功能,添加jquery.min.js js库的引用即可使用,代码有提示
使用JS实现JQ查找节点功能的一个demo
效果如下 原表格: col0 col1 col2 col3 SuZhou 11111 22222 SuZhouCity SuZhou 33333 44444 SuZhouCity SuZhou 55555 66666 SuZhouCity ShangHai 77777 88888 ShangHaiCity ShangHai ...GuangZho
JQ大量效果JQ大量效果JQ大量效果JQ大量效果JQ大量效果JQ大量效果JQ大量效果JQ大量效果JQ大量效果JQ大量效果JQ大量效果JQ大量效果JQ大量效果JQ大量效果
jq 验证码插件jq 验证码插件jq 验证码插件jq 验证码插件jq 验证码插件jq 验证码插件jq 验证码插件jq 验证码插件
jq在线考试答题,单纯的答题页面,存静态的html页面,如有需要可以下载,可以整合到项目中使用很好。
移动端 安卓 jquery仿通讯录首字母检索功能,含汉字索引。
JQ JS javascript 拖拽 排序功能 列表排序 菜单排序 表格排序