在动态 table 中显示循环值通过 Ajax 发送

Question

我花了几个小时寻求帮助。我想在动态 table 中显示我的循环值，这是我的代码

function addRow(tableID) {
 var table = document.getElementById(tableID);
 var rowCount = table.rows.length;
 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;
    //alert(newcell.childNodes);
    switch(newcell.childNodes[0].type) {
     case "text":
       newcell.childNodes[0].value = "";
       break;
     case "checkbox":
       newcell.childNodes[0].checked = false;
       break;
     case "select-one":
       newcell.childNodes[0].selectedIndex = 0;
       break;
    }
   }
  }
function deleteRow(tableID) {
try {
 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 delete all the rows.");
    break;
   }
   table.deleteRow(i);
   rowCount--;
   i--;
   }
  }
 }catch(e) {
  alert(e);
  }
}
$(document).ready(function(){
    $("#btn-save").click(function(){    
     var agent   = $('#agent').val();
     var status  = $('#status').val();
     $('#store_agent').attr("value", agent);
     $('#store_status').attr("value", status);
    });
   });

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" class="form-control" required name="store_agent" id="store_agent" disabled>
<input type="text" class="form-control" required name="store_status" id="store_status" disabled>
<form role="form" method="post">
  <div class="form-group">
  <table width="100%" class="table table-bordered" id="sampleTbl">
  <thead>
  <tr>
     <td width="2%">No</td>
     <td width="49%">Nama Agent</td>
     <td width="49%">Keterangan</td>
  </tr>
  </thead>
  <tbody id="TableAdding">
  <tr>
    <td><input type="checkbox" name="chkbox[]" required/>
    </td>
    <td>
    <select type="text" class="form-control agent" id="agent" required name="agent[]" 
    style="width:100%">
      <option></option>
      <option value="Adam">Adam</option>
      <option value="George">George</option>
      <option value="Samuel">Samuel</option>
    </select>
    </td>
    <td>
    <select type="text" class="form-control status" id="status" required name="status[]" style="width:100%">
      <option></option>
      <option value="Admin">Admin</option>
      <option value="User">User</option>
      <option value="Guest">Guest</option>
    </select>
    </td>
  </tr>
</tbody>
<tfoot>
  <tr align="center">
  <td colspan="3">
  <input class="btn btn-primary" type="button" value="Add" onclick="addRow('TableAdding')"/>
  <input class="btn btn-danger" type="button" value="Delete" onclick="deleteRow('TableAdding')"/>
  <button type="button" class="btn btn-success" id="btn-save">Save</button>
  </td>
  </tr>
</tfoot>
</table>
</div>
            </form>

这是我预期的捕获图像。 enter image description here

我想将我的 "btn-save" 单击时获得的值发送到上面的另一个输入状态，例如我的图像捕获对不起，我的英语不好。需要高手帮助我是 php

的新手

Answer 1

检查这个

function addRow(tableID) {
 var table = document.getElementById(tableID);
 var rowCount = table.rows.length;
 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;
    //alert(newcell.childNodes);
    switch(newcell.childNodes[0].type) {
     case "text":
       newcell.childNodes[0].value = "";
       break;
     case "checkbox":
       newcell.childNodes[0].checked = false;
       break;
     case "select-one":
       newcell.childNodes[0].selectedIndex = 0;
       break;
    }
   }
  }
function deleteRow(tableID) {
try {
 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 delete all the rows.");
    break;
   }
   table.deleteRow(i);
   rowCount--;
   i--;
   }
  }
 }catch(e) {
  alert(e);
  }
}
$(document).ready(function(){
 $("#btn-save").click(function(){    
  var agent   = $('select[name^="agent"]');
  var status  = $('select[name^="status"]');
  var agentText = statusText = '';
  $.each(agent, function (key, value) {
   agentText += value.value+',';
  });
  $.each(status, function (key, value) {
   statusText += value.value+',';
  });
  $('#store_agent').attr("value", agentText.slice(0, -1));
  $('#store_status').attr("value", statusText.slice(0, -1));
 });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" class="form-control" required name="store_agent" id="store_agent" disabled>
<input type="text" class="form-control" required name="store_status" id="store_status" disabled>
<form role="form" method="post">
  <div class="form-group">
  <table width="100%" class="table table-bordered" id="sampleTbl">
  <thead>
  <tr>
     <td width="2%">No</td>
     <td width="49%">Nama Agent</td>
     <td width="49%">Keterangan</td>
  </tr>
  </thead>
  <tbody id="TableAdding">
  <tr>
    <td><input type="checkbox" name="chkbox[]" required/>
    </td>
    <td>
    <select type="text" class="form-control agent" id="agent" required name="agent[]" 
    style="width:100%">
      <option></option>
      <option value="Adam">Adam</option>
      <option value="George">George</option>
      <option value="Samuel">Samuel</option>
    </select>
    </td>
    <td>
    <select type="text" class="form-control status" id="status" required name="status[]" style="width:100%">
      <option></option>
      <option value="Admin">Admin</option>
      <option value="User">User</option>
      <option value="Guest">Guest</option>
    </select>
    </td>
  </tr>
</tbody>
<tfoot>
  <tr align="center">
  <td colspan="3">
  <input class="btn btn-primary" type="button" value="Add" onclick="addRow('TableAdding')"/>
  <input class="btn btn-danger" type="button" value="Delete" onclick="deleteRow('TableAdding')"/>
  <button type="button" class="btn btn-success" id="btn-save">Save</button>
  </td>
  </tr>
</tfoot>
</table>
</div>
            </form>

在动态 table 中显示循环值通过 Ajax 发送

Display looping value in dynamic table send via Ajax

javascript

ajax

dynamic-tables

在动态 table 中显示循环值 通过 Ajax 发送

Display looping value in dynamic table send via Ajax

javascript

ajax

dynamic-tables

在动态 table 中显示循环值通过 Ajax 发送