# Read data from a table

**URL:** <https://discourse.nodered.org/t/read-data-from-a-table/49518>\
**Category:** General\
**Created:** [9 August 2021 09:55 UTC](https://discourse.nodered.org/t/read-data-from-a-table/49518 "2021-08-09T09:55:24Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![anguslou](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/anguslou/32/9212_2.png) [@anguslou](https://discourse.nodered.org/u/anguslou)\
**Post date:** [9 August 2021 09:55 UTC](https://discourse.nodered.org/t/read-data-from-a-table/49518/1 "2021-08-09T09:55:25Z")

</div>

I want to make a table on dashboard and allow user to input simple data such as dimension of boxes, eg,

```
           Length Width Height

```

Box 1 20 12 7  
Box 2 23 9 6

Ideally there is a button to add lines after finishing last one. And after submitting, Node-red is able to read like  
{  
"Box 1":{  
"Length" : 20,  
"Width" : 12,  
"Height" : 7},  
"Box 2":{  
"Length" : 23,  
"Width" : 9,  
"Height" : 6}  
}

Is it possible to do it in Node-Red? or any workaround for this?

---

<div class="post-metadata">

**Author:** ![UnborN](https://avatars.discourse-cdn.com/v4/letter/u/4491bb/32.png) [@UnborN](https://discourse.nodered.org/u/UnborN)\
**Post date:** [9 August 2021 20:56 UTC](https://discourse.nodered.org/t/read-data-from-a-table/49518/2 "2021-08-09T20:56:18Z")

</div>

Hello Anguslou,

Your question is very generic and broad and you havent shared some example flow of what you have tried in order to give a person the motivation to help you with your question.

A quick search on the internet for programmatically adding rows to a table with input fields brings us to this interesting [example](https://www.tutorialrepublic.com/codelab.php?topic=faq&file=jquery-append-and-remove-table-row-dynamically).

With a few jquery code modifications and adding an extra button to send the data to Node-red ...

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/c/4/c445b33f147fb46ef9cf9dc8d0037af5e4d30cf7.png)

**Example Flow :**

```auto
[{"id":"2909790fd013a2b3","type":"ui_template","z":"4895ea10b4ee9ead","group":"fe8bd71ec6128157","name":"","order":0,"width":"27","height":"24","format":"<!DOCTYPE html>\n<html lang=\"en\">\n\n<head>\n <meta charset=\"utf-8\">\n <title>My Boxes</title>\n <style>\n form {\n margin: 20px 0;\n }\n\n form input {\n padding: 5px;\n }\n\n button {\n padding: 5px;\n width: 200px;\n }\n\n table {\n width: 100%;\n margin-bottom: 20px;\n border-collapse: collapse;\n }\n\n table,\n th,\n td {\n border: 1px solid #cdcdcd;\n }\n\n table th,\n table td {\n padding: 10px;\n text-align: left;\n }\n </style>\n <!-- <script src=\"https://code.jquery.com/jquery-3.5.1.min.js\"></script> -->\n <script>\n\n let nr = scope;\n\n $(document).ready(function(){\n $(\".add-row\").click(function(){\n var id = $(\"#id\").val();\n var length = $(\"#length\").val();\n var width = $(\"#width\").val();\n var height = $(\"#height\").val();\n var markup = \"<tr><td><input type='checkbox' name='record'></td><td>\" + id + \"</td><td>\" + length + \"</td><td>\" + width + \"</td><td>\" + height + \"</td></tr>\";\n $(\"table tbody\").append(markup);\n });\n \n // Find and remove selected table rows\n $(\".delete-row\").click(function(){\n $(\"table tbody\").find('input[name=\"record\"]').each(function(){\n \tif($(this).is(\":checked\")){\n $(this).parents(\"tr\").remove();\n }\n });\n });\n\n // Send data of selected table rows to Node-red\n $(\".submit-btn\").click(function(){\n let data = []\n $(\"table tbody\").find('tr').each(function(tr){\n data.push( {\n id: Number(this.children[1].innerText),\n length: Number(this.children[2].innerText), \n width: Number(this.children[3].innerText), \n height: Number(this.children[4].innerText), })\n });\n console.log(data)\n nr.send({payload: data}) // send to NR\n });\n\n\n \n }); \n </script>\n</head>\n\n<body>\n <form>\n <input type=\"number\" id=\"id\" placeholder=\"Box id\">\n <input type=\"text\" id=\"length\" placeholder=\"Length\">\n <input type=\"text\" id=\"width\" placeholder=\"Width\">\n <input type=\"text\" id=\"height\" placeholder=\"Height\">\n <input type=\"button\" class=\"add-row\" value=\"Add Box\">\n </form>\n <table>\n <thead>\n <tr>\n <th>Select</th>\n <th>Box id</th>\n <th>Length</th>\n <th>Width</th>\n <th>Height</th>\n </tr>\n </thead>\n <tbody>\n <!-- \n Rows will be injected here with jquery\n -->\n </tbody>\n </table>\n <div>\n <button type=\"button\" class=\"delete-row\">Delete Selected Boxes</button>\n <button type=\"button\" class=\"submit-btn\">Submit to Node Red</button>\n </div>\n</body>\n\n</html>","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"local","x":460,"y":640,"wires":[["086622824c1db941"]]},{"id":"086622824c1db941","type":"debug","z":"4895ea10b4ee9ead","name":"","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"false","statusVal":"","statusType":"auto","x":690,"y":640,"wires":[]},{"id":"fe8bd71ec6128157","type":"ui_group","name":"Default","tab":"5276339eb38c4054","order":1,"disp":true,"width":"27","collapse":false},{"id":"5276339eb38c4054","type":"ui_tab","name":"Home","icon":"dashboard","disabled":false,"hidden":false}]

```

---

<div class="post-metadata">

**Author:** ![anguslou](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/anguslou/32/9212_2.png) [@anguslou](https://discourse.nodered.org/u/anguslou)\
**Post date:** [10 August 2021 01:35 UTC](https://discourse.nodered.org/t/read-data-from-a-table/49518/3 "2021-08-10T01:35:53Z")

</div>

This is excellent, thank you.

---

<div class="post-metadata">

**Author:** ![UnborN](https://avatars.discourse-cdn.com/v4/letter/u/4491bb/32.png) [@UnborN](https://discourse.nodered.org/u/UnborN)\
**Post date:** [10 August 2021 02:10 UTC](https://discourse.nodered.org/t/read-data-from-a-table/49518/4 "2021-08-10T02:10:58Z")

</div>

Hi .. i worked a little bit more on the table layout to make it a little bit more presentable ..  
here's a newer version

```auto
[{"id":"2909790fd013a2b3","type":"ui_template","z":"4895ea10b4ee9ead","group":"fe8bd71ec6128157","name":"","order":1,"width":30,"height":17,"format":"<!DOCTYPE html>\n<html lang=\"en\">\n\n<head>\n <meta charset=\"utf-8\" />\n <title>My Boxes</title>\n <style>\n input {\n padding: 5px;\n width: 80%;\n }\n\n .warning {\n border-bottom-color: red;\n border-bottom-width: 3px;\n }\n\n button {\n padding: 5px;\n width: 200px;\n }\n\n table {\n width: 100%;\n margin-bottom: 20px;\n border-collapse: collapse;\n }\n\n table,\n th,\n td {\n border: 1px solid #cdcdcd;\n }\n\n table th,\n table td {\n padding: 10px;\n text-align: center;\n }\n </style>\n <script>\n (function (scope) {\n $(\".add-row\").click(function () {\n var id = $(\"#id\").val();\n var length = $(\"#length\").val();\n var width = $(\"#width\").val();\n var height = $(\"#height\").val();\n var markup = `<tr>\n <td><input type='checkbox' name='record'></td>\n <td>${id}</td>\n <td>${length}</td>\n <td>${width}</td>\n <td>${height}</td>\n </tr>`;\n $(\"table tbody\").append(markup);\n $(\"input\").val(\"\"); // clear all inputs\n });\n\n // Find and remove selected table rows\n $(\".delete-row\").click(function () {\n $(\"table tbody\")\n .find('input[name=\"record\"]')\n .each(function () {\n if ($(this).is(\":checked\")) {\n $(this).parents(\"tr\").remove();\n }\n });\n });\n\n // Send data of selected table rows to Node-red\n $(\".submit-btn\").click(function () {\n let data = [];\n $(\"table tbody\")\n .find(\"tr\")\n .each(function (tr) {\n data.push({\n id: Number(this.children[1].innerText),\n length: Number(this.children[2].innerText),\n width: Number(this.children[3].innerText),\n height: Number(this.children[4].innerText),\n });\n });\n console.log(data);\n scope.send({ payload: data }); // send to NR\n });\n })(scope);\n </script>\n</head>\n\n<body>\n <button type=\"button\" class=\"add-row\" style=\"margin-bottom: 20px; margin-left: auto\">\n <i class=\"fa fa-plus-circle\"></i>\n Add Box\n </button>\n <!-- <input type=\"button\" class=\"add-row\" value=\"Add Box\"> -->\n <table>\n <thead>\n <tr>\n <th style=\"width: 50px\">Select</th>\n <th><input type=\"number\" id=\"id\" placeholder=\"Box id\" /></th>\n <th><input type=\"text\" id=\"length\" placeholder=\"Length\" /></th>\n <th><input type=\"text\" id=\"width\" placeholder=\"Width\" /></th>\n <th><input type=\"text\" id=\"height\" placeholder=\"Height\" /></th>\n </tr>\n </thead>\n <tbody>\n <!-- \n Rows will be injected here with jquery\n -->\n </tbody>\n </table>\n <div>\n <button type=\"button\" class=\"delete-row\">Delete Selected Boxes</button>\n <button type=\"button\" class=\"submit-btn\">Submit to Node Red</button>\n </div>\n</body>\n\n</html>","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"local","x":340,"y":480,"wires":[["086622824c1db941"]]},{"id":"086622824c1db941","type":"debug","z":"4895ea10b4ee9ead","name":"","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"false","statusVal":"","statusType":"auto","x":510,"y":480,"wires":[]},{"id":"fe8bd71ec6128157","type":"ui_group","name":"Boxes","tab":"5276339eb38c4054","order":1,"disp":true,"width":"30","collapse":false},{"id":"5276339eb38c4054","type":"ui_tab","name":"Home","icon":"dashboard","disabled":false,"hidden":false}]

```

[EDIT] fixed `scope`

---

<div class="post-metadata">

**Author:** ![anguslou](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/anguslou/32/9212_2.png) [@anguslou](https://discourse.nodered.org/u/anguslou)\
**Post date:** [10 August 2021 07:00 UTC](https://discourse.nodered.org/t/read-data-from-a-table/49518/5 "2021-08-10T07:00:32Z")

</div>

The codes work perfectly. However every time after deploying and I enter data, it doesn't update to the table by clicking "Add Box" until I restart Node-Red, any idea?

---

<div class="post-metadata">

**Author:** ![UnborN](https://avatars.discourse-cdn.com/v4/letter/u/4491bb/32.png) [@UnborN](https://discourse.nodered.org/u/UnborN)\
**Post date:** [10 August 2021 09:08 UTC](https://discourse.nodered.org/t/read-data-from-a-table/49518/6 "2021-08-10T09:08:41Z")

</div>

you are right .. i think it was related to the line `var nr = scope;` but on second deploy i noticed an error that the variable was already declared. anyway using the official way of using scope seems to fix the issue.  
I edited my above post not to have yet another version.

---

<div class="post-metadata">

**Author:** ![system](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/1X/d073cd938eafa2e558d7c2cd59003b3ef4963033.png) [@system](https://discourse.nodered.org/u/system)\
**Post date:** [24 August 2021 09:09 UTC](https://discourse.nodered.org/t/read-data-from-a-table/49518/7 "2021-08-24T09:09:06Z")

</div>

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