Sending html table data from ui template to sql or to msg .payload

General
1

Greetings to all users of NODE RED
After establishing a connection to the sql database, I create a dynamic HTML table using the syntax

tr ng-repeat = "x in msg.payload | limitTo: 200">
    <td class = "allbdrCenTop" align = "justify"> {{$ index + 1}} </td>
    <td class = "allbdrLtTop" align = "justify"> {{msg.payload [$ index] .dd}} </td>
    <td class = "allbdrLtTop" align = "justify"> {{msg.payload [$ index] .period / 60 | number: 0}} minutes </td>

screen
screen1740×786 31.9 KB

Now I save everything to an excel file using javascript; I save the values in the dynamically constructed fields to a hidden table that I export to excel

Безымянный2
Безымянный2810×475 24.8 KB

Additionally, I display the input and select field to add comments to this table. After making comments, I need to save this entire table with the added data (comment) in SQL.
I can’t figure out how to do this. Using javascript or first transfer the entire data array from the html table to payload .msg and then use the sql node to insert into the database

this ui template code

<!DOCTYPE html>
<html>
<head>
 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<script type="text/javascript">
function fillHidTable(){
    var htqf; //-- hidden field
    var rf; //-- retrieved field
    var operator;
    let b = document.getElementById("test").value;
            for(let i = 1; i < b; i++)
        {
             rf = "htqf"+i;
             oper ="operb"+i;
             
             document.getElementById(rf).innerHTML = document.getElementById("Q"+i+"CALC").value;
            
             }
                         document.getElementById("operator1").innerHTML = "Оператор:" +" "+ document.getElementById("operator").value;
                         
                                
    tableToExcel('hidTable', 'ПРОСТОИ');
}


var tableToExcel = (function() {
          var uri = 'data:application/vnd.ms-excel;base64,'
            , template = '<html xmlns:o="urn:schemas-microsoft-com:office:office" xmlns:x="urn:schemas-microsoft-com:office:excel" xmlns="http://www.w3.org/TR/REC-html40"><meta http-equiv="content-type" content="application/vnd.ms-excel; charset=UTF-8"><head><!--[if gte mso 9]><xml><x:ExcelWorkbook><x:ExcelWorksheets><x:ExcelWorksheet><x:Name>{worksheet}</x:Name><x:WorksheetOptions><x:DisplayGridlines/></x:WorksheetOptions></x:ExcelWorksheet></x:ExcelWorksheets></x:ExcelWorkbook></xml><![endif]--></head><body><table>{table}</table></body></html>'
            , base64 = function(s) { return window.btoa(unescape(encodeURIComponent(s))) }
            , format = function(s, c) { return s.replace(/{(\w+)}/g, function(m, p) { return c[p]; }) }
          return function(table, name) {
            if (!table.nodeType) table = document.getElementById(table)
            var ctx = {worksheet: name || 'Worksheet', table: table.innerHTML}
            window.location.href = uri + base64(format(template, ctx))
          }
        })()

var todayDate = new Date();
var currYear = todayDate.getFullYear();
var currMonth = todayDate.getMonth()+1;
var currDay = todayDate.getDate();
var yearday = "Дата:" +" "+ currYear + "-" + currMonth + "-" + currDay
document.getElementById("yearday").innerHTML = yearday;


var select, value, text;

function change() {
    select = document.getElementById(oper); // Выбираем  select по id
    value = select.options[select.selectedIndex].value; // Значение value для выбранного option
    text = select.options[select.selectedIndex].text; // Текстовое значение для выбранного option
    alert("Value: " + value + "\nТекст: " + text); // Вывод алерта для проверки значений
}



var msg = {{msg.payload}}
</script>

<style type="text/css" media="screen">
    .divCenMid{font-family:Arial,sans-serif;font-size:14pt;font-style:normal;font-weight:700;text-align:center;vertical-align:middle;margin:0;}
    .allbdrCenMid{color:#000;font-family:Arial,sans-serif;font-size:10pt;font-style:normal;font-weight:400;text-align:center;vertical-align:middle;margin:0;}
    .allbdrCenTop{color:#000;font-family:Arial,sans-serif;font-size:10pt;font-style:normal;font-weight:400;text-align:center;vertical-align:top;margin:0;}
    .allbdrLtMid{color:#000;font-family:Arial,sans-serif;font-size:10pt;font-style:normal;font-weight:400;text-align:left;vertical-align:middle;margin:0;}
    .allbdrLtTop{color:#000;font-family:Arial,sans-serif;font-size:10pt;font-style:normal;font-weight:400;text-align:left;vertical-align:top;margin:0;}

</style>

</head>

<body>
    <div style="display:inline">
        <label for="operator">Оператор:</label>
                <select style="overflow:hidden; width:10% " id="operator" name="operator">
                    <option value="Парахин">Парахин</option>
                    <option value="Колесников">Колесников</option>
                    <option value="Метелев">Метелев</option>
                    <option value="Ляшенко">Ляшенко</option>
                </select>
                количество остановок: {{msg.payload.length}}
    </div>
        
    <input type="hidden" id="test" value="{{msg.payload.length+1}}"  style="overflow:hidden; width:10% " name="test" disabled/>  
<div class="container">
     
<table  cellspacing="2" cellpadding="2" style="border-spacing:0;" id="QMSTable" class="table">
     <tbody>
   <thead style="color: black;/*! font-style: oblique; */font-weight: bold !important;">
   <tr>
        <td> Записей</td>
        <td> Дата</td>
        <td> Длительность простоя</td>
        <td> Комментарий</td>
        <td>Механизм</td>
        
        
    </tr>
    </thead>
    <tr ng-repeat="x in msg.payload | limitTo:200">
    <td class="allbdrCenTop" align="justify">{{$index+1}}</td>
    <td class="allbdrLtTop" align="justify">{{msg.payload[$index].dd}}</td>
    <td class="allbdrLtTop" align="justify">{{msg.payload[$index].period/60|number:0}} минут</td>
    <td class="allbdrCenMid">
             <input id="Q{{$index+1}}CALC"  type="text" value="" style="overflow:hidden; width:93% " name="Q{{$index+1}}CALC">
             </td>
               <td>
        <select style="overflow:hidden; width:100% "  id="operb{{$index+1}}" name="operb{{$index+1}}" onchange="change()">
                    <option value="Питатель качающийся 102">Питатель качающийся 102</option>
                    <option value="Конвейер. 101. Подача угля">Конвейер. 101. Подача угля</option>
                    <option value="ЛС1. Питатель шлюзовый. 108 ">ЛС1. Питатель шлюзовый. 108 </option>
                    <option value="ЛС1. Питатель шлюзовый. 117 ">ЛС1. Питатель шлюзовый. 117 </option>
                    <option value="ЛС1. Питатель шлюзовый. 119 ">ЛС1. Питатель шлюзовый. 119 </option>
                    <option value="ЛС1. Барабан ">ЛС1. Барабан </option>
                    <option value="ЛС1. Дымосос. M354. Горение">ЛС1. Дымосос. M354. Горение</option>
                    <option value="ЛС1. Дымосос. M352. Рециркуляция">ЛС1. Дымосос. M352. Рециркуляция</option>
                    <option value="ЛС1. Дымосос. M350. Удаление газов">ЛС1. Дымосос. M350. Удаление газов</option>
                    <option value="ЛС2. Питатель шлюзовый 120">ЛС2. Питатель шлюзовый 120</option>
                    <option value="ЛС2. Питатель шлюзовый 118">ЛС2. Питатель шлюзовый 118</option>
                    <option value="ЛС2. Питатель шлюзовый. 109">ЛС2. Питатель шлюзовый. 109</option>
                    <option value="ЛС2. Барабан">ЛС2. Барабан</option>
                    <option value="ЛС2. Дымосос. M355. Горение ">ЛС2. Дымосос. M355. Горение</option>
                    <option value="ЛС2. Дымосос. M353. Рециркуляция ">ЛС2. Дымосос. M353. Рециркуляция</option>
                    <option value="ЛС2. Дымосос. M351. Удаление газов">ЛС2. Дымосос. M351. Удаление газов</option>
                    <option value="Разгрузка. Конвейер. 102">Разгрузка. Конвейер. 102</option>
                     <option value="Разгрузка. Конвейер. 103">Разгрузка. Конвейер. 103</option>
                      <option value="Разгрузка. Конвейер. 104">Разгрузка. Конвейер. 104</option>
                       <option value="Разгрузка. Конвейер. 105">Разгрузка. Конвейер. 105</option>
                        <option value="Разгрузка. Конвейер. 106">Разгрузка. Конвейер. 106</option>
                                </select>
    </td>
  </tbody>
  </table>
         
<div id="hidTable" style="display: none">
    <table id="testTable">
        <colgroup></colgroup>
        <colgroup></colgroup>
        <colgroup></colgroup>
        <thead>
        <tr>
            <th align="center">Записей</th>
            <th align="center">Дата</th>
            <th align="center">Длительность</th>
            <th align="center">Комментарий</th>
            <th align="center">Механизм</th>
        </tr>
        </thead>
        <tbody>
                <tr ng-repeat="x in msg.payload | limitTo:200">
    <td class="allbdrCenTop" align="center">{{$index+1}}</td>
    <td class="allbdrLtTop" align="center">{{msg.payload[$index].dd}}</td>
    <td class="allbdrLtTop" align="center">{{msg.payload[$index].period/60|number:0}} минут</td>
    <td id="htqf{{$index+1}}" align="center">-</td>
        <td>
        <select style="overflow:hidden; width:100% " id="operx{{$index+1}}" name="operx{{$index+1}}">
                    <option value="Питатель качающийся 102">Питатель качающийся 102</option>
                    <option value="Конвейер. 101. Подача угля">Конвейер. 101. Подача угля</option>
                    <option value="ЛС1. Питатель шлюзовый. 108 ">ЛС1. Питатель шлюзовый. 108 </option>
                    <option value="ЛС1. Питатель шлюзовый. 117 ">ЛС1. Питатель шлюзовый. 117 </option>
                    <option value="ЛС1. Питатель шлюзовый. 119 ">ЛС1. Питатель шлюзовый. 119 </option>
                    <option value="ЛС1. Барабан ">ЛС1. Барабан </option>
                    <option value="ЛС1. Дымосос. M354. Горение">ЛС1. Дымосос. M354. Горение</option>
                    <option value="ЛС1. Дымосос. M352. Рециркуляция">ЛС1. Дымосос. M352. Рециркуляция</option>
                    <option value="ЛС1. Дымосос. M350. Удаление газов">ЛС1. Дымосос. M350. Удаление газов</option>
                    <option value="ЛС2. Питатель шлюзовый 120">ЛС2. Питатель шлюзовый 120</option>
                    <option value="ЛС2. Питатель шлюзовый 118">ЛС2. Питатель шлюзовый 118</option>
                    <option value="ЛС2. Питатель шлюзовый. 109">ЛС2. Питатель шлюзовый. 109</option>
                    <option value="ЛС2. Барабан">ЛС2. Барабан</option>
                    <option value="ЛС2. Дымосос. M355. Горение ">ЛС2. Дымосос. M355. Горение</option>
                    <option value="ЛС2. Дымосос. M353. Рециркуляция ">ЛС2. Дымосос. M353. Рециркуляция</option>
                    <option value="ЛС2. Дымосос. M351. Удаление газов">ЛС2. Дымосос. M351. Удаление газов</option>
                    <option value="Разгрузка. Конвейер. 102">Разгрузка. Конвейер. 102</option>
                     <option value="Разгрузка. Конвейер. 103">Разгрузка. Конвейер. 103</option>
                      <option value="Разгрузка. Конвейер. 104">Разгрузка. Конвейер. 104</option>
                       <option value="Разгрузка. Конвейер. 105">Разгрузка. Конвейер. 105</option>
                       <option value="Разгрузка. Конвейер. 106">Разгрузка. Конвейер. 106</option>
                                </select>
    </tr>
    <tr>
    <td id="operator1" align="center">-</td>
    <td id="yearday" align="center">-</td>
        </tr>
    
            </tbody>
    </table>
</div>
 <input type="button" onclick="fillHidTable()" value="СОХРАНИТЬ" class="btn btn-success">
<input type="text" ng-model="msg.payload1" name="quantity">
  <md-button ng-click="send(msg)">Click to send to Node-Red</md-button>
  </div> 
</body>
</html>
2

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