将HTML表数据存储到Javascript数组中

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.

Answer 1

尝试更改发送数据的方式：

data: { pTableData: TableData},

Answer 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`