extract value from dynamic html table

Question

In my nodejs express project I have a Dynamic Table in my application where I can add or remove rows and users can enter value inside cells now I want to extract this value but don't know how after extracting this value from table i wanted to insert them into MySQL database

Note I don't want to use jquery if possible

HTML Table

function addRow() {
  var table = document.getElementById("cargoTable");
  var row = table.insertRow(-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);
  cell1.innerHTML = '<label onclick="deleteRow(this)" style="cursor:pointer">-</label>';
  cell2.innerHTML = '<input class="w3-input" type="text">';
  cell3.innerHTML = '<input class="w3-input" type="text">';
  cell4.innerHTML = '<input class="w3-input" type="text">';
  cell5.innerHTML = '<input class="w3-input" type="text">';
  cell6.innerHTML = '<input class="w3-input" type="text">';
  cell7.innerHTML = '<input class="w3-input" type="text">';
  cell8.innerHTML = '<input class="w3-input" type="text">';
  cell9.innerHTML = '<input class="w3-input" type="text">';

}

function deleteRow(r) {
  var i = r.parentNode.parentNode.parentNode.rowIndex;
  document.getElementById("cargoTable").deleteRow(i);
}

<table class="w3-table w3-hoverable w3-bordered w3-card">
  <thead>
    <td onclick="addRow()" style="cursor:pointer">+</td>
    <td>Comodity</td>
    <td>Marks</td>
    <td>Description</td>
    <td>Pkg.No</td>
    <td>Pkg.Kg</td>
    <td>Total Bags</td>
    <td>Total Weigh</td>
    <td>Remarks</td>
  </thead>

  <tbody id="cargoTable"></tbody>

</table>

Make an ajax call to your server, pass it the values. The server will get the values, then write them in the DB. — Jeremy Thille, Sep 18 '20 at 12:38
while adding and removing row to table you can create the javaScript object and update object with respective key with user enter value. when user will click on submit then you can pass that object to where you want to pass. — Pramod Kharade, Sep 18 '20 at 12:45
Fortunately, [Google does](https://www.google.com/search?q=how+to+make+ajax+call) :) — Jeremy Thille, Sep 18 '20 at 12:46
@PramodKharade Sir on submitting the form will send data to server now in my database I want add this data in table like this (Comodity,Marks,Description,Pkg.No,Pkg.Kg,Total Bags,Total Weigh,Remarks) values(data from first row),(data from second row),(data from third row) — rushirajsinh rana, Sep 18 '20 at 12:59

mplungjan · Answer 1 · 2020-09-18T13:05:12.587

I see no node.js here

You can simplify this

Here is how to fetch/post to mySql. Ignore that the JS is react. The fetch is the same

How to Post data to database using Fetch API in React.js

let table, names;
window.addEventListener("load", () => {
  document.getElementById("add").addEventListener("click", addRow)
  document.getElementById("save").addEventListener("click", save)
  table = document.getElementById("cargoTable");
  names = [...document.getElementById("thead").querySelectorAll("th")].map(th => th.innerText).slice(1)  
  table.addEventListener("click", e => {
    const tgt = e.target;
    if (tgt.classList.contains("del")) tgt.closest("tr").remove();
  })
});
const addRow = () => {
  table.innerHTML += `<td><label class="del" style="cursor:pointer">-</label></td>
  <td><input class="w3-input" type="text"></td>
  <td><input class="w3-input" type="text"></td>
  <td><input class="w3-input" type="text"></td>
  <td><input class="w3-input" type="text"></td>
  <td><input class="w3-input" type="text"></td>
  <td><input class="w3-input" type="text"></td>
  <td><input class="w3-input" type="text"></td>
  <td><input class="w3-input" type="text"></td>`;
};
const save = () => {
  const vals = [...table.querySelectorAll("tr")]
    .map(row => [...row.querySelectorAll("input")]
      .map((inp, i) => ({ [names[i]]: inp.value})));
  console.log(vals); // here you need to ajax to the server;
  
  /* for example
  
   fetch('your post url here', {
    method: 'POST',
    headers: {
      'Accept': 'application/json',
      'Content-Type': 'application/json'
    },
    body: JSON.stringify(vals)
  })
  .then(res => res.json())
  .then(data => console.log(data))
  .catch(err => console.log(err);
  */ 
};

<table class="w3-table w3-hoverable w3-bordered w3-card">
  <thead id="thead">
    <tr>
      <th id="add" style="cursor:pointer">+</th>
      <th>Comodity</th>
      <th>Marks</th>
      <th>Description</th>
      <th>Pkg.No</th>
      <th>Pkg.Kg</th>
      <th>Total Bags</th>
      <th>Total Weigh</th>
      <th>Remarks</th>
    </tr>
  </thead>
  <tbody id="cargoTable"></tbody>

</table>
<button type="button" id="save">Save</button>

Sir adding and removing row is working correctly but if user enter value inside input element which is inside td element how can I get that value in any javascript variable to send that data on server — rushirajsinh rana, Sep 18 '20 at 12:54
Also see how to send to server: https://stackoverflow.com/questions/54300992/how-to-post-data-to-database-using-fetch-api-in-react-js — mplungjan, Sep 18 '20 at 12:56

score 0 · Accepted Answer · answered Sep 25 '20 at 14:34

Dear All Thanks for your answers but as I want the result in a single array as per the requirement of my backend I have decided the below answer as correct for me I have allotted the same name to every cell and call them through javascript

    function addRow() {
    var table = document.getElementById("cargoTable");
    var row = table.insertRow(-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);
    cell1.innerHTML = '<label onclick="deleteRow(this)" style="cursor:pointer">-</label>';
    cell2.innerHTML = '<input name="cellCargo" class="w3-input" type="text">';
    cell3.innerHTML = '<input name="cellCargo" class="w3-input" type="text">';
    cell4.innerHTML = '<input name="cellCargo" class="w3-input" type="text">';
    cell5.innerHTML = '<input name="cellCargo" class="w3-input" type="text">';
    cell6.innerHTML = '<input name="cellCargo" class="w3-input" type="text">';
    cell7.innerHTML = '<input name="cellCargo" class="w3-input" type="text">';
    cell8.innerHTML = '<input name="cellCargo" class="w3-input" type="text">';
    cell9.innerHTML = '<input name="cellCargo" class="w3-input" type="text">';

}

    function documentTabelData(){
    var cellData1 = document.getElementsByName("cellDocument");
    var i = 0;
    var data1 = [];
    while(i<cellData1.length){
        data1.push(cellData1[i++].value);
    }
    document.getElementById("docTdata").value = data1;
    
}

extract value from dynamic html table

2 Answers2

Linked