· 6 years ago · May 31, 2019, 07:30 AM
1<html>
2<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
3
4<script src="https://cdnjs.cloudflare.com/ajax/libs/jexcel/2.0.0/js/jquery.jexcel.js"></script>
5<script src="https://cdnjs.cloudflare.com/ajax/libs/jexcel/2.0.0/js/jquery.jdropdown.js"></script>
6<script src="https://cdnjs.cloudflare.com/ajax/libs/jexcel/2.0.0/js/jquery.jcalendar.js"></script>
7
8
9
10<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jexcel/2.0.0/css/jquery.jexcel.min.css" type="text/css" />
11<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jexcel/2.0.0/css/jquery.jdropdown.min.css" type="text/css" />
12<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jexcel/2.0.0/css/jquery.jcalendar.min.css" type="text/css" />
13
14<div id='my-spreadsheet'></div>
15<html>
16<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
17<script src="https://code.highcharts.com/highcharts.js"></script>
18
19<script src="https://cdnjs.cloudflare.com/ajax/libs/jexcel/2.0.0/js/jquery.jexcel.js"></script>
20<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jexcel/2.0.0/css/jquery.jexcel.min.css" type="text/css" />
21
22<div id="my"></div>
23
24</html>
25</html>
26
27<script>
28var data = [
29 ['Tokyo', 7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6],
30 ['New York', -0.2, 0.8, 5.7, 11.3, 17.0, 22.0, 24.8, 24.1, 20.1, 14.1, 8.6, 2.5],
31 ['Berlin', -0.9, 0.6, 3.5, 8.4, 13.5, 17.0, 18.6, 17.9, 14.3, 9.0, 3.9, 1.0],
32 ['London', 3.9, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0, 16.6, 14.2, 10.3, 6.6, 4.8],
33];
34
35var update = function (obj, cel, val) {
36 // Get the cell position x, y
37
38 var id = $(cel).prop('id').split('-');
39alert(id);
40 // If the related series does not exists create a new one
41 if (! chart.series[id[1]]) {
42 // Create a new series row
43 var row = [];
44 for (i = 1; i < data[id[1]].length; i++) {
45 row.push(parseFloat(data[id[1]][i]));
46 }
47 // Append new series to the chart
48 chart.addSeries({ name:data[id[1]][0], data:row });
49 } else {
50 // Update the value from the chart
51 chart.series[id[1]].data[id[0]-1].update({y:parseFloat(val)});
52 }
53}
54
55$('#my').jexcel({
56
57 data:data,
58 onchange:update,
59 colHeaders: [ 'Country' ],
60 colWidths: [ 300 ]
61});
62
63$('#my').jexcel('updateSettings', {
64 table: function (instance, cell, col, row, val, id) {
65 // Format numbers
66 // if (col == 2 || col == 3) {
67 // // Get text
68 // txt = $(cell).text();
69 // // Format text
70 // txt = numeral(txt).format('0,0.00');
71 // // Update cell value
72 // $(cell).html(' $ ' + txt);
73 // }
74 // Odd col colours
75
76 if (!(col % 2)){
77
78
79 $(cell).css('background-color', 'blue');
80 }
81 //newly added for col A
82 if (col == 0){
83 $(cell).css('background-color', 'white');
84 }
85
86 // // Bold the total row
87 if ($(cell).text() == 'Total') {
88 $('.r' + row).css('font-weight', 'bold');
89 $('.r' + row).css('background-color', 'black');
90 }
91 }
92});
93
94</script>