masyarakat Belajar Perpustakaan Alatan Masa lapang
cari
Melayu
Cara untuk memberikan data melalui DOM dan bukannya melalui jadual
P粉207483087
P粉207483087 2024-04-04 18:17:27
0
1
3784

Saya ada soalan tentang aplikasi yang saya buat, saya menggunakan pangkalan data Oracle, dan saya mendapat maklumat daripada pangkalan data dan membentangkannya pada skrin melalui jadual, tetapi saya ingin mencuba memproses data secara individu, seperti mencipta perenggan dan Memaparkan nilai.

Saya hanya boleh membentangkan data melalui jadual, adakah cara lain? Jika ada yang boleh membantu saya, terima kasih banyak-banyak.

Saya menerima semua petua untuk menambah baik kod.

Halaman Index.html saya

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Apontamentos da Produção</title>
  <link rel="stylesheet" type="text/css" href="styles.css" media="screen" />

</head>

<body>
  <meta http-equiv="refresh" content="5">

  <div id="data"></div>

  <div class="grid-container">
    <div class="container">
      <div class="texto"> PAINEL-1 | APONTAMENTOS DA PRODUÇÃO</div>
      <div class="clock"></div>
    </div>
  </div>
  <div class="progress">
    <div class="progress-bar"></div>
  </div>

  <br>

  <!-- Tabela principal, apresentando os apontamentos -->
  <table id="table" class="tablePrincipal">
    <tr class="trPrincipal">
      <th class="th2" style="width: 11%;">Data</th>
      <th class="th2" style="width: 8%; ">Hora</th>
      <th class="th2" style="width: 5%;">Orig.</th>
      <th class="th2" style="width: 8%;">O.P.</th>
      <th class="th2" style="width: 10%;">Produto</th>
      <th class="th2" style="width: 8%;">Deriv.</th>
      <th class="th2" style="width: 9%;">Peso (TN)</th>
      <th class="th2" style="width: 7%;">Refugo (TN)</th>
      <th class="th2" style="width: 13%;">Lote</th>
      <th class="th2" style="width: 60%;;">Operador</th>
    </tr>
  </table>

  <br>

</body>

<script>

// Tabela de apontamentos. Listagem.

  // Aqui é onde é feito o push de informações, chamando pelo caminho e colocando o ID da tabela que ele vai levar as informações

  window.onload = function () {
    fetch('http://localhost:3000/teste')
      .then(response => response.json())
      .then(data => {
        console.log(data);
        var table = document.getElementById('table');

        // Primeiro define a variavel, e coloca o comando para inserir uma linha, é tudo organizado por rows
        for (var i = 0; i < 7; i++) {
          var row = table.insertRow(i + 1);
          var cell1 = row.insertCell(0);
          var cell2 = row.insertCell(1);
          var cell3 = row.insertCell(2);
          var cell4 = row.insertCell(3);
          var cell5 = row.insertCell(4);
          var cell6 = row.insertCell(5);
          var cell7 = row.insertCell(6);
          var cell8 = row.insertCell(7);
          var cell9 = row.insertCell(8);
          var cell10 = row.insertCell(9);

          // Queria trabalhar com os dados separadamente, tentar criar um <p> e colocar um dado para apresentar.

        // Queria tentar fazer um calculo com essa variável, mas não funciona assim
          var cell11 = cell7 * 2;

          // Aqui chama a variavel e coloca a linha na tabela
          cell1.innerHTML = data[i][0];
          cell2.innerHTML = data[i][1];
          cell3.innerHTML = data[i][2];
          cell4.innerHTML = data[i][3];
          cell5.innerHTML = data[i][4];
          cell6.innerHTML = data[i][5];
          cell7.innerHTML = data[i][6];
          cell8.innerHTML = data[i][7];
          cell9.innerHTML = data[i][8];
          cell10.innerHTML = data[i][9];
        
        
        }}
      )}
      
</script>

</html>

Ini adalah Index.js saya tempat saya membuat pilihan dan menghantar data

const express = require('express');
const oracledb = require('oracledb');
const app = express();
var cors = require('cors')
app.use(cors())
const http = require('http');
app.engine('html', require('ejs').renderFile);
app.set('view engine', 'html');



// Connection details for the Oracle database
const connectionString = '';
const user = '';
const password = '';

// Connect to the database
app.get('/teste', (req, res) => {

  // within the endpoint, query the database
  oracledb.getConnection(
    {
      connectionString: connectionString,
      user: user,
      password: password
    },
    function teste(err, connection) {
      if (err) {
        console.error(err.message);
        return;
      }
      console.log('Conexão deu certo!');

      const query = 'SELECT DATREA,HORREA,CODORI,NUMORP,CODPRO,CODDER,QTDRE1,QTDRFG,CODLOT,OPERADOR from USU_VPROEXT ORDER BY DATREA DESC, HORREA DESC';
      connection.execute(query, [], (err, result) => {
        if (err) {
          console.error(err.message);
          return;
        }
        console.log('Banco de Dados Atualizado');
        console.log();

        // return the results to the user
        res.json(result.rows);
      });
    });
});

app.listen(3000, () => {
  console.log('Server is listening on port 3000');
});

P粉207483087
P粉207483087

membalas semua(1)
P粉706038741
P粉7060387412024-04-05 14:02:39 Tingkat 1

Andaian:

Memandangkan saya tidak dapat menghasilkan semula senario dengan tepat, saya akan menumpukan pada bahagian pelanggan dan hanya mengambil mudah bahawa titik akhir hujung belakang anda akan mengembalikan tatasusunan dengan betul, contohnya: data[iRow][iColumn]

Andaian sebegitu datang dari baris seperti ini cell1.innerHTML = data[i][0];

Contoh data yang ditakrifkan statik:

Saya tidak pasti sama ada data itu hanyalah tatasusunan atau jika terdapat beberapa cara untuk menangani nilai lajur mengikut nama lajur. Bagaimanapun, kami akan kekal dengan paradigma tatasusunan biasa di sini kerana ia nampaknya berfungsi mengikut kata-kata anda sendiri.

Di sini kami mentakrifkan tatasusunan data dengan 2 baris dan 10 lajur setiap satu: 

//the array you are supposed to receive from your ajax call
const data = [
  //first row of cells
  [
    'rowX_cell(01)',
    'rowX_cell(02)',
    'rowX_cell(03)',
    'rowX_cell(04)',
    'rowX_cell(05)',
    'rowX_cell(06)',
    'rowX_cell(07)',
    'rowX_cell(08)',
    'rowX_cell(09)',
    'rowX_cell(10)',
  ],
  //second row of cells
  [
    'rowY_cell(01)',
    'rowY_cell(02)',
    'rowY_cell(03)',
    'rowY_cell(04)',
    'rowY_cell(05)',
    'rowY_cell(06)',
    'rowY_cell(07)',
    'rowY_cell(08)',
    'rowY_cell(09)',
    'rowY_cell(10)',
  ],
]

Tentukan nama lajur dan susunan:

Saya juga boleh mengatakan susunan lajur yang diambil daripada pangkalan data sejak menunjukkan pertanyaan SQL, ini ialah senarai tertib:

DATREA、HORREA、CODORI、NUMORP、CODPRO、CODDER、QTDRE1、QTDRFG、CODLOT、OPERADOR

Kami mentakrifkannya sebagai tatasusunan rentetan dalam js seperti berikut: 

//ordered list of columns in the same order as the cols in data are supposed to be
const columnNames = ['DATREA','HORREA','CODORI','NUMORP','CODPRO','CODDER','QTDRE1','QTDRFG','CODLOT','OPERADOR'];

Tukar tatasusunan baris kepada objek:

Tukar baris data kepada tatasusunan objek yang mempunyai sifat baris dan lajur yang dinamakan selepas senarai lajur yang ditunjukkan sebelum ini: 

function getRowObject(row){
  const rowObject = {};
  //for each col in columnNames
  columnNames.forEach((col, i)=>{
    //set the prop of rowObject named as col = the value at the i position in row
    rowObject[col] = row[i]; 
  });  
  return rowObject;
}

Untuk baris pertama data (data[0]) objek berikut akan dikembalikan: 

{
  "DATREA": "rowX_cell(01)",
  "HORREA": "rowX_cell(02)",
  "CODORI": "rowX_cell(03)",
  "NUMORP": "rowX_cell(04)",
  "CODPRO": "rowX_cell(05)",
  "CODDER": "rowX_cell(06)",
  "QTDRE1": "rowX_cell(07)",
  "QTDRFG": "rowX_cell(08)",
  "CODLOT": "rowX_cell(09)",
  "OPERADOR": "rowX_cell(10)"
}

Bagaimana untuk memaparkan data ini dalam dokumen?

Bergantung pada matlamat khusus anda, anda mempunyai cara tanpa had untuk melakukannya. Anda sebenarnya tidak perlu menukar tatasusunan kepada objek di tempat pertama, tetapi ia menjadikannya lebih mudah untuk mengakses lajurnya mengikut nama daripada menggunakan nombor indeks.

Bagaimanapun, jika sebagai contoh anda perlu memaparkan setiap baris sebagai kandungan satu perenggan, dengan gabungan semua data lajurnya sebagai kandungan: 

function appendRowsAsParagraphsInTarget(target, rowObjects){
  //you can loop through all the rows and print them on screen
  rowObjects.forEach( row => {
    //here we are converting the row object back to a list of values
    values = columnNames.map( columnName => row[columnName] );
    //here to a single string where values are separated by ', ' and wrapped in []
    values = values.map( value => `[${value}]`);
    values = values.join(', ');  
  
    //append the newly created p in target
    const p = document.createElement('p');
    p.textContent = values;
    target.append(p);
  });
}

Demo:

Berikut adalah demonstrasi langsung tentang apa yang telah diperkatakan setakat ini: 

//the array you are supposed to receive from your ajax call
const data = [
  //first row of cells
  [
    'rowX_cell(01)',
    'rowX_cell(02)',
    'rowX_cell(03)',
    'rowX_cell(04)',
    'rowX_cell(05)',
    'rowX_cell(06)',
    'rowX_cell(07)',
    'rowX_cell(08)',
    'rowX_cell(09)',
    'rowX_cell(10)',
  ],
  //second row of cells
  [
    'rowY_cell(01)',
    'rowY_cell(02)',
    'rowY_cell(03)',
    'rowY_cell(04)',
    'rowY_cell(05)',
    'rowY_cell(06)',
    'rowY_cell(07)',
    'rowY_cell(08)',
    'rowY_cell(09)',
    'rowY_cell(10)',
  ],
]

//ordered list of columns in the same order as the cols in data are supposed to be
const columnNames = ['DATREA','HORREA','CODORI','NUMORP','CODPRO','CODDER','QTDRE1','QTDRFG','CODLOT','OPERADOR'];

//transforming the original array of rows as array of objects where each one as col data as properties
const rowObjects = data.map( row => getRowObject(row) );

console.log(rowObjects);

//appending the rowObjects as p paragraph to #output_rows
const target = document.getElementById('output_rows');
appendRowsAsParagraphsInTarget(target, rowObjects);

function appendRowsAsParagraphsInTarget(target, rowObjects){
  //you can loop through all the rows and print them on screen
  rowObjects.forEach( row => {
    //here we are converting the row object back to a list of values
    values = columnNames.map( columnName => row[columnName] );
    //here to a single string where values are separated by ', ' and wrapped in []
    values = values.map( value => `[${value}]`);
    values = values.join(', ');  
  
    //append the newly created p in target
    const p = document.createElement('p');
    p.textContent = values;
    target.append(p);
  });
}

function getRowObject(row){
  const rowObject = {};
  //for each col in columnNames
  columnNames.forEach((col, i)=>{
    //set the prop of rowObject named as col = the value at the i position in row
    rowObject[col] = row[i]; 
  });  
  return rowObject;
}
.label{
  font-weight: bold;
}

#output_rows{
}

#output_rows > p{
  border: solid 1px lightgray;
  margin-bottom: 1em;
}
Showing all the table rows as p elements
Suka +0
Tambah Balasan
Topik popular
Lagi>
Artikel popular
Tutorial Popular
Lagi>
Tutorial berkaitan
Cadangan popular
Kursus terkini
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan