Table中定义列宽度为*时候问题修正

最新推荐文章于 2024-06-16 20:09:24 发布

原创最新推荐文章于 2024-06-16 20:09:24 发布 · 159 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#jQuery #IE #Safari #Firefox #Gmail #ViewUI

Ajax 专栏收录该内容

9 篇文章

订阅专栏

本文介绍了一款基于jQuery的脚本，用于解决表格布局中指定列宽与表格总宽不匹配的问题，确保星号(*)列能正常显示。

在表格中，若指定部分列的宽度绝对值，某些列使用*来自动调整，若列的宽度绝对值之和大于表格的宽度时候，会导致*列的显示异常。

本脚本修正以上显示方式。

/**
 * @copyright vaalhaai.org
 *
 * <pre>
 * vaalhaai table css amendment
 * base on jQuery 1.3.2
 *
 * @author: Jimmy.Shine <Jimmy.Shine@Gmail.com>
 * @version: 1.0
 * @date : Nov 30,2009
 * @description: If the table-layout is fixed,if the table width is less than the sum of col widths,
 * 				the define of col='*' will had no width,so we set a	fixed width='?' instead of it.
 * @testFor: IE 7,8; Firefox 3.5; Opera10.10; Safari 4
 * </pre>
 */
(function($){
    // Define object
    $.fn.tableCssAmendment = function(options){
        // jquery extend to define default settings.
        this.settings = $.extend({
            starColWidth: 100
        }, options || {});

		if(isNaN(this.settings.starColWidth)){
			alert("Member starColWidth must typeof Number");
			return;
		}
        reTable = $(this).filter("table");
        
        var colsWidth = 0;
        var colStarCount = 0;
        var cols = reTable.children("colgroup").children("col").each(function(index){
            if ($(this).attr("width") == "*" || $(this).attr("width") == "" || $(this).attr("vaalhaai_rewidth")) {
                colStarCount++;
            }
            else {
                colsWidth += parseInt($(this).attr("width"));
            }
        });
        if (colStarCount > 0) {
            var percent = 100 / colStarCount;
            reTable.children("colgroup").children("col").each(function(index){
                if ($(this).attr("width") == "*" || $(this).attr("width") == "" || $(this).attr("vaalhaai_rewidth")) {
                    $(this).attr("width", percent + "%").attr("vaalhaai_rewidth", true);
                }
            });
        }
		
		if (colsWidth >= reTable.parent().width()) {
            reTable.width(reTable.width() + colStarCount * this.settings.starColWidth);
        }
        else {
            reTable.width(reTable.width());
        }
        return this;
    }; 
})(jQuery);