282
表格跨行時隔行變色
效果圖：
代碼：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="https://www.w3.org/1999/xhtml">
<head>
<title>表格跨行時隔行變色</title>
</head>
<style type="text/css">
td
{
border: 1px solid;
width: 100px;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript">
$(function () {
var i = 0, j = 0, k = 0;
$("#tableShow tr").each(function (n) {
if ($(this).find("td").size() == 4) {
j = $(this).find("td:eq(0)").attr("rowspan");
};
i++;
if (k % 2 == 0 ) {
$(this).css("backgroundColor", "yellow")
};
if (i == j) {
i = 0;
k++;
};
});
})
</script>
<body>
<table >
<!--第一行-->
<tr>
<td rowspan="3">
aaa
</td>
<td rowspan="3">
bbb
</td>
<td>
ccc
</td>
<td>
ddd
</td>
</tr>
<tr>
<td>
ee
</td>
<td>
ff
</td>
</tr>
<tr>
<td>
gg
</td>
<td>
hh
</td>
</tr>
<!--第二行-->
<tr>
<td rowspan="3">
aaa
</td>
<td rowspan="3">
bbb
</td>
<td>
ccc
</td>
<td>
ddd
</td>
</tr>
<tr>
<td>
ee
</td>
<td>
ff
</td>
</tr>
<tr>
<td>
gg
</td>
<td>
hh
</td>
</tr>
<!--第三行-->
<tr>
<td rowspan="3">
aaa
</td>
<td rowspan="3">
bbb
</td>
<td>
ccc
</td>
<td>
ddd
</td>
</tr>
<tr>
<td>
ee
</td>
<td>
ff
</td>
</tr>
<tr>
<td>
gg
</td>
<td>
hh
</td>
</tr>
<!--第四行-->
<tr>
<td rowspan="3">
aaa
</td>
<td rowspan="3">
bbb
</td>
<td>
ccc
</td>
<td>
ddd
</td>
</tr>
<tr>
<td>
ee
</td>
<td>
ff
</td>
</tr>
<tr>
<td>
gg
</td>
<td>
hh
</td>
</tr>
</table>
</body>
</html>
最後更新：2017-04-03 16:48:50