<html lang="ja">
<head>
<meta charset="utf-8">
<title>jQueryの練習</title>
<style>
table{
margin: 15px auto 10px auto;
}
th{
padding:5px;
background:#266;
border:1px solid #777;
color: #fff;
}
td{
border:solid 1px #777;
background:#eee;
padding:5px;
}
table tr.odd td {
background: #ccc;
}
</style>
</head>
<body>
<table id="testTable" border="1">
<tbody><tr>
<th>関東</th>
<td>東京</td>
</tr>
<tr>
<th>関東</th>
<td>千葉</td>
</tr>
<tr>
<th>関東</th>
<td>神奈川</td>
</tr>
<tr>
<th>近畿</th>
<td>大阪</td>
</tr>
<tr>
<th>近畿</th>
<td>兵庫</td>
</tr>
<tr>
<th>近畿</th>
<td>京都</td>
</tr>
</tbody></table>
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script>
$(document).ready(function(){
$('#testTable').each(function () {
var pre_element = null;
var col_num = 0;
$(this).find('tr').each(function () {
var now_th = $(this).find('th').eq( col_num );
if (pre_element == null) {
pre_element = now_th;
console.log(now_th.text());
} else if (now_th.text() == pre_element.text()) {
console.log(now_th.text());
now_th.remove();
if (pre_element.attr('rowspan') == null) pre_element.attr('rowspan', 1);
pre_element.attr('rowspan', parseInt(pre_element.attr('rowspan'),10) + 1);
} else {
console.log(now_th.text());
pre_element = now_th;
}
});
});
});
</script>
</body>
</html>
