javascript - td 内的 HTML CSS 对齐

Question

我正在使用 Jquery-UI 日期选择器做一些自定义 CSS。

我有一个要求在日历上的每个日期下方显示一个点以指示某种评级:

我正在动态创建点:

  <strong>.</strong>

我想显示所有截止到星期日 1 之类的日期的点，但我找不到一种方法来动态地将每个点与每个日期对齐。

Answer 1

如果你只是想把点放在你的灰色位中，那么你可以更改你的 js 代码(我注意到你正在使用 jQuery，所以已经重写以使用它):

var table = $(".ui-datepicker-calendar").eq(0);
var tds = table.find("td");

tds.each(function(i) {
    var link = $(this).find('a');
    if (link.length > 0) {
        var rating = 5; // add your rating functionality here
        switch (rating)
        {
            case 1:
                link.addClass('dot one');
                break;
            case 2:
                link.addClass('dot two');
                break;
            case 3:
                link.addClass('dot three');
                break;
            case 4:
                link.addClass('dot four');
                break;
            case 5:
                link.addClass('dot five');
                break;
        }
    }
});

并使用以下样式:

.dot.one:after {content:'.';}
.dot.two:after {content:'..';}
.dot.three:after {content:'...';}
.dot.four:after {content:'....';}
.dot.five:after {content:'.....';}
.dot:after {display:block; color:#081ae4; font-weight:bold;}

这样您的点击功能就不会丢失日期 - Example