如何將不同的圖像應用於自動填充的表格單元格

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奇數規則將背景圖像分配給單元格，只要它們具有某些類即可。