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

Question

我正在尝试将表数据存储到 Javascript 数组并将该数组发送到 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>

这是我的脚本

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();

我的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'];
?>

提交功能对我不起作用，即使我删除 $.ajax，警报(TableData)也不会显示。因此我无法验证我的php代码和存储html表数据是否正确，您能看一下我的提交函数和php代码，看看我哪里出了问题吗？

提前谢谢您。

Answer 1

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`