如何使用CSS为jQuery表中的每一行设置不同的图像

如何使用CSS为jQuery表中的每一行设置不同的图像,jquery,css,image,html-table,Jquery,Css,Image,Html Table,我有一个使用jQuery创建表的外部文件。 我已经知道了如何在css中将背景图像设置为td属性,但是由于表有4行,每行中的每个单元格都获得相同的图像。 我希望每一行都有不同的图像(但行中的每个单元格都相同)。 最终,我希望每个图像都是可点击的,并运行一个函数,将一个变量传递给该函数,但我仍在进行这方面的工作(到目前为止几乎没有成功) 这是表格: var $table = $('<table>'); $table.append() //tbody var $tbody = $tabl

我有一个使用jQuery创建表的外部文件。 我已经知道了如何在css中将背景图像设置为td属性,但是由于表有4行,每行中的每个单元格都获得相同的图像。 我希望每一行都有不同的图像(但行中的每个单元格都相同)。 最终,我希望每个图像都是可点击的,并运行一个函数,将一个变量传递给该函数,但我仍在进行这方面的工作(到目前为止几乎没有成功)

这是表格:

var $table = $('<table>');
$table.append()

//tbody
var $tbody = $table.append('<tbody />').children('tbody');

// add row
$tbody.append('<tr />').children('tr:last')
.append("<th>Clear</th>")
.append("<td></td>")
.append("<td></td>")
.append("<td></td>")
.append("<td></td>")
.append("<td></td>")
.append("<td></td>")
.append("<td></td>");

// add another row
$tbody.append('<tr />').children('tr:last')
.append("<th>Earlies</th>")
.append("<td></td>")
.append("<td></td>")
.append("<td></td>")
.append("<td></td>")
.append("<td></td>")
.append("<td></td>")
.append("<td></td>");

// add another row
$tbody.append('<tr />').children('tr:last')
.append("<th>Lates</th>")
.append("<td></td>")
.append("<td></td>")
.append("<td></td>")
.append("<td></td>")
.append("<td></td>")
.append("<td></td>")
.append("<td></td>");

// add another row
$tbody.append('<tr />').children('tr:last')
.append("<th>Double</th>")
.append("<td></td>")
.append("<td></td>")
.append("<td></td>")
.append("<td></td>")
.append("<td></td>")
.append("<td></td>")
.append("<td></td>");

// add table to dom
$table.appendTo('#dynamicTable');

});

您可以使用css伪n子元素

例如:


我想我需要以某种方式使用类?特别是当我打算为一行中的每个td使用相同的id时。我只是不使用这个,而是使用类(我想我读对了)。非常感谢。效果非常好。
#dynamicTable td {
    background-image: url(../images/clear_32px.gif); 
}
#dynamicTable tr:nth-child(1) td {
    background-image: url(../image1.gif); 
}
#dynamicTable tr:nth-child(2) td {
    background-image: url(../image2.gif); 
}
#dynamicTable tr:nth-child(3) td {
    background-image: url(../image3.gif); 
}
#dynamicTable tr:nth-child(4) td {
    background-image: url(../image4.gif); 
}