TestesHTML/newhtml.php at master · nikolaslibert/TestesHTML · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
<!DOCTYPE html>
<!--
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
-->
<html>
    <head>
        <title>TODO supply a title</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width">
        <style>
            td{ border: 0px solid #666; cursor:pointer}
            div { padding:0 2px; }
            .selected{ background: green}
        </style>

        <script src="include/jquery-1.10.2.js"></script>

        <script>
        $(document).ready(function(){
            var $table = $('#table').html(makeTable());


            /* when range selected,  next click will only clear range and
            won't set a new "selected" cell if true*/
            var useClickToClearRangeBeforeStartNewRange = true;

            $table.click(function(e) {

                var selectedCells = getCellArr();

                var $cell = $(e.target).closest('td');

                if (selectedCells && selectedCells.length === 2) {
                    clearAllSelections();
                    if (useClickToClearRangeBeforeStartNewRange) {
                        return;
                    }
                     selectedCells = null;
                }

                var $row = $cell.parent();

                var cellIdx = $cell.addClass('selected').index(),
                    rowIdx = $row.index(),
                    currSelect = [rowIdx, cellIdx];

                if (!selectedCells) {
                    setCellArr([currSelect]);

                } else {
                    selectedCells.push(currSelect);
                    setCellArr(selectedCells); /* sort row and cell indices */
                    var actRows = mapElIdx(selectedCells, 'tr'),
                        actCells = mapElIdx(selectedCells, 'td');

                    $table.find('tr').slice(actRows[0], actRows[1] + 1).each(function() {
                        $(this).addClass('active').find('td').slice(actCells[0], actCells[1] + 1).addClass('selected');
                    });

                }

            });

            function getCellArr() {
                return $table.data('selectedx') || false;
                //console.log('getCellArr', $table.data('selected'))
            }

            function setCellArr(arr) {
                $table.data('selectedx', arr);
                //console.log('setCellArr', $table.data('selected'))
            }

            function clearAllSelections() {
                //console.info('clear all')
                $('.active').removeClass('active').find('.selected').removeClass('selected');
                $table.removeData();
            }

            function mapElIdx(idxArray, elType) {
                var elPos = (elType === 'tr') ? 0 : 1;
                return $.map(idxArray, function(arr) {
                    return arr[elPos];
                }).sort(sortNum);
            }

            function sortNum(a, b) {
                return a - b;
            }

            /* function to create table for demo only */

            function makeTable() {
                var html = [];
                for (i = 0; i < 20; i++) {
                    html.push('<tr><td>');
                    var cells = [];
                    for (j = 0; j < 20; j++) {
                        cells.push('<div>&nbsp;</div>');
                    }
                    html.push(cells.join('</td><td>') + '</td></tr>');
                }
                return html.join('');
            }
        });
        </script>

    </head>
    <body>
        <div id="teste"></div>
        <table id="table"></table>
    </body>
</html>