Question

我有一个html表，用户可以动态添加行。我每行有8列，我想将它们存储在数组中。

如何将它们存储在数组中？我是否必须使用多维数组，或者我可以使用下面的当前方法执行此操作？但我的代码不起作用。数组内的值为空：（

这是我存储值的php

    $basic_category = $this->input->post("basic_category");
    $basic_workscope = $this->input->post("basic_workscope");
    $basic_i = $this->input->post("basic_i");
    $basic_e = $this->input->post("basic_e");
    $basic_pi = $this->input->post("basic_pi");
    $basic_pa = $this->input->post("basic_pa");
    $basic_ata_chapter = $this->input->post("basic_ata_chapter");

    $index0 = $this->input->post("showindex0");

    for ($i=0; $i < $index0; $i++) {
        $basic_data = array(
            'basic_category' => $basic_category[$i],
            'basic_workscope' => $basic_workscope[$i],
            'basic_i' => $basic_i[$i],
            'basic_e' => $basic_e[$i],
            'basic_pi' => $basic_pi[$i],
            'basic_pa' => $basic_pa[$i],
            'basic_ata_chapter' => $basic_ata_chapter[$i]);
    }

HTML和JS

var index0 = 1;

function addTable0() {

  var table0 = document.getElementById("myTable0");
  var row0 = table0.insertRow(2);
  var cell1_0 = row0.insertCell(0);
  var cell2_0 = row0.insertCell(1);
  var cell3_0 = row0.insertCell(2);
  var cell4_0 = row0.insertCell(3);
  var cell5_0 = row0.insertCell(4);
  var cell6_0 = row0.insertCell(5);
  var cell7_0 = row0.insertCell(6);
  var cell8_0 = row0.insertCell(7);
  var cell9_0 = row0.insertCell(8);
  row0.id = "newRow_0";
  cell1_0.innerHTML = "";
  cell2_0.id = "cell2_0";
  cell3_0.id = "cell3_0";
  cell4_0.id = "cell4_0";
  cell5_0.id = "cell5_0";
  cell6_0.id = "cell6_0";
  cell7_0.id = "cell7_0";
  cell8_0.id = "cell8_0";
  cell9_0.id = "cell9_0";
  $("#cell2_0").append('<select style="height:30px" name="basic_category[' + index0 + ']" class="form-control"><option>-</option><option>AP</option><option>EA</option></select>');
  $("#cell3_0").append('<input type="text" class="form-control" name="basic_workscope[' + index0 + ']" placeholder="Type the workscope here">');
  $("#cell4_0").append('<div style="text-align: center"><input type="checkbox" name="basic_i[' + index0 + ']"></div>');
  $("#cell5_0").append('<div style="text-align: center"><input type="checkbox" name="basic_e[' + index0 + ']"></div>');
  $("#cell6_0").append('<div style="text-align: center"><input type="checkbox" name="basic_pi[' + index0 + ']"></div>');
  $("#cell7_0").append('<div style="text-align: center"><input type="checkbox" name="basic_pa[' + index0 + ']"></div>');
  $("#cell8_0").append('<input type="text" class="form-control" name="basic_ata_chapter[' + index0 + ']" placeholder="Type the ATA chapters here">');
  $("#cell9_0").append('<button onclick="deleteTable0(this)" type="button" class="btn btn-danger btn-sm remove" id="btn_delete0" ><span class="glyphicon glyphicon-trash"></span></button>');

  index0++;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<table id="myTable0" name="myTable0" class="table table-bordered" style="width:100%; margin-bottom: 10px;">
  <h3>Subjects</h3>
  <tr style="font-size:18px; height:30px; color:#4d4d4d">
    <th class="col-md-2" colspan="2" style="text-align:center;">Category</th>
    <th class="col-md-3" style="text-align:center;">Work Scope</th>
    <th>
      <div style="text-align:center">I</div>
    </th>
    <th>
      <div style="text-align:center">E</div>
    </th>
    <th>
      <div style="text-align:center">PI</div>
    </th>
    <th>
      <div style="text-align:center">PA</div>
    </th>
    <th class="col-md-3" style="text-align:center;">ATA Chapters</th>
  </tr>
  <tr style="height:25px; font-size:15px">
    <td class="col-md-1" style="text-align: center; color:#4d4d4d;"><b>Basic</b></td>
    <td class="col-md-1">
      <select style="height:30px" name="basic_category[0]" class="form-control">
				<option>-</option>	
				<option>AP</option>
				<option>EA</option>
			</select>
    </td>
    <td class="col-md-3">
      <div>
        <input type="text" class="form-control" name="basic_workscope[0]" placeholder="Type the workscope here">
      </div>
    </td>
    <td>
      <div style="text-align: center">
        <input type="checkbox" name="basic_i[0]">
      </div>
    </td>
    <td>
      <div style="text-align: center">
        <input type="checkbox" name="basic_e[0]">
      </div>
    </td>
    <td>
      <div style="text-align: center">
        <input type="checkbox" name="basic_pi[0]">
      </div>
    </td>
    <td>
      <div style="text-align: center">
        <input type="checkbox" name="basic_pa[0]">
      </div>
    </td>
    <td class="col-md-3">
      <div>
        <input type="text" class="form-control" name="basic_ata_chapter[0]" placeholder="Type the ATA chapters here">
      </div>
    </td>
    <td style="width: 20px;">
      <button onclick="deleteTable0()" type="button" class="btn btn-danger btn-sm">
                <span class="glyphicon glyphicon-trash"></span>
            </button>
    </td>
  </tr>
</table>
<div class="row">
  <button onclick="addTable0()" type="button" id="btn_add0" class="btn btn-success btn-sm" style="float: right; margin-right: 70px;">
                <span class="glyphicon glyphicon-plus"></span> Add
            </button>
</div>

Answer 1

请试一试。

我提供了所有值，你需要运行一个普通的PHP表单字段数组循环

$(function() {
  $("#btn_add").on("click", function() {
    var $row = $("tbody > tr").first().clone();
    $row.find("[name^='basic_ata_chapter']").val(""); // in case they filled it out
    $("#tb").append($row);
  });
  $("#tb").on("click",".delete",function() { // delegate
    var $tr = $(this).closest("tr");
    if ($("#tb").children().length>1) { // leave the first one
      $tr.remove();
    }  
  });
});

.center {
  text-align: center
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<h3>Subjects</h3>
<table id="myTable0" name="myTable0" class="table table-bordered" style="width:100%; margin-bottom: 10px;">
  <thead>
    <tr style="font-size:18px; height:30px; color:#4d4d4d">
      <th class="col-md-2" colspan="2" style="text-align:center;">Category</th>
      <th class="col-md-3" style="text-align:center;">Work Scope</th>
      <th class="center">I</th>
      <th class="center">E</th>
      <th class="center">PI</th>
      <th class="center">PA</th>
      <th class="col-md-3 center">ATA Chapters</th>
    </tr>
  </thead>
  <tbody id="tb">
    <tr style="height:25px; font-size:15px">
      <td class="col-md-1" style="text-align: center; color:#4d4d4d;"><b>Basic</b></td>
      <td class="col-md-1">
        <select style="height:30px" name="basic_category[]" class="form-control">
				<option>-</option>	
				<option>AP</option>
				<option>EA</option>
			</select>
      </td>
      <td class="col-md-3">
        <input type="text" class="form-control" name="basic_workscope[]" placeholder="Type the workscope here">
      </td>
      <td class="center">
        <input type="checkbox" name="basic_i[]" value="i" />
      </td>
      <td class="center">
        <input type="checkbox" name="basic_e[]" value="e" />
      </td>
      <td class="center">
        <input type="checkbox" name="basic_pi[]" value="pi" />
      </td>
      <td class="center">
        <input type="checkbox" name="basic_pa[]" value="pa" />
      </td>
      <td class="col-md-3">
        <input type="text" class="form-control" name="basic_ata_chapter[]" placeholder="Type the ATA chapters here" value="" />
      </td>
      <td style="width: 20px;">
        <button type="button" class="btn btn-danger btn-sm delete">
                <span class="glyphicon glyphicon-trash"></span>
            </button>
      </td>
    </tr>
  </tbody>
</table>
<div class="row">
  <button type="button" id="btn_add" class="btn btn-success btn-sm" style="float: right; margin-right: 70px;">
                <span class="glyphicon glyphicon-plus"></span> Add
            </button>
</div>

无法通过php动态添加行获取值

1 个答案: