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

Question

I am using pear HTML_TABLE to create a table display from a database. Because there are empty fields I am using the auto fill to fill in empty cells with an image. However, I need a different image for the alternating columns. This is the code that generates the empty cells:

    $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>");

I have tried using javascript, and jquery to accomplish this, but without success. The javascript (jquery) i have tried is:

    $(".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');
        }
    });

The above javascript is fine for placing odd or even as text in each cell. The problem is that I don't need text, I need an image, as in the else statement. I believe the code is correct, but it does not work. I have even tried doing this with css, but the following css doesn't work either.

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

All help and/or advice in this matter would be greatly appreciated! I have been stuck on this for too many days now.

Answer 1

In the hopes that this will help others. My solution is based on cweiske's answer/suggestion. Since I could not get the css odd/even functionality to work, I used the following jquery script to assign a class to my auto filled cells:

$(".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');
                }
            });

The above function is reference code written by nrodic. This was used because I have colspans and rowspans throughout my table (which throws off cell indexing), and the empty cells between are auto filled with using pear HTML_TABLE auto fill like this:

$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("");

Then the resulting css code is this:

.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;
}

Hope this is helpful to others!

Answer 2

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