Editable table in template node

#1

Hi, i will move this topic from groups in google forum to here
my problem:
im sending data from mysql to template node displaying in a table.
im using the code of Steve Rickus, great code by the way
some changes includes editable and save button.
the original save by click i have changed to save by doubleclick, and i added a save button at end of each row
problem:
the original code does not catch the change, but forwards the original msg.payload

[{"id":"d239ca2f.6cf758","type":"inject","z":"48f8ead.7e90014","name":"Go","topic":"","payload":"1","payloadType":"str","repeat":"","crontab":"","once":false,"onceDelay":"","x":153.01734924316406,"y":511.0104064941406,"wires":[["e3a477cc.711798"]]},{"id":"e3a477cc.711798","type":"function","z":"48f8ead.7e90014","name":"dummyarray","func":"var myArray = [{ \"value1\": \"aaa\", \"value2\": \"A\", \"value3\": \"bbb\",\n\"value6\": \"B\", \"value4\": \"ccc\", \"value5\": \"C\", \"value7\": \"aaa\", \"value8\": \"A\",\n\"value9\": \"bbb\",\"value10\": \"B\", \"value11\": \"ccc\", \"value12\": \"C\"}];\nmsg.payload = myArray;\nreturn msg;","outputs":1,"noerr":0,"x":338.18404388427734,"y":541.0104103088379,"wires":[["328a7269.1b93de"]]},{"id":"328a7269.1b93de","type":"ui_template","z":"48f8ead.7e90014","group":"1bdd63f2.633acc","name":"Data-table","order":3,"width":"24","height":"14","format":"<style>\n th {\n text-decoration: underline;\n }\n .numeric {\n text-align: right;\n padding-right: 15px;\n }\n</style>\n\n<table cellpadding=\"1\" border=\"1\" id=\"table1\" class=\"table-hover\" style=\"width: 100%;\">\n <thead>\n <tr>\n <th>value1</th> \n <th>value2</th>\n <th>value3</th>\n <th>value4</th>\n <th>value5</th>\n <th>value7</th>\n <th>value8</th>\n <th>value9</th>\n <th>value10</th>\n <th>value11</th>\n <th>value12</th>\n <th>value13</th>\n <th>value14</th>\n <th>value15</th>\n <th>save</th>\n </tr>\n </thead>\n <tbody>\n <tr ng-repeat=\"row in msg.payload\" ng-dblclick=\"sendRow(row)\">\n <td class=\"numeric\" bgcolor=gray>{{row.value1}}</td>\n <td contenteditable=\"true\">{{row.value2}}</td>\n <td contenteditable=\"true\">{{row.value3}}</td>\n <td contenteditable=\"true\">{{row.value4}}</td>\n <td contenteditable=\"true\">{{row.value5}}</td>\n <td bgcolor=gray>{{row.value7}}</td>\n <td contenteditable=\"true\">{{row.value8}}</td>\n <td bgcolor=gray>{{row.value9}}</td>\n <td bgcolor=gray>{{row.value10}}</td>\n <td contenteditable=\"true\">{{row.value11}}</td>\n <td bgcolor=gray>{{row.value12}}</td>\n <td bgcolor=gray>{{row.value13}}</td>\n <td contenteditable=\"true\">{{row.value14}}</td>\n <td contenteditable=\"true\">{{row.value15}}</td>\n <td>\n\n <md-button ng-click=\"sendRow(row)\">Set</md-button>\n </tr>\n </tbody>\n</table>\n\n<script>\n(function($scope) {\n $scope.sendRow = function(obj) {\n $scope.send({ \"payload\": obj });\n $scope.send({ \"payload\": (document.getElementById(\"table1\").rows[1].innerHTML) });\n };\n})(scope);\n</script>","storeOutMessages":false,"fwdInMessages":false,"templateScope":"local","x":565.0173492431641,"y":546.0104064941406,"wires":[["fc73bfc8.3103e"]]},{"id":"fc73bfc8.3103e","type":"debug","z":"48f8ead.7e90014","name":"","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"false","x":804.0173492431641,"y":538.0104064941406,"wires":[]},{"id":"1bdd63f2.633acc","type":"ui_group","z":"","name":"Grafer","tab":"1cbf6c09.5ae5d4","order":1,"disp":true,"width":"32","collapse":false},{"id":"1cbf6c09.5ae5d4","type":"ui_tab","z":"","name":"Statistikk/Log","icon":"dashboard","order":1}]

0 Likes

#2

here is another version of my flow
[{"id":"d239ca2f.6cf758","type":"inject","z":"48f8ead.7e90014","name":"Go","topic":"","payload":"1","payloadType":"str","repeat":"","crontab":"","once":false,"onceDelay":"","x":153.01734924316406,"y":511.0104064941406,"wires":[["e3a477cc.711798"]]},{"id":"e3a477cc.711798","type":"function","z":"48f8ead.7e90014","name":"dummyarray","func":"var myArray =[{ \"value1\": \"aaa\", \"value2\": \"A\", \"value3\": \"bbb\",\n\"value6\": \"B\", \"value4\": \"ccc\", \"value5\": \"C\", \"value7\": \"aaa\", \"value8\": \"A\",\n\"value9\": \"bbb\",\"value10\": \"B\", \"value11\": \"ccc\", \"value12\": \"C\"},{ \"value1\": \"aaa\", \"value2\": \"A\", \"value3\": \"bbb\",\n\"value6\": \"B\", \"value4\": \"ccc\", \"value5\": \"C\", \"value7\": \"aaa\", \"value8\": \"A\",\n\"value9\": \"bbb\",\"value10\": \"B\", \"value11\": \"ccc\", \"value12\": \"C\"},{ \"value1\": \"aaa\", \"value2\": \"A\", \"value3\": \"bbb\",\n\"value6\": \"B\", \"value4\": \"ccc\", \"value5\": \"C\", \"value7\": \"aaa\", \"value8\": \"A\",\n\"value9\": \"bbb\",\"value10\": \"B\", \"value11\": \"ccc\", \"value12\": \"C\"}];\nmsg.payload = myArray;\nreturn msg;","outputs":1,"noerr":0,"x":338.18404388427734,"y":541.0104103088379,"wires":[["328a7269.1b93de"]]},{"id":"328a7269.1b93de","type":"ui_template","z":"48f8ead.7e90014","group":"1bdd63f2.633acc","name":"Data-table","order":3,"width":"24","height":"14","format":"<style>\n th {\n text-decoration: underline;\n }\n .numeric {\n text-align: right;\n padding-right: 15px;\n }\n</style>\n\n\n<table cellpadding=\"1\" border=\"1\" id=\"table1\" class=\"table-hover\" style=\"width: 100%;\">\n <thead>\n <tr>\n <th>value1</th> \n <th>value2</th>\n <th>value3</th>\n <th>value4</th>\n <th>value5</th>\n <th>value7</th>\n <th>value8</th>\n <th>value9</th>\n <th>value10</th>\n <th>value11</th>\n <th>value12</th>\n <th>value13</th>\n <th>value14</th>\n <th>value15</th>\n <th>save</th>\n </tr>\n </thead>\n <tbody>\n <tr ng-repeat=\"row in msg.payload\" ng-dblclick=\"sendRow(row)\">\n <td class=\"numeric\" bgcolor=gray>{{row.value1}}</td>\n <td contenteditable=\"true\">{{row.value2}}</td>\n <td contenteditable=\"true\">{{row.value3}}</td>\n <td contenteditable=\"true\">{{row.value4}}</td>\n <td contenteditable=\"true\">{{row.value5}}</td>\n <td bgcolor=gray>{{row.value7}}</td>\n <td contenteditable=\"true\">{{row.value8}}</td>\n <td bgcolor=gray>{{row.value9}}</td>\n <td bgcolor=gray>{{row.value10}}</td>\n <td contenteditable=\"true\">{{row.value11}}</td>\n <td bgcolor=gray>{{row.value12}}</td>\n <td bgcolor=gray>{{row.value13}}</td>\n <td contenteditable=\"true\">{{row.value14}}</td>\n <td contenteditable=\"true\">{{row.value15}}</td>\n <td>\n\n <md-button ng-click=\"sendRow(row)\">Set</md-button>\n </tr>\n </tbody>\n</table>\n\n<script>\n(function($scope) {\n var array = [];\nvar table = document.querySelector(\"table tbody\");\nvar rows = table.children;\nfor (var i = 0; i < rows.length; i++) {\n\tvar fields = rows[i].children;\n var rowArray = [];\n for (var j = 0; j < fields.length; j++){\n rowArray.push(fields[j].innerHTML);\n }\n array.push(rowArray);\n} \n $scope.sendRow = function(obj) {\n$scope.send({ \"payload\": array });\n }; \n})(scope);\n</script>\n\n<!--script>\n(function($scope) {\n $scope.sendRow = function(obj) {\n $scope.send({ \"payload\": obj });\n $scope.send({ \"payload\": (document.getElementById(\"table1\").rows[1].innerHTML) });\n };\n})(scope);\n</script-->","storeOutMessages":false,"fwdInMessages":false,"templateScope":"local","x":565.0173492431641,"y":546.0104064941406,"wires":[["fc73bfc8.3103e"]]},{"id":"fc73bfc8.3103e","type":"debug","z":"48f8ead.7e90014","name":"","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"false","x":804.0173492431641,"y":555.0104026794434,"wires":[]},{"id":"1bdd63f2.633acc","type":"ui_group","z":"","name":"Grafer","tab":"1cbf6c09.5ae5d4","order":1,"disp":true,"width":"32","collapse":false},{"id":"1cbf6c09.5ae5d4","type":"ui_tab","z":"","name":"Statistikk/Log","icon":"dashboard","order":1}]

still not able to catch the right level
Karl

0 Likes

#3

When you add a flow to a reply you need to add three (3) backticks before and after it to prevent double quotes from becoming “pretty” quotes which will prevent the flow from importing in NR.

For example here is a import without using the three backpacks:
this is “a test” ok
and here it is with the three back ticks
this is "a test" ok
see the difference.

1 Like

#4

hello again, i have done some more work on this and im getting closer.
i need advice how to make it get the values from the row i click save on, not like now where i have to define what row
[{"id":"5ee7cef3.83e08","type":"inject","z":"de18d8cb.8dd2f8","name":"Go","topic":"","payload":"1","payloadType":"str","repeat":"","crontab":"","once":false,"onceDelay":"","x":249,"y":214,"wires":[["7b26211c.4531d"]]},{"id":"7b26211c.4531d","type":"function","z":"de18d8cb.8dd2f8","name":"dummyarray","func":"var myArray =[{ \"value1\": \"aaa\", \"value2\": \"A\", \"value3\": \"bbb\",\n\"value6\": \"B\", \"value4\": \"ccc\", \"value5\": \"C\", \"value7\": \"aaa\", \"value8\": \"A\",\n\"value9\": \"bbb\",\"value10\": \"B\", \"value11\": \"ccc\", \"value12\": \"C\"},{ \"value1\": \"aaa\", \"value2\": \"A\", \"value3\": \"bbb\",\n\"value6\": \"B\", \"value4\": \"ccc\", \"value5\": \"C\", \"value7\": \"aaa\", \"value8\": \"A\",\n\"value9\": \"bbb\",\"value10\": \"B\", \"value11\": \"ccc\", \"value12\": \"C\"},{ \"value1\": \"aaa\", \"value2\": \"A\", \"value3\": \"bbb\",\n\"value6\": \"B\", \"value4\": \"ccc\", \"value5\": \"C\", \"value7\": \"aaa\", \"value8\": \"A\",\n\"value9\": \"bbb\",\"value10\": \"B\", \"value11\": \"ccc\", \"value12\": \"C\"}];\nmsg.payload = myArray;\nreturn msg;","outputs":1,"noerr":0,"x":452.1667175292969,"y":227.0000352859497,"wires":[["77c6e958.3d02f8"]]},{"id":"77c6e958.3d02f8","type":"ui_template","z":"de18d8cb.8dd2f8","group":"90d32b18.7d9558","name":"Data-table","order":3,"width":"24","height":"5","format":"<style>\n th {\n text-decoration: underline;\n }\n .numeric {\n text-align: right;\n padding-right: 15px;\n }\n</style>\n\n\n<table cellpadding=\"1\" border=\"1\" id=\"table1\" class=\"table-hover\" style=\"width: 100%;\">\n <thead>\n <tr>\n <th>value1</th> \n <th>value2</th>\n <th>value3</th>\n <th>value4</th>\n <th>value5</th>\n <th>value7</th>\n <th>value8</th>\n <th>value9</th>\n <th>value10</th>\n <th>value11</th>\n <th>value12</th>\n <th>value13</th>\n <th>value14</th>\n <th>value15</th>\n <th>save</th>\n </tr>\n </thead>\n <tbody>\n <tr ng-repeat=\"row in msg.payload\" ng-dblclick=\"sendRow(row)\">\n <td class=\"numeric\" bgcolor=gray>{{row.value1}}</td>\n <td contenteditable=\"true\">{{row.value2}}</td>\n <td contenteditable=\"true\">{{row.value3}}</td>\n <td contenteditable=\"true\">{{row.value4}}</td>\n <td contenteditable=\"true\">{{row.value5}}</td>\n <td bgcolor=gray>{{row.value7}}</td>\n <td contenteditable=\"true\">{{row.value8}}</td>\n <td bgcolor=gray>{{row.value9}}</td>\n <td bgcolor=gray>{{row.value10}}</td>\n <td contenteditable=\"true\">{{row.value11}}</td>\n <td bgcolor=gray>{{row.value12}}</td>\n <td bgcolor=gray>{{row.value13}}</td>\n <td contenteditable=\"true\">{{row.value14}}</td>\n <td contenteditable=\"true\">{{row.value15}}</td>\n <td>\n\n <md-button ng-click=\"sendRow(row)\">Save</md-button>\n </tr>\n </tbody>\n</table>\n\n\n\n<script>\n(function($scope) {\n $scope.sendRow = function(obj) {\n //$scope.send({ \"payload\": obj });\n //$scope.send({ \"payload\": (document.getElementById(\"table1\").rows[0].innerText) });\n $scope.send({ \"payload\": (document.getElementById(\"table1\").rows[1].innerText) });\n };\n})(scope);\n</script>\n\n\n<!--script>\n(function($scope) {\n $scope.sendRow = function(obj) {\n $scope.send({ \"payload\": obj });\n $scope.send({ \"payload\": (document.getElementById(\"table1\").rows[1].innerHTML) });\n };\n})(scope);\n</script-->","storeOutMessages":false,"fwdInMessages":false,"templateScope":"local","x":658.9999923706055,"y":231.00003623962402,"wires":[["5ebe5b52.ed2774"]]},{"id":"5ebe5b52.ed2774","type":"debug","z":"de18d8cb.8dd2f8","name":"","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"false","x":887.9999771118164,"y":226.00000858306885,"wires":[]},{"id":"90d32b18.7d9558","type":"ui_group","z":"","name":"Group 1","tab":"c62b1524.4771a8","order":1,"disp":true,"width":"24","collapse":false},{"id":"c62b1524.4771a8","type":"ui_tab","name":"Tab 6","icon":"dashboard","order":1}]

image

0 Likes

#5

You could send the outpt of the template node thru a ‘split’ node using \t as the ‘split using’ option then you will get a series of msg’s, one for each column.

0 Likes

#6

Thanks, that was very useful.
i would apreciate if anyone could point out my error in this code,
$scope.sendRow = function(obj) {
$scope.send({ “payload”: (document.getElementById(“table1”).rows[1].innerText) });
as it stands now i can only send the chosen row.
i want to send the row i’m clicking. the line above will not do it obviously because it targets row1 only.
but using the original
$scope.sendRow = function(obj) {
$scope.send({ “payload”: obj });
only repeats the clicked row with the original text from input msg.payload.
there must be a clever way to make the original choose the edited row data?

Regards
Karl

0 Likes

#7

Sorry, you really do need to wrap it and lay it out properly so that we can read it. Use triple back-ticks. You can add a language hint after the opening ticks as well.

0 Likes

#8

my appologies :slight_smile: i keep forgetting that.
[{"id":"bb72a1fe.0d705","type":"inject","z":"e31188b7.feb4b8","name":"Go","topic":"","payload":"1","payloadType":"str","repeat":"","crontab":"","once":false,"onceDelay":"","x":293,"y":1059,"wires":[["6bc060d6.fd9b7"]]},{"id":"6bc060d6.fd9b7","type":"function","z":"e31188b7.feb4b8","name":"dummyarray","func":"var myArray =[{ \"value1\": \"aaa\", \"value2\": \"A\", \"value3\": \"bbb\",\n\"value6\": \"B\", \"value4\": \"ccc\", \"value5\": \"C\", \"value7\": \"aaa\", \"value8\": \"A\",\n\"value9\": \"bbb\",\"value10\": \"B\", \"value11\": \"ccc\", \"value12\": \"C\"},{ \"value1\": \"bbb\", \"value2\": \"A\", \"value3\": \"bbb\",\n\"value6\": \"B\", \"value4\": \"ccc\", \"value5\": \"C\", \"value7\": \"aaa\", \"value8\": \"A\",\n\"value9\": \"bbb\",\"value10\": \"B\", \"value11\": \"ccc\", \"value12\": \"C\"},{ \"value1\": \"ccc\", \"value2\": \"A\", \"value3\": \"bbb\",\n\"value6\": \"B\", \"value4\": \"ccc\", \"value5\": \"C\", \"value7\": \"aaa\", \"value8\": \"A\",\n\"value9\": \"bbb\",\"value10\": \"B\", \"value11\": \"ccc\", \"value12\": \"C\"}];\nmsg.payload = myArray;\nreturn msg;","outputs":1,"noerr":0,"x":496.1667175292969,"y":1072.0000352859497,"wires":[["e46fd9a5.557388"]]},{"id":"e46fd9a5.557388","type":"ui_template","z":"e31188b7.feb4b8","group":"b66f4990.b95738","name":"Data-table","order":3,"width":"24","height":"5","format":"<style>\n th {\n text-decoration: underline;\n }\n .numeric {\n text-align: right;\n padding-right: 15px;\n }\n</style>\n\n<script>\n function alertInnerHTML(e)\n{\n e = e || window.event;//IE\n alert(this.innerHTML);\n}\n\nvar theTbl = document.getElementById('table1');\nfor(var i=0;i<theTbl.length;i++)\n{\n for(var j=0;j<theTbl.rows[i].cells.length;j++)\n {\n theTbl.rows[i].cells[j].onclick = alertInnerHTML;\n }\n}\n</script>\n<table cellpadding=\"1\" border=\"1\" id=\"table1\" class=\"table-hover\" style=\"width: 100%;\">\n <thead>\n <tr>\n <th>value1</th> \n <th>value2</th>\n <th>value3</th>\n <th>value4</th>\n <th>value5</th>\n <th>value7</th>\n <th>value8</th>\n <th>value9</th>\n <th>value10</th>\n <th>value11</th>\n <th>value12</th>\n <th>value13</th>\n <th>value14</th>\n <th>value15</th>\n <th>save</th>\n </tr>\n </thead>\n <tbody>\n <tr ng-repeat=\"row in msg.payload\" ng-dblclick=\"sendRow(row)\">\n <td class=\"numeric\" bgcolor=gray>{{row.value1}}</td>\n <td contenteditable=\"true\">{{row.value2}}</td>\n <td contenteditable=\"true\">{{row.value3}}</td>\n <td contenteditable=\"true\">{{row.value4}}</td>\n <td contenteditable=\"true\">{{row.value5}}</td>\n <td bgcolor=gray>{{row.value7}}</td>\n <td contenteditable=\"true\">{{row.value8}}</td>\n <td bgcolor=gray>{{row.value9}}</td>\n <td bgcolor=gray>{{row.value10}}</td>\n <td contenteditable=\"true\">{{row.value11}}</td>\n <td bgcolor=gray>{{row.value12}}</td>\n <td bgcolor=gray>{{row.value13}}</td>\n <td contenteditable=\"true\">{{row.value14}}</td>\n <td contenteditable=\"true\">{{row.value15}}</td>\n <td>\n\n <md-button ng-click=\"sendRow(row)\">Save</md-button>\n <!--md-button ng-click=\"send({payload: (row)})\">Save</md-button-->\n </tr>\n </tbody>\n</table>\n\n\n\n<script>\n(function($scope) {\n $scope.sendRow = function(obj) {\n $scope.send({ \"payload\": obj });\n //$scope.send({ \"payload\": (document.getElementById(\"table1\").click() });\n $scope.send({ \"payload\": (document.getElementById(\"table1\").rows[1].innerText) });\n };\n})(scope);\n</script>\n\n\n\n<!--script>\n(function($scope) {\n $scope.sendRow = function(obj) {\n $scope.send({ \"payload\": obj });\n $scope.send({ \"payload\": (document.getElementById(\"table1\").rows[1].innerHTML) });\n };\n})(scope);\n</script-->","storeOutMessages":false,"fwdInMessages":false,"templateScope":"local","x":702.9999923706055,"y":1076.000036239624,"wires":[["8a082505.278ad8"]]},{"id":"8a082505.278ad8","type":"debug","z":"e31188b7.feb4b8","name":"","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"false","x":854,"y":934,"wires":[]},{"id":"b66f4990.b95738","type":"ui_group","z":"","name":"Group 1","tab":"7bd9f9fd.ab7538","order":1,"disp":true,"width":"24","collapse":false},{"id":"7bd9f9fd.ab7538","type":"ui_tab","name":"Tab 6","icon":"dashboard","order":1}]

here is my sample flow where my problem is very well illustrated in the debug.

Best regards
Karl

0 Likes

#9

after intensive googling :slight_smile: i found a code that displays in alert the row i click

<script>
function myFunction(x) {
    alert(document.getElementById("table1").rows[x.rowIndex].innerText);
}    

</script>```

sooo, the obvious question, how do i get this to msg.payload?

Best regards
Karl
0 Likes

#10

solved
[{"id":"d263c630.adfb28","type":"inject","z":"f215cc82.b4d88","name":"Go","topic":"","payload":"1","payloadType":"str","repeat":"","crontab":"","once":true,"onceDelay":"2","x":228.0173568725586,"y":116.00001907348633,"wires":[["443e4019.c5163"]]},{"id":"443e4019.c5163","type":"function","z":"f215cc82.b4d88","name":"dummyarray","func":"var myArray =[{ \"value1\": \"aaa\", \"value2\": \"A\", \"value3\": \"bbb\",\n\"value6\": \"B\", \"value4\": \"ccc\", \"value5\": \"C\", \"value7\": \"aaa\", \"value8\": \"A\",\n\"value9\": \"bbb\",\"value10\": \"B\", \"value11\": \"ccc\", \"value12\": \"C\"},\n{ \"value1\": \"bbb\", \"value2\": \"B\", \"value3\": \"bbb\",\n\"value6\": \"B\", \"value4\": \"ccc\", \"value5\": \"C\", \"value7\": \"aaa\", \"value8\": \"A\",\n\"value9\": \"bbb\",\"value10\": \"B\", \"value11\": \"ccc\", \"value12\": \"C\"},\n{ \"value1\": \"ccc\", \"value2\": \"C\", \"value3\": \"bbb\",\n\"value6\": \"B\", \"value4\": \"ccc\", \"value5\": \"C\", \"value7\": \"aaa\", \"value8\": \"A\",\n\"value9\": \"bbb\",\"value10\": \"B\", \"value11\": \"ccc\", \"value12\": \"C\"},\n{ \"value1\": \"ddd\", \"value2\": \"D\", \"value3\": \"bbb\",\n\"value6\": \"B\", \"value4\": \"ccc\", \"value5\": \"C\", \"value7\": \"aaa\", \"value8\": \"A\",\n\"value9\": \"bbb\",\"value10\": \"B\", \"value11\": \"ccc\", \"value12\": \"C\"},\n{ \"value1\": \"eee\", \"value2\": \"E\", \"value3\": \"bbb\",\n\"value6\": \"B\", \"value4\": \"ccc\", \"value5\": \"C\", \"value7\": \"aaa\", \"value8\": \"A\",\n\"value9\": \"bbb\",\"value10\": \"B\", \"value11\": \"ccc\", \"value12\": \"C\"},\n{ \"value1\": \"fff\", \"value2\": \"F\", \"value3\": \"bbb\",\n\"value6\": \"B\", \"value4\": \"ccc\", \"value5\": \"C\", \"value7\": \"aaa\", \"value8\": \"A\",\n\"value9\": \"bbb\",\"value10\": \"B\", \"value11\": \"ccc\", \"value12\": \"C\"}];\nmsg.payload = myArray;\nreturn msg;","outputs":1,"noerr":0,"x":456.18408203125,"y":112.00007629394531,"wires":[["44ec155b.1f113c"]]},{"id":"44ec155b.1f113c","type":"ui_template","z":"f215cc82.b4d88","group":"524b6528.fbf1ec","name":"Data-table","order":1,"width":"24","height":"6","format":"<style>\n th {\n text-decoration: underline;\n }\n .numeric {\n text-align: right;\n padding-right: 15px;\n }\n</style>\n\n\n<table cellpadding=\"1\" border=\"1\" id=\"table1\" class=\"table-hover\" style=\"width: 100%;\">\n <thead>\n <tr>\n <th>value1</th> \n <th>value2</th>\n <th>value3</th>\n <th>value4</th>\n <th>value5</th>\n <th>value7</th>\n <th>value8</th>\n <th>value9</th>\n <th>value10</th>\n <th>value11</th>\n <th>value12</th>\n <th>value13</th>\n <th>value14</th>\n <th>value15</th>\n <th>value16</th>\n <th>save</th>\n </tr>\n </thead>\n <tbody>\n <tr ng-repeat=\"row in msg.payload\" ondblclick=\"myFunction(this)\">\n \n <td class=\"numeric\" bgcolor=gray>{{row.value1}}</td>\n <td id=\"value2\" contenteditable=\"true\" onclick = \"this.contentEditable = true;\">{{row.value2}}</td>\n <td id=\"value3\" contenteditable=\"true\" onclick = \"this.contentEditable = true;\">{{row.value3}}</td>\n <td id=\"value4\" contenteditable=\"true\" onclick = \"this.contentEditable = true;\">{{row.value4}}</td>\n <td id=\"value5\" contenteditable=\"true\" onclick = \"this.contentEditable = true;\">{{row.value5}}</td>\n <td bgcolor=gray>{{row.value7}}</td>\n <td id=\"value8\" contenteditable=\"true\" onclick = \"this.contentEditable = true;\">{{row.value8}}</td>\n <td bgcolor=gray>{{row.value9}}</td>\n <td bgcolor=gray>{{row.value10}}</td>\n <td id=\"value11\" contenteditable=\"true\" onclick = \"this.contentEditable = true;\">{{row.value11}}</td>\n <td bgcolor=gray>{{row.value12}}</td>\n <td bgcolor=gray>{{row.value13}}</td>\n <td id=\"value14\" contenteditable=\"true\" onclick = \"this.contentEditable = true;\">{{row.value14}}</td>\n <td id=\"value15\" contenteditable=\"true\" onclick = \"this.contentEditable = true;\">{{row.value15}}</td>\n <td>\n<md-switch aria-label=\"knapp\" ng-model=\"valgt\" ng-change=\"send({payload : {row:$index, enabled:valgt}})\" ng-checked=\"row.value16==='true'\" >\n </md-switch>\n</td> \n<td>\n <md-button tr ng-click=\"sendRow($index+1)\">save</md-button>\n </tr>\n </tbody>\n</table>\n\n\n\n<script>\n(function($scope) {\n$scope.sendRow = function(obj) {\n$scope.send({ \"payload\": (document.getElementById(\"table1\").rows[obj].innerText) });\n};\n})(scope);\n</script>\n\n<script>\nfunction myFunction(x) {\n alert(document.getElementById(\"table1\").rows[x.rowIndex].innerText);\n}\n</script>\n","storeOutMessages":false,"fwdInMessages":false,"templateScope":"local","x":657.0172271728516,"y":116.0000991821289,"wires":[["21aa3aac.1fe4a6"]]},{"id":"524b6528.fbf1ec","type":"ui_group","z":"","name":"Group 1","tab":"dea6695d.1700f8","order":1,"disp":true,"width":"24","collapse":false},{"id":"dea6695d.1700f8","type":"ui_tab","name":"Tab 6","icon":"dashboard","order":5}]

best regards
Karl

0 Likes

#11

very helpful

whats the purpose of the switch?

0 Likes

#12

can not recall. long time ago

0 Likes