javascript - 从php中动态创建的html表访问数据

Question

通过使用 javascript，我已将新行动态添加到表中。但我不知道如何从 PHP 中动态创建的行访问数据，以便将它们插入数据库。

我在这里通过提供 html 和 java 脚本请帮助我编写 PHP 代码以从动态创建的表中提取数据。我可以使用 DOM 对象从静态表中提取数据。

<form name="frmtransport" method="post" action="transportation.php"  id="Form1">
  <table  id="Table1" name="transport">
    <tr >
      <td colspan="8" >
        Transportation 
      </td>
  </tr>
  <tr style="height: 36px;">
    <td colspan="2" Date 
  </td>
    <td    colspan="6" >
      <input type="text" id="jQueryDatePicker1"  name="trdate" value="25/02/2015">
    </td>
  </tr>
  <tr>
    <td>
      location 
    </td>
    <td>
      no.of boxes
    </td>
    <td>
      Gf.no 
    </td>
    <td>
      invoice no
    </td>
    <td>
      invoice date
    </td>
    <td>
      lorryno
    </td>
    <td>
      vat no 
    </td>
  </tr>
  <tr>
    <td >
      <select name="cmblocation" size="1" id="Combobox1"             style="position:relative;width:170px;height:36px;z-index:1;">
        <option value="volvo">
          Volvo
        </option>
        <option value="saab">
          Saab
        </option>
        <option value="mercedes">
          Mercedes
        </option>
        <option value="audi">
          Audi
        </option>
      </select>
    </td>
    <td >

      <input type="text" id="Editbox1" name="txtnoofboxes">

    </td>
    <td >

      <input type="text" id="Editbox2" name="txtgrno" >

    </td>
    <td >

      <input type="text" id="Editbox3" name="txtinvoiceno" >

    </td>
    <td >

      <input type="text" id="Editbox4" name="txtinvoiceno" >

    </td>
    <td >

      <input type="text" id="Editbox5" name="txtinvoiceno" >

    </td>
    <td >

      <input type="text" id="Editbox6" name="txtinvoiceno" >

    </td>
    <td >

      <input type="button" id="Button1" onclick="myFunction();" name="cmdadd" value="Add" >

    </td>
  </tr>

  <tr>
    <td colspan="8">

      <input type="submit" value="Save" name="btnsave" id="Button1" 
    </td>
    </tr>
  </table>

</form>

JavaScript 代码:

function myFunction() {
    var table = document.getElementById("Table1");
    //var rowc=table.rows.length;
    var row = table.insertRow(4);
    row.className = "rowstyle";

    var cell0 = row.insertCell(0);
    var element = document.getElementById("Combobox1");
    var op = element.options[element.selectedIndex].text;
    document.getElementById("Combobox1").value = "";

    cell0.innerHTML = op;
    var cell1 = row.insertCell(1);
    cell1.innerHTML = document.getElementById("Editbox1").value;
    document.getElementById("Editbox1").value = "";

    var cell2 = row.insertCell(2);
    cell2.innerHTML = document.getElementById("Editbox2").value;
    document.getElementById("Editbox2").value = "";
    var cell3 = row.insertCell(3);
    cell3.innerHTML = document.getElementById("Editbox3").value;
    document.getElementById("Editbox3").value = "";
    var cell4 = row.insertCell(4);
    cell4.innerHTML = document.getElementById("jQueryDatePicker2").value;
    document.getElementById("jQueryDatePicker2").value = "";
    var cell5 = row.insertCell(5);
    cell5.innerHTML = document.getElementById("Editbox5").value;
    document.getElementById("Editbox5").value = "";
    var cell6 = row.insertCell(6);
    cell6.innerHTML = document.getElementById("Editbox6").value;
    document.getElementById("Editbox6").value = "";
    var cell7 = row.insertCell(7);
    cell7.innerHTML = '<input type="button" id="Button1" style="width:45px;height:35px;" value="Delete" onclick="deleteRow(this)"/>';

    /* cell1.innerHTML = document.getElementsByName("txtnoofboxes").value;
      cell2.innerHTML = document.getElementsByName("txtnoofboxes");*/


}

Answer 1

当您提交表单时，只有来自表单输入字段的数据会被提交给服务器。您的代码从输入字段中取出输入的值并将它们放在表格单元格中，有效地将它们从提交的数据中删除。

您需要将创建的行的值添加到输入字段(或按照 Deepak Kamat 的建议使用 AJAX)。何时将值添加到输入字段由您决定。你可以做到:

1. 当用户点击添加时(这具有可编辑字段的优势)。
2. 当用户点击保存时。

第二个选项需要通过 JavaScript form.submit() 提交表单，但它允许您让表格不受大量输入字段的影响，如果您担心的话。

(另外，考虑捕获空值，以免意外创建空行)