论坛首页 Web前端技术论坛

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

浏览 2053 次
精华帖 (0) :: 良好帖 (0) :: 新手帖 (0) :: 隐藏帖 (0)
作者 正文
   发表时间:2010-01-07   最后修改:2010-01-07

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

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

/**
 * @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);
论坛首页 Web前端技术版

跳转论坛:
Global site tag (gtag.js) - Google Analytics