试图修复表头,获取css问题

Question

最初我问了这个问题并编写了我自己的插件来实现同样的目标,但我面临着关于css of table的非常奇怪的问题.
应用插件表后,单元格边框将被取消排序.

js问题的解答:问题演示

在小提琴中,您可以看到在第一个单元格的第一个单元格之后tr,标题边框线和表格边框线不对齐.我希望thead细胞和td细胞的边界线对齐.谁能告诉我如何实现这一目标？

Answer 1

这篇文章仍然是一个草案,它没有完成,等等.我不在乎你是否讨厌我发布一个不完整的答案,处理它,downvote我,等等.我很忙,OP在评论中要求它.我迟早会到处完成......

让我们首先对您发布的代码进行一些清理,这样我就可以实际阅读您的代码,并在我们走下这个兔子洞时牢牢抓住现实.

如果您编写干净的代码,您的问题将更容易看到.

因此,让我们清理并观察,因为这里的所有问题都会显露出来.

第一步:你的jsFiddle设置它运行"onDomReady",这基本上意味着你已经$(document).ready(...)调用了盒子里的所有代码,这很好,除了你有另一个$(document).ready(...)进入那里.让我们改变一下.

第二步:让我们在那里添加一些空格和适当的缩进,并停止使用这些单字母变量名称.

{}是范围括号,它们应该缩进,不包括所有内容,它们让我们知道某些范围是什么.

不要在一行上写.each()循环,这不会增加任何值,并使您的代码难以阅读.

$t应该被称为有意义的东西,让我们尝试元素,因为它包含$(this)元素,这是你正在使用的活动元素.

w应该被称为有意义的东西,但由于你只使用它两次我只是使用element.width().

o需要不那么模糊,让我们去obj.

第三步:选择结构

if(typeof(i)=='number')o.height=i;
else if(typeof(i)=='object')o=i;
else if(typeof(i)=='undefined')o={height:300}

打破它,让它可读.保存行不会使你成为一个更好的程序,编写干净且易于理解的代码.

为什么不使用switch-case语句？

    switch (typeof(i)){
        case "number":
            o.height=i;
            break;
        case "object":
            o=i;
            break;
        case "undefined":
            o={height:300};
            break;
    }

第四步:不要内嵌样式.只是不要.没有理由去做,这会让每个人的生活更加艰难.

相反,我们只需将样式轻轻放入它所属的样式表中,然后使该parent=$('...')行看起来像parent=$('<div><div></div></div>').appendTo('body');.

第五步:Closure不会将任何值传递给参数

经过一些清理后,我们看到了这段代码:

self.width(self.width() - 
    function(width){
        var parent,child;
        if(width===undefined){
            parent=$('<div><div></div></div>').appendTo('body');
            child=parent.children();
            width= (child.innerWidth()) - (child.height(99).innerWidth());
            parent.remove();
        }
        return width;
    }()
);

好的,那是个问题.让我们删掉几行来指出这里的问题:

self.width(
   self.width() - 
    function(width){
        /*...*/
        if(width===undefined){
            /*...*/
        }
        return width;
    }()
);

所以,快速回顾一下这个模式你在这里:

(function(arg1){
    /*code*/
})(data);

数据传递给arg1.Arg1在该函数的本地范围内声明一个变量,它不会从外部获取任何内容.外部数据通过()该函数调用传入函数,您的代码已放弃.想一想:

var msg = function(text) {
    alert(text);
};

然后你称之为......

msg("hello world");

你的闭包所做的几乎是一样的,除非你定义你的功能,你也称之为.从而...

(function(text) {
    alert(text);
})("hello world");

所以,你需要将某种值传递到那里,否则整个事情总是未定义的.让我们这样做.我们路过的是什么？我无从行动.这就是程序员需要在代码中添加注释的原因.

第六步:评论你的代码,以便除了你自己之外的其他人会看到这个代码并且不知道你真实想要做什么,并且只能猜测.这就像你发布了200点奖金,并没有打扰帮助那些想要帮助你的人.老兄,你为什么这样做？你为什么不能//This is what this does给我一个提示？我曾经对你做过什么？

第七步:让我们看看我们是否可以使用JS Fiddle进行JS更改

伟大的odin ...... HTML的2000行很长？

好的,我在这里使用pastebin是为了节省帖子空间.

好吧,你从这开始:http://pastebin.com/xjmm4cev

你正在使用大量的无包装,并将类放到单个元素上.你不应该在每个HTML元素上都这样做,CSS非常有效地处理这个问题,所以让我们继续前进,然后把所有的nowrap = nowrap和class ="header"的东西都删掉(我们会把它放回去时刻,但每组只有一个,而不是每个元素).

然后让我们摆脱无用的空白行.

让我们通过HTML整理来运行它,并使它很好并缩进正确.

http://pastebin.com/uHtSZ4h5

更容易阅读.好的,那么我们在这里看到了什么？好吧,看起来你一直在圈子里,一次又一次地切割和粘贴同样的东西.您还可以在线使用javascript,例如使用onchange和onclick属性.这对你的代码来说通常是一件非常糟糕的事情,并且很难维护(因为我确信你已经看到这个连续27次切割+粘贴的2000多行野兽).

那么,我们来看看:

1. 元素,不在表单内
2. 表格中不在行之外的元素,但不包括表格的头部/正文/页脚部分
3. 代码是一个巨大的痛苦,因为它继续进行,如果你需要改变它,你基本上是搞砸了.

让我们解决所有问题.

1. 我们将在标签中使用事件,而不是在线内容.因此,所有这些内联onchange和click属性都可以启动.
2. 所有这些只是浮动的输入都需要放入一个表单中,并从只有行或表部分所属的表中取出.
3. 如果我们可以帮助它,弄清楚我们如何不能有过多的输入元素.
4. 到底是什么的)="",你必须在每一个输入按钮？删除.

所以,这里是你所有隐藏的盒子:http://pastebin.com/LXZSkvyf我已经删除了,因为我们没有任何地方.

这里的代码看起来没有所有这些奇怪的东西:http://pastebin.com/MiaJTGpb

更具可读性,但仍然不太完整.

第8步:您可以做些什么来使表格的HTML更好？

1. 你正在使用Thead和Tbody,这很好.
2. 你正在使用像cellpadding这样的东西的属性,这很糟糕.
3. 你给每个身体行一个ID.我觉得你不需要这样做,但这并不总是坏事.但是,我会告诉你如何在没有它的情况下工作.
4. 你给一些选择一个select-box类,但它在css中没有.我删除了它.
5. 您为名为"option_value"的选择提供title属性.当鼠标悬停在某个东西上时,title属性通常用于制作工具提示弹出窗口.我不确定你将在这里做什么,但这必然会让你的用户感到困惑.我强烈建议在那个地方提供比option_value更好的东西.
6. 你继续使用ID Submit_FMS_AddDelivery.HTML ID标记应该是唯一的,并且只在一个元素上使用一次.你得到了27次,这很糟糕.我不认为你需要一个ID,所以我删除了它.
7. 你还有输入btn,我正在移除它,因为你没有显示它在任何地方使用过.
8. 你可能在select和TR上不需要任何这些ID标签,说实话,所以我拉它们.

那是什么样的？基本上,你已经拥有了几乎只是数据的东西,这是一种很好的纯粹形式.非常好.http://pastebin.com/UNS6CAtb

第9步:你想做什么？

让我们退一步看看这里.

你真正想做的就是保留一个固定的标题,但你最终做了很多JavaScript黑客并在很多地方操纵DOM.我们需要停止这样做.有没有更简单的方法来做你想要的？

我将不得不扩展如何使用其他东西来实现此功能,但我会在几个小时内起床工作.我会再次更新......但我们会到达那里.

现在,因为我没有修复我拿出的东西,所以看起来不对.但是我累了.

那么,到目前为止我们处于这里:http://jsfiddle.net/5C6z7/ 加上我们取出的那些输入(并将在以后以不同的方式返回)

Answer 2

看起来你要做的就是考虑填充:每个单元格左边和右边都有3个px填充,所以你必须在宽度上增加6个px:

$t.find('tr:first th').each(function(){cols.push($(this).width()+6);});

否则,内部只有一个字的单元将"推"实际宽度稍微宽一点,以便该字适合,其他具有移动空间的单元将通过变得稍微窄一些来补偿.标题和正文都使用不同的内容独立完成,这会产生实际单元格宽度的差异.

编辑:对于Firefox,您还需要扩大表格,以便细胞适合.计算列宽后添加

var actualWidth = $t.width()+cols.length*6;
$t.width( actualWidth );

然后将包装器更改为:

$wrap.css({width:actualWidth,height:o.height,overflow:'auto'});

编辑2:要同时滚动标题和正文,您需要将它们都包装到处理滚动的外部div.

var $outerWrap = $( '<div>' ).css( {width:"300px", overflow:'auto' } );
var $wrap=$('<div>').css(
 { width:actualWidth,height:o.height,"overflow-y":'auto', "overflow-x":'hidden' }
);

$firstRow.wrap( $outerWrap );
$firstRow.after( $wrap );
$wrap.append( $t );

演示:http://jsfiddle.net/YcRTz/2/