jQuery3で、フォーカス行・列に色を付けます。
※colspanがある場合に対応します。
【手順】
１．『jQuery3.1.0のダウンロード方法』の手順で、jQuery3.1.0をダウンロードしておきます。
２．『index.html』というファイルを作成。
３．『index.html』を以下の様に入力。
<!doctype html>
<html>
<head>
<script src="jquery-3.1.0.min.js"></script>
<script>
$(function(){
var table = $("table");
var trs = table.children("tbody").children("tr");
var rowLength = trs.length;
for (var i = 0, rowNo = 1; i < rowLength; i++, rowNo++) {
var tr = trs.eq(i);
var tds = tr.children("td");
var colLength = tds.length;
for (var j = 0, colNo = 1; j < colLength; j++, colNo++) {
var td = tds.eq(j);
td.addClass("row" + rowNo);
td.addClass("col" + colNo);
var colspan = td.attr("colspan");
if (colspan) {
for (var k = 1; k < colspan; k++) {
td.addClass("col" + (colNo + k));
}
colNo += parseInt(colspan) - 1;
}
}
}
$("td").hover(function() {
var colNo = $(this).index() + 1;
var rowNo = $(this).parent().index() + 1;
var clazz = $(this).attr("class").split(" ");
var rowClass = $.grep(clazz, rowFilter);
var colClass = $.grep(clazz, colFilter);
var selectorCell = "." + rowClass[0] + ",." + colClass[0];
var cells = $(this).closest("table").find(selectorCell);
cells.addClass("focus-col");
}, function() {
var colNo = $(this).index() + 1;
var rowNo = $(this).parent().index() + 1;
var clazz = $(this).attr("class").split(" ");
var rowClass = $.grep(clazz, rowFilter);
var colClass = $.grep(clazz, colFilter);
var selectorCell = "." + rowClass[0] + ",." + colClass[0];
var cells = $(this).closest("table").find(selectorCell);
cells.removeClass("focus-col");
});
function rowFilter(element, index) {
if (element.indexOf("row") != -1) {
return element;
}
}
function colFilter(element, index) {
if (element.indexOf("col") != -1) {
return element;
}
}
});
</script>
<style>
.focus-col {
background-color: pink;
}
</style>
</head>
<body>
<table border="1">
<tbody>
<tr>
<td>１</td>
<td>２</td>
<td>３</td>
<td>４</td>
<td>５</td>
</tr>
<tr>
<td colspan="2">１</td>
<td>３</td>
<td>４</td>
<td>５</td>
</tr>
<tr>
<td>１</td>
<td colspan="2">２</td>
<td>４</td>
<td>５</td>
</tr>
<tr>
<td>１</td>
<td>２</td>
<td colspan="2">３</td>
<td>５</td>
</tr>
<tr>
<td>１</td>
<td>２</td>
<td>３</td>
<td colspan="2">４</td>
</tr>
<tr>
<td colspan="2">１</td>
<td colspan="2">３</td>
<td>５</td>
</tr>
<tr>
<td colspan="2">１</td>
<td>３</td>
<td colspan="2">４</td>
</tr>
<tr>
<td>１</td>
<td colspan="2">２</td>
<td colspan="2">４</td>
</tr>
<tr>
<td colspan="3">１</td>
<td>４</td>
<td>５</td>
</tr>
<tr>
<td>１</td>
<td colspan="3">２</td>
<td>５</td>
</tr>
<tr>
<td>１</td>
<td>２</td>
<td colspan="3">３</td>
</tr>
<tr>
<td colspan="4">１</td>
<td>５</td>
</tr>
<tr>
<td>１</td>
<td colspan="4">２</td>
</tr>
<tr>
<td colspan="5">１</td>
</tr>
</tbody>
</table>
</body>
</html>
４．ダウンロードした『jquery-3.1.0.min.js』と『index.html』を同一ディレクトリに配置します。
５．『index.html』をブラウザで開きます。
６．以下の様に表示されれば成功です。
以上です。
0 件のコメント:
コメントを投稿
注: コメントを投稿できるのは、このブログのメンバーだけです。