Store HTML Table Data into Javascript Array

Question

I'm trying to store table data to Javascript array and send the array to php.

<div>
  <h5>PUT SOMETHING 1</h5>
  <input type="text" id="sample1" palceholder="SOMETHING" required>
</div>
<div>
  <h5>PUT SOMETHING 2</h5>
  <input type="text" id="sample2" palceholder="SOMETHING" required>
</div>
<div>
  <h5>PUT SOMETHING 3</h5>
  <input type="text" id="sample3" palceholder="SOMETHING" required>
</div>
<div>
  <button style="margin-top: 20px;" type="button" onclick="output();">OUTPUT</button>
</div>
<div style="margin-top: 10px;">
  <table class="table table-striped projects" id="table">
    <thead>
      <tr>
        <th>sample1</th>
        <th>sample2</th>
        <th>sample3</th>
      </tr>
    </thead>
    <tbody>
    </tbody>
  </table>
</div>
<div>
  <button type="button" onclick="submit();">SUBMIT</button>
</div>

Here's my script

function delete_row(r) {
  var result = confirm("Are you sure? Delete row from order?");
  if (result) {
    var i = r.parentNode.parentNode.rowIndex;
    document.getElementById("table").deleteRow(i);
  }//if(result)
}//delete_row();

function output() {
  var sample1 = document.getElementById("sample1").value;
  var sample2 = document.getElementById("sample2").value;
  var sample3 = document.getElementById("sample3").value;

  var table = document.getElementById("table");
  var row = table.insertRow(table).outerHTML = "<tr id='row'><td>" + sample1 
            + "</td><td>" + sample2 + "</td><td>" + sample3 +
            "</td><td> <a href='#' onclick='delete_row(this)'>Remove </a></td></tr>";
}//output();

function submit() {
  //Store HTML Table Values into Multidimensional Javascript Array Object
  var TableData = new Array();
  $('#table tr').each(function(row, tr) {
    TableData[row] = {
      "sample1": $(tr).find('td:eq(0)').text(),
      "sample2": $(tr).find('td:eq(1)').text(),
      "sample3": $(tr).find('td:eq(2)').text()
    }//tableData[row]
  });
  TableData.shift(); // first row will be empty - so remove

  alert(TableData);

  var Data;
  Data = $.toJSON(TableData);

  $.ajax({
    type: "POST",
    url: "getInfo.php",
    data: "pTableData=" + TableData,
    success: function(msg) {
        //return value stored in msg variable "success";
    }//success
  });
}//submit();

my php

<?php
  // Unescape the string values in the JSON array
  $tableData = stripcslashes($_POST['pTableData']);

  // Decode the JSON array
  $tableData = json_decode($tableData,TRUE);

  // now $tableData can be accessed like a PHP array
  echo $tableData[1]['sample1'];
?>

The submit function isn't working for me, even if i remove the $.ajax, the alert(TableData) isn't showing. thus I cant verify if my php code and storing html table data is correct, could you please take a look at my submit function and php code to see where did I go wrong?

Thank You in Advance.

Have you tried to look into console for exceptions? If alert is not working it mean, that something crashed before. — Michael Kapustey
– Michael Kapustey, Commented Jun 23, 2017 at 9:35
Is there any other way to store html table data besides the one i'm using? — Onitech
– Onitech, Commented Jun 23, 2017 at 10:29

Muhammad Shariq · Accepted Answer · 2017-06-23 10:34:50Z

2

function submit() {
  //Store HTML Table Values into Multidimensional Javascript Array Object
  var TableData = new Array();
  $('#table tr').each(function(row, tr) {
    TableData[row] = {
      "sample1": $(tr).find('td:eq(0)').text(),
      "sample2": $(tr).find('td:eq(1)').text(),
      "sample3": $(tr).find('td:eq(2)').text()
    }//tableData[row]
  });
  TableData.shift(); // first row will be empty - so remove

  alert(TableData);


 var Data;
  Data = JSON.stringify(TableData);
alert(Data);
  $.ajax({
    type: "POST",
    url: "getInfo.php",
    data: "pTableData=" + Data,
    success: function(msg) {
        return value stored in msg variable "success";
    }//success
  });
};//submit();`enter code here`

answered Jun 23, 2017 at 10:34

Muhammad Shariq

325 bronze badges

Sign up to request clarification or add additional context in comments.

8 Comments

Muhammad Shariq Over a year ago

Try this as i put the alert to see the data as well.

Onitech Over a year ago

in jsfiddle it's fully functional, the alert is also showing, but when I tried to copy it to my code, the alert does not show, I don't know why and I don't know what's the problem, I also tried to put your code in another file, the alert still does not show.

Muhammad Shariq Over a year ago

check your browser console is there any error in that. Also you can share the snapshot with me. Kindly give me the reputation if you feel i am trying to solve your problem

Onitech Over a year ago

it says "Uncaught ReferenceError: $ is not defined" Thank You very much for your help

Onitech Over a year ago

$('#table tr').each(function(row, tr) { this is where the error begins

|

Alessandro Minoccheri · Accepted Answer · 2017-06-23 09:35:44Z

0

try to change how you send post data to this:

data: { pTableData: TableData},

answered Jun 23, 2017 at 9:35

Alessandro Minoccheri

36.1k22 gold badges128 silver badges176 bronze badges

Collectives™ on Stack Overflow

Store HTML Table Data into Javascript Array

2 Answers 2

8 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

8 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related