1

我正在使用 pear HTML_TABLE 从数据库创建表格显示。因为有空字段，所以我使用自动填充来用图像填充空单元格。但是，我需要为交替列使用不同的图像。这是生成空单元格的代码：

    $attrs = array( 'class' => 'main', 
                    'id' => 'main_id',
                    'width' => '100%',
                    'border' => '1',
                    'cellspacing' => '0',
                    'cellpadding' => '0');
    $table = new HTML_Table($attrs);
    $table->setAutoGrow(true);
    $table->setAutoFill("<span class='iconImg'></span>");

我曾尝试使用 javascript 和 jquery 来完成此操作，但没有成功。我尝试过的 javascript (jquery) 是：

    $(".main td:not(.jobCell):not(.tJCell)").each(function(){ 
    var colIndex = $(this).cellPos().left;
        var preCol = colIndex % 2;

        if (preCol == 0)
        {
            $(this).text( 'Even');
            //$(this).attr( 'src', '../images/buttons/list.png');
        }
        else
        {
            $(this).attr( 'src', '../images/buttons/btn_pointer.png');
        }
    });

上面的 javascript 适用于在每个单元格中放置奇数或偶数文本。问题是我不需要文本，我需要一个图像，就像在 else 语句中一样。我相信代码是正确的，但它不起作用。我什至尝试过用 css 做这个，但是下面的 css 也不起作用。

.iconImg
{
    background-image:url(../../images/buttons/list.png);
}

在此问题上的所有帮助和/或建议将不胜感激！我已经坚持了太多天了。

4

2 回答 2

2

希望这将有助于其他人。我的解决方案基于 cweiske 的回答/建议。由于我无法让 css 奇数/偶数功能工作，我使用以下 jquery 脚本为我的自动填充单元格分配一个类：

$(".main td:not(.jobCell):not(.tJCell)").each(function(){ 
            var colIndex = $(this).cellPos().left;
                var preCol = colIndex % 2;

                if (preCol == 0)
                {
                    $(this).addClass('evenCell');
                }
                else
                {
                    $(this).addClass('oddCell');
                }
            });

以上函数是nrodic编写的参考代码。之所以使用它，是因为我在整个表格中都有 colspans 和 rowspans（这会引发单元格索引），并且之间的空单元格是使用 pear HTML_TABLE 自动填充自动填充的，如下所示：

$attrs = array( 'class' => 'main', 
                'id' => 'main_id',
                'width' => '100%',
                'border' => '1',
                'cellspacing' => '0',
                'cellpadding' => '0');
$table = new HTML_Table($attrs);
$table->setAutoGrow(true);
$table->setAutoFill("");

然后生成的css代码是这样的：

.evenCell
{
    background:url(../../images/buttons/btn_pointer.png) no-repeat;
    background-position:center;

}
.oddCell
{
    background:url(../../images/buttons/btn_list.png) no-repeat;
    background-position:center;
}

希望这对其他人有帮助！

于 2013-09-09T21:01:58.110 回答
1

您可以使用CSS 奇偶规则将背景图像分配给单元格，只要它们具有某些类即可。

于 2013-09-09T10:31:21.713 回答