我有一个使用 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:
#dynamicTable td {
background-image: url(../images/clear_32px.gif);
}
您可以使用 css 伪 nth-child https://developer.mozilla.org/de/docs/Web/CSS/:nth-child
例如:
#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);
}
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句