javascript - 如何命名由javascript动态创建的对象

Question

我想知道如何命名由以下代码创建的记录集。问题是每次单击“提交”时，只会将最新的一组发送到数据库。我想知道如何修改代码才能将所有数据发送到数据库中。谢谢。

function addRow(tableID) {
  var table = document.getElementById(tableID);
  var rowCount = table.rows.length;
  if (rowCount < 5) {
    var row = table.insertRow(rowCount);
    var colCount = table.rows[0].cells.length;
    for (var i = 0; i < colCount; i++) {
      var newcell = row.insertCell(i);
      newcell.innerHTML = table.rows[0].cells[i].innerHTML;
    }
  } else {
    alert("Maximum Number of Courses is 5");

  }
}

function deleteRow(tableID) {
  var table = document.getElementById(tableID);
  var rowCount = table.rows.length;
  for (var i = 0; i < rowCount; i++) {
    var row = table.rows[i];
    var chkbox = row.cells[0].childNodes[0];
    if (null != chkbox && true == chkbox.checked) {
      if (rowCount <= 1) {
        alert("Cannot Remove all the Courses.");
        break;
      }
      table.deleteRow(i);
      rowCount--;
      i--;
    }
  }
}

<form action="*.php" enctype="multipart/form-data" id="form" method="post" name="form">
  <table id="dataTable" class="form" border="1">
    <tbody>
      <p></p>
      <td>
        <input type="checkbox" name="chk[]" checked="checked" />
      </td>
      <td>
        <label for="course">Course</label>
        <select id="course" name="course">
          <option></option>
          <option>Course 1</option>
          <option>Course 2</option>
          <option>Course 3</option>
          <option>Course 4</option>
          <option>Course 5</option>
        </select>
      </td>

      <td>
        <label for="year">Year</label>
        <select id="year" name="year">
            <option>Select Year</option> 
            <option>2000</option>
            <option>2001</option>
            <option>2002</option>
        </select>
      </td>

      <td>
        <label for="semester">Semester</label>
        <select id="semester" name="semester">
            <option>Select Semester</option> 
            <option>1</option>
            <option>2</option>
            <option>3</option>
        </select>
      </td>
    </tbody>
  </table>
  <p></p>
  <input type="button" value="Add Course" onClick="addRow('dataTable')" />
  <input type="button" value="Remove Course" onClick="deleteRow('dataTable')" />
  <input id="button" name="submit" type="submit" value="Submit Data" />

  <p></p>

</form>

帮助将不胜感激

Answer 1

您需要为每个输入创建一个数组，而不是 name="course" 编写 name="course[]"(与每个输入相同)。例如:

HTML:

<form action="data.php" enctype="multipart/form-data" id="form" method="post" name="form">
  <table id="dataTable" class="form" border="1">
    <tbody>
      <p>
        <td >
          <input type="checkbox" name="chk[]" checked="checked" />
        </td>
        <td>
          <label for="course">Course</label>
          <select id="course" name="course[]">
            <option></option>
            <option>Course 1</option>
            <option>Course 2</option>
            <option>Course 3</option>
            <option>Course 4</option>
            <option>Course 5</option>
          </select> 
        </td>
        <td>
          <label for="year">Year</label>
          <select id="year" name="year[]">
            <option>Select Year</option> 
            <option>2000</option>
            <option>2001</option>
            <option>2002</option>
          </select>
        </td>

        <td>
          <label for="semester">Semester</label>
          <select id="semester" name="semester[]">
            <option>Select Semester</option> 
            <option>1</option>
            <option>2</option>
            <option>3</option>
          </select>
        </td>
      </tbody>
    </table>
    <p> 
    <input type="button" value="Add Course" onClick="addRow('dataTable')" /> 
    <input type="button" value="Remove Course" onClick="deleteRow('dataTable')" />
    <input id="button" name="submit" type="submit" value="Submit Data" />

  <p>

</form>

JS:同理。

"data.php" 将接收一个多维数组。你可以看到结果:

<?php
echo '<pre>';
print_r($_POST);
echo '</pre>';
?>

如果你填充 3 行，你将得到这个 $_POST 数组:

Array
(
    [chk] => Array
        (
            [0] => on
            [1] => on
            [2] => on
        )

    [course] => Array
        (
            [0] => Course 1
            [1] => Course 2
            [2] => Course 3
        )

    [year] => Array
        (
            [0] => 2000
            [1] => 2001
            [2] => 2002
        )

    [semester] => Array
        (
            [0] => 1
            [1] => 2
            [2] => 3
        )

    [submit] => Submit Data
)