如何将不同的图像应用于自动填充的表格单元格 - how can I apply different images to an auto filled table cell

how can I apply different images to an auto filled table cell

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

在

这件事上的所有帮助和/或建议将不胜感激！我已经坚持了太多天了。

希望这对其他人有帮助。我的解决方案基于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 和行跨度（这会抛出单元格索引），并且之间的空单元格会自动填充使用梨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;
}

希望这对其他人有帮助！

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