当rowspan碰到Chrome、Safari和Opera，jQuery解决方案

当rowspan遇到Chrome、Safari和Opera

这是我碰到一个问题，也是好多人碰到的问题，所以借用csdn上的一个贴的内容来描述该问题，如下：

?

显示效果如下：

?

我翻看了一下该贴，最终决定用js来解决（还有一个解决方案是直接设置height属性）。

?

?

?

借鉴了csdn上代码，先贴上

?

//DEMO
//这里只作了粗略的计算，精确点的话还需要考虑tr、td所使用的样式（边框宽度、padding值）
window.onload = function() {
    if (!window.all) {
        var obj = document.getElementById('demo');
        
        var rowHeight = Math.ceil(parseInt(obj.offsetHeight) / obj.getElementsByTagName('tr').length) + 'px';
        var cells = obj.getElementsByTagName('td');
        for (var i = 0; i < cells.length; i ++) {
            if (cells[i].rowSpan < 2) cells[i].style.height = rowHeight;
        }
    }
}

?

思路大体上是：先得到table的总的高度，然后除以行数，就可以得到每行的平均高度，然后对没有设置rowspan的td设置为此平均高度。但实际中需要对高度做些调整，因为td的样式（如margin和padding会对高度产生影响）。

?

我是用jQuery来做的，经过艰苦的努力，终于得到了一个比较满意的解法，如下：

?

$(function(){
    //if (!window.all) {
	if ($.browser.safari || $.browser.opera) {
		//alert("me");	// 确认是哪种浏览器
		// Safari pass
		// Chrome pass
		// Opera pass

		function adjustCellHeight($table, adjustHeight) {
			var tableHeight = $table.height();
			//alert(tableHeight);
			var rowCount = $("tr", $table).length;
			//alert(rowCount);
			if (tableHeight > 0 && rowCount > 0) {
				//alert("xxx");
				//var adjustHeight = 11;	// 对计算出来的平均行高，需要减去一定得像素值(由margin和padding引起)，已达到与IE和FF下同样的效果。
				var cellHeight = (tableHeight - 2 * (adjustHeight || 0)) / rowCount + "px";	// 计算每行的高度
				$("td", $table).each(function(){
					var $this = $(this);
					var rowspan = $this.attr("rowspan");
					if (rowspan < 2) {
						$this.css("height", cellHeight);
					}
				});
				//alert("hello");
				var tableHeightAdjusted = $table.height();
				if (tableHeightAdjusted - tableHeight >= rowCount || tableHeight - tableHeightAdjusted >= rowCount) {
					//var adjustHeightSuggest = adjustHeight + (tableHeightAdjusted - tableHeight) / rowCount;
					//alert(tableHeight + " " + tableHeightAdjusted + " " + adjustHeightSuggest);
					//return adjustHeightSuggest;
					return tableHeightAdjusted - tableHeight;
				}
				//alert("done");
			}
		}

		var $table = $("#bmbasic");
		var adjustHeightSuggest = adjustCellHeight($table);
		//alert(adjustHeightSuggest);
		if (adjustHeightSuggest) {
			adjustCellHeight($table, adjustHeightSuggest);
		}
    } else {
		// IE pass
		// Firefox pass
	}
});

?

注意：我的table的id是bmbasic。

?

方法是采用两次调整法：

第一次调整：将每行设置为平均高度，得到最终高度与原高度差值（tableHeightAdjusted - tableHeight），记为adjustHeightSuggest；

第二次调整：将table的当前高度减去两倍的adjustHeightSuggest之后求得平均高度，设置上去就正确了。为什么是两倍，想想就清楚了。

?

?

?

?

?

?