最近の更新

2016年11月14日月曜日

フォーカス行・列に色をつける方法(rowspanあり)

【目的】
jQuery3で、フォーカス行・列に色を付けます。
※rowspanがある場合に対応します。



【手順】
1.『jQuery3.1.0のダウンロード方法』の手順で、jQuery3.1.0をダウンロードしておきます。
2.『index.html』というファイルを作成。
3.『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;
                var skip = new Array();
                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++) {
                    
                        while (skip.indexOf("row" + rowNo + "col" + colNo) >= 0) {
                            colNo++;
                        }

                        var td = tds.eq(j);
                        td.addClass("row" + rowNo);
                        td.addClass("col" + colNo);

                        var rowspan = td.attr("rowspan");
                        var colspan = td.attr("colspan");

                        if (rowspan) {
                            for (var k = 1; k < rowspan; k++) {
                                td.addClass("row" + (rowNo + k));
                                skip.push("row" + (rowNo + k) + "col" + colNo);
                            }
                        }

                        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>1</td>
                    <td rowspan="2">1</td>
                    <td>1</td>
                    <td>1</td>
                    <td>1</td>
                    <td rowspan="2">1</td>
                    <td rowspan="2">1</td>
                    <td>1</td>
                    <td rowspan="3">1</td>
                    <td>1</td>
                    <td>1</td>
                    <td rowspan="4">1</td>
                    <td>1</td>
                    <td rowspan="5">1</td>
                </tr>
                <tr>
                    <td>2</td>
                    <td rowspan="2">2</td>
                    <td>2</td>
                    <td>2</td>
                    <td rowspan="2">2</td>
                    <td rowspan="3">2</td>
                    <td>2</td>
                    <td rowspan="4">2</td>
                </tr>
                <tr>
                    <td>3</td>
                    <td>3</td>
                    <td rowspan="2">3</td>
                    <td>3</td>
                    <td rowspan="2">3</td>
                    <td>3</td>
                    <td rowspan="3">3</td>
                </tr>
                <tr>
                    <td>4</td>
                    <td>4</td>
                    <td>4</td>
                    <td rowspan="2">4</td>
                    <td rowspan="2">4</td>
                    <td rowspan="2">4</td>
                    <td>4</td>
                </tr>
                <tr>
                    <td>5</td>
                    <td>5</td>
                    <td>5</td>
                    <td>5</td>
                    <td>5</td>
                    <td>5</td>
                    <td>5</td>
                    <td>5</td>
                </tr>
            </tbody>
        </table>
    </body>
</html>

4.ダウンロードした『jquery-3.1.0.min.js』と『index.html』を同一ディレクトリに配置します。
5.『index.html』をブラウザで開きます。
6.以下の様に表示されれば成功です。





































以上です。

0 件のコメント:

コメントを投稿

注: コメントを投稿できるのは、このブログのメンバーだけです。

関連記事