Question

我使用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);
}

非常感谢所有关于此事的帮助和/或建议！我已经被困在这个太多天了。

Answer 1

希望这会有助于他人。我的解决方案基于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和rowpans（抛出单元格索引），并且使用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;
}

希望这对其他人有帮助！

Answer 2

您可以使用CSS even-odd rules将背景图像分配给单元格，只要它们有一些类。

如何将不同的图像应用于自动填充的表格单元格

2 个答案: