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

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奇数规则将背景图像分配给单元格，只要它们具有某些类即可。