Выделение ячеек таблицы
Выделение ячеек таблицы, по принципу Excel. Работает с Shift и Ctrl
HTML
<table id="timeGrid">
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
<td>9</td>
<td>10</td>
</tr>
<tr>
<td>11</td>
<td>12</td>
<td>13</td>
<td>14</td>
<td>15</td>
<td>16</td>
<td>17</td>
<td>18</td>
<td>19</td>
<td>20</td>
</tr>
<tr>
<td>21</td>
<td>22</td>
<td>23</td>
<td>24</td>
<td>25</td>
<td>26</td>
<td>27</td>
<td>28</td>
<td>29</td>
<td>30</td>
</tr>
<tr>
<td>31</td>
<td>32</td>
<td>33</td>
<td>34</td>
<td>35</td>
<td>36</td>
<td>37</td>
<td>38</td>
<td>39</td>
<td>40</td>
</tr>
<tr>
<td>41</td>
<td>42</td>
<td>43</td>
<td>44</td>
<td>45</td>
<td>46</td>
<td>47</td>
<td>48</td>
<td>49</td>
<td>50</td>
</tr>
<tr>
<td>51</td>
<td>52</td>
<td>53</td>
<td>54</td>
<td>55</td>
<td>56</td>
<td>57</td>
<td>58</td>
<td>59</td>
<td>60</td>
</tr>
<tr>
<td>61</td>
<td>62</td>
<td>63</td>
<td>64</td>
<td>65</td>
<td>66</td>
<td>67</td>
<td>68</td>
<td>69</td>
<td>70</td>
</tr>
<tr>
<td>71</td>
<td>72</td>
<td>73</td>
<td>74</td>
<td>75</td>
<td>76</td>
<td>77</td>
<td>78</td>
<td>79</td>
<td>80</td>
</tr>
<tr>
<td>81</td>
<td>82</td>
<td>83</td>
<td>84</td>
<td>85</td>
<td>86</td>
<td>87</td>
<td>88</td>
<td>89</td>
<td>90</td>
</tr>
<tr>
...
CSS
table {
width: 100%;
border-collapse: collapse;
table-layout: fixed;
}
td {
padding: 5px;
text-align: center;
border: 1px solid #999;
}
.pressedTime {
background: #4b75a4;
color: #ffffff;
}
td {
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
JavaScript
var table = $('#timeGrid'),
tr = $('tr', table),
td = $('td', tr),
selection = {
single: function(el) {
td.not(el).removeClass(this.cl);
this.ctrl(el);
},
shift: function(el) {
if (typeof this.last !== 'number') {
return this.single(el);
}
var till = $(el).index(this.slcr),
from = this.last;
if (from > till) till = [from, from = till][0];
td.not(td.eq(this.last)).removeClass(this.cl);
td.slice(from, till).add(el).addClass(this.cl);
},
rectangle: function(el){
td.removeClass(this.cl);
var from = td.eq(this.last)[0];
var x1 = from.cellIndex,
x2 = el.cellIndex,
y1 = from.parentNode.rowIndex,
y2 = el.parentNode.rowIndex;
if (x1 > x2) x2 = [x1, x1 = x2][0];
if (y1 > y2) y2 = [y1, y1 = y2][0];
x2++;
y2++;
tr.slice(y1, y2).each(function(i, t){
$('td',t).slice(x1,x2).addClass(selection.cl);
});
},
ctrl: function(el) {
$(el).addClass(this.cl);
this.last = $(el).index(this.slcr);
},
slcr: '#timeGrid td',
cl: 'pressedTime',
last: null
};
var pressed = false;
td.on({
mousedown: function(e) {
method = !e.shiftKey && !e.ctrlKey ? 'single' : (e.shiftKey ? 'shift' : 'ctrl');
selection[method](this);
pressed = true;
},
mouseenter: function(e) {
if (pressed) {
//selection.rectangle(this);
selection[e.altKey ? 'shift' : 'rectangle'](this);
}
}
});
$(document).on('mouseup', '*', function(e) {
pressed = false;
});