Use of HTML Table in Template

Dashboard
1

Hi there, i have been developing varius tables for storing data and system setting via the template node and eventually to be stored in some sort of sql. untill now i had to rely on adding a save button on the end of each row, and it has been ok so far. my next project will require to step it up a bit, so that i can save active row by clicking enter. so far i have been able to save first row only. please have a look at my code and give me suggestions how to progress, feel free to use my current code for whatever you might be able to

[{"id":"d273f858.444768","type":"ui_template","z":"1c7978bb.3c8757","group":"774c7a89.4f6d54","name":"sample","order":3,"width":"32","height":"10","format":"<style>\ntable.table-hover tr:hover {\n background:lightblue;\n } \n md-switch {\nposition: center; \nheight: 5px;\n}\nmd-switch .md-thumb {\n background-color: red;\n}\nmd-switch.md-checked .md-thumb {\n background-color: #33CC00;\n}\n\nmd-switch.md-checked .md-bar {\n background-color: lightgreen;\n}\n</style>\n<div class=\"scrollmenu\">\n<table cellpadding=\"1\" border=\"1\" id=\"table-2\" class=\"table-hover\" style=\"width: 100%; border-collapse: collapse; border: 1px solid black\">\n <thead>\n <tr>\n <th title=\"\" bgcolor=gray>Modified date</th>\n <th title=\"\" bgcolor=gray>Modified Type</th>\n <th title=\"\" bgcolor=gray>Modified by</th>\n <th title=\"\" bgcolor=gray>Installation</th>\n \n <th title=\"\" bgcolor=gray>Lagre</th>\n \n \n \n \n </tr>\n </thead>\n <tbody>\n <tr ng-repeat=\"row in msg.payload | limitTo:500\">\n <td><center>{{row.shortdate}}</center></td>\n <td contenteditable=\"true\" onclick=\"document.execCommand('selectAll')\"><center>{{row.modtype}}</center></td>\n <td contenteditable=\"true\" onclick=\"document.execCommand('selectAll')\"><center>{{row.modby}}</center></td>\n <td contenteditable=\"true\" onclick=\"document.execCommand('selectAll')\"><center>{{row.rigname}}</center></td>\n \n \n <td>\n <md-button id=\"lagre\" tr ng-click=\"sendRow($index+1)\">Lagre</md-button>\n </tr>\n \n </tbody>\n</table>\n<script type=\"text/javascript\">\n window.onload = function() {\n document.getElementById(\"editable\").focus();\n };\n\n</script>\n<script>\n $('#table-2').keypress(function(e){\n if(e.which == 13 && !e.shiftKey){//Enter key pressed\n e.preventDefault();\n $(\"#lagre\").click();\n alert('Endringer lagret: Vent litt for nye beregninger, trykk ok');\n //alert(document.getElementById(\"table1\").rows[obj].innerText);\n }\n });\n</script>\n\n\n<script>\n(function($scope) {\n$scope.sendRow = function(obj) {\nvar tableCells = document.getElementById(\"table-2\").rows.item(obj).cells;\nvar cellsData = [];\nfor (var j = 0; j < tableCells.length; j++) {\n cellsData[j] = tableCells.item(j).innerText;\n cellsData[j] = cellsData[j].replace(\",\",\".\"); \n}\n$scope.send({ \"payload\": cellsData });\n};\n})(scope);\n</script>\n\n</div>","storeOutMessages":false,"fwdInMessages":false,"templateScope":"local","x":928,"y":219,"wires":[[]]},{"id":"774c7a89.4f6d54","type":"ui_group","z":"","name":"Grafer og tabeller","tab":"","order":1,"disp":true,"width":"32","collapse":false}]

2

Can you please post the template separately so that we don't have to import your flow to look at it.

3

@TotallyInformation actually that is just the template.

4

here is a more complete representation.
image

[{"id":"d273f858.444768","type":"ui_template","z":"1c7978bb.3c8757","group":"ab6f9b75.0d4718","name":"sample","order":3,"width":"32","height":"10","format":"<style>\ntable.table-hover tr:hover {\n background:lightblue;\n } \n md-switch {\nposition: center; \nheight: 5px;\n}\nmd-switch .md-thumb {\n background-color: red;\n}\nmd-switch.md-checked .md-thumb {\n background-color: #33CC00;\n}\n\nmd-switch.md-checked .md-bar {\n background-color: lightgreen;\n}\n</style>\n<div class=\"scrollmenu\">\n<table cellpadding=\"1\" border=\"1\" id=\"table-4\" class=\"table-hover\" style=\"width: 100%; border-collapse: collapse; border: 1px solid black\">\n <thead>\n <tr>\n <th title=\"\" bgcolor=gray>Modified where</th>\n <th title=\"\" bgcolor=gray>Modified Type</th>\n <th title=\"\" bgcolor=gray>Modified by</th>\n <th title=\"\" bgcolor=gray>Installation</th>\n \n <th title=\"\" bgcolor=gray>Lagre</th>\n \n \n \n \n </tr>\n </thead>\n <tbody>\n <tr ng-repeat=\"row in msg.payload | limitTo:500\">\n <td><center>{{row.where}}</center></td>\n <td contenteditable=\"true\" onclick=\"document.execCommand('selectAll')\"><center>{{row.modtype}}</center></td>\n <td contenteditable=\"true\" onclick=\"document.execCommand('selectAll')\"><center>{{row.modby}}</center></td>\n <td contenteditable=\"true\" onclick=\"document.execCommand('selectAll')\"><center>{{row.rigname}}</center></td>\n \n \n <td>\n <center><md-button id=\"lagre4\" tr ng-click=\"sendRow($index+1)\">Lagre</md-button></center>\n </tr>\n \n </tbody>\n</table>\n<script type=\"text/javascript\">\n window.onload = function() {\n document.getElementById(\"editable\").focus();\n };\n\n</script>\n<script>\n $('#table-4').keypress(function(e){\n if(e.which == 13 && !e.shiftKey){//Enter key pressed\n e.preventDefault();\n $(\"#lagre4\").click();\n //alert('Endringer lagret: Vent litt for nye beregninger, trykk ok');\n //alert(document.getElementById(\"table1\").rows[obj].innerText);\n }\n });\n</script>\n\n\n<script>\n(function($scope) {\n$scope.sendRow = function(obj) {\nvar tableCells = document.getElementById(\"table-4\").rows.item(obj).cells;\nvar cellsData = [];\nfor (var j = 0; j < tableCells.length; j++) {\n cellsData[j] = tableCells.item(j).innerText;\n cellsData[j] = cellsData[j].replace(\",\",\".\"); \n}\n$scope.send({ \"payload\": cellsData });\n};\n})(scope);\n</script>\n\n</div>","storeOutMessages":false,"fwdInMessages":false,"templateScope":"local","x":928,"y":219,"wires":[["2361995a.679326"]]},{"id":"ee129eb.91f506","type":"inject","z":"1c7978bb.3c8757","name":"load_array","topic":"","payload":"","payloadType":"num","repeat":"","crontab":"","once":false,"onceDelay":0.1,"x":915,"y":137,"wires":[["8282a77b.1444a8"]]},{"id":"8282a77b.1444a8","type":"function","z":"1c7978bb.3c8757","name":"array","func":"var myArray =[{ \"where\": \"field1\", \"modtype\": \"software\", \"modby\": \"peter\", \"rigname\": \"drilling23\"},\n { \"where\": \"field2\", \"modtype\": \"software/hardware\", \"modby\": \"julius\", \"rigname\": \"drilling34\"},\n { \"where\": \"field3\", \"modtype\": \"hardware\", \"modby\": \"karl\", \"rigname\": \"drilling44\"},\n { \"where\": \"field4\", \"modtype\": \"none\", \"modby\": \"muhammed\", \"rigname\": \"drilling54\"},\n { \"where\": \"field5\", \"modtype\": \"welding\", \"modby\": \"alan\", \"rigname\": \"drilling64\"}];\nmsg.payload = myArray;\n\nreturn msg;","outputs":1,"noerr":0,"x":914,"y":181,"wires":[["d273f858.444768"]]},{"id":"2361995a.679326","type":"debug","z":"1c7978bb.3c8757","name":"","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"false","x":932,"y":264,"wires":[]},{"id":"ab6f9b75.0d4718","type":"ui_group","z":"","name":"Inventory PLCPC Overview","tab":"4067421f.1778ec","order":1,"disp":true,"width":"35","collapse":false},{"id":"4067421f.1778ec","type":"ui_tab","z":"","name":"Rig Oversikt","icon":"dashboard","order":5}]

5

here is the hmi bit

image
image1739Ă—196 8.73 KB

and what it looks like when i click Lagre
image
and also what im in need of by hitting enter when in a row
image
image1772Ă—219 9.09 KB

except, so far i have only been able to make it catch row 1 when hitting enter
my js power is not good enough :slight_smile:

6

Well, it might be but it is pretty much unreadable in current form - time is precious enough that I'll not be loading into Node-RED just to read it I'm afraid.

1 Like
7

think i misunderstood you earlier, you want to see my current JS?

belov is from the LAGRE/SAVE button and all the JS in my template file

            <center><md-button id="lagre4" tr ng-click="sendRow($index+1)">Lagre</md-button></center>
            </tr>
    
    </tbody>
</table>
<script type="text/javascript">
    window.onload = function() {
        document.getElementById("editable").focus();
    };

</script>
<script>
    $('#table-4').keypress(function(e){
        if(e.which == 13 && !e.shiftKey){//Enter key pressed
        e.preventDefault();
        $("#lagre4").click();
        //alert('Endringer lagret: Vent litt for nye beregninger, trykk ok');
        //alert(document.getElementById("table1").rows[obj].innerText);
      }
    });
</script>


<script>
(function($scope) {
$scope.sendRow = function(obj) {
var tableCells = document.getElementById("table-4").rows.item(obj).cells;
var cellsData = [];
for (var j = 0; j < tableCells.length; j++) {
                cellsData[j] =  tableCells.item(j).innerText;
                cellsData[j] = cellsData[j].replace(",",".");            
}
$scope.send({ "payload": cellsData });
};
})(scope);
</script>```
8

the entire code in template file below

<style>
table.table-hover  tr:hover  {
          background:lightblue;
          } 
    md-switch {
position: center;        
height: 5px;
}
md-switch .md-thumb {
  background-color: red;
}
md-switch.md-checked .md-thumb {
  background-color: #33CC00;
}

md-switch.md-checked .md-bar {
  background-color: lightgreen;
}
</style>
<div class="scrollmenu">
<table cellpadding="1" border="1" id="table-4" class="table-hover" style="width: 100%; border-collapse: collapse; border: 1px solid black">
    <thead>
        <tr>
    <th title="" bgcolor=gray>Modified where</th>
    <th title="" bgcolor=gray>Modified Type</th>
    <th title="" bgcolor=gray>Modified by</th>
    <th title="" bgcolor=gray>Installation</th>
    
    <th title="" bgcolor=gray>Lagre</th>
    
    
    
    
        </tr>
    </thead>
    <tbody>
       <tr ng-repeat="row in msg.payload  | limitTo:500">
           <td><center>{{row.where}}</center></td>
            <td contenteditable="true" onclick="document.execCommand('selectAll')"><center>{{row.modtype}}</center></td>
            <td contenteditable="true" onclick="document.execCommand('selectAll')"><center>{{row.modby}}</center></td>
            <td contenteditable="true" onclick="document.execCommand('selectAll')"><center>{{row.rigname}}</center></td>
            
            
            <td>
            <center><md-button id="lagre4" tr ng-click="sendRow($index+1)">Lagre</md-button></center>
            </tr>
    
    </tbody>
</table>
<script type="text/javascript">
    window.onload = function() {
        document.getElementById("editable").focus();
    };

</script>
<script>
    $('#table-4').keypress(function(e){
        if(e.which == 13 && !e.shiftKey){//Enter key pressed
        e.preventDefault();
        $("#lagre4").click();
        //alert('Endringer lagret: Vent litt for nye beregninger, trykk ok');
        //alert(document.getElementById("table1").rows[obj].innerText);
      }
    });
</script>


<script>
(function($scope) {
$scope.sendRow = function(obj) {
var tableCells = document.getElementById("table-4").rows.item(obj).cells;
var cellsData = [];
for (var j = 0; j < tableCells.length; j++) {
                cellsData[j] =  tableCells.item(j).innerText;
                cellsData[j] = cellsData[j].replace(",",".");            
}
$scope.send({ "payload": cellsData });
};
})(scope);
</script>

</div>```
9

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.