通過Ajax在動態表格中顯示循環值

Question

我花了數小時尋找幫助。我想在動態表中顯示我的循環值這是我的代碼

function addRow(tableID) { 
 
\t var table = document.getElementById(tableID); 
 
\t var rowCount = table.rows.length; 
 
\t var row = table.insertRow(rowCount); 
 
\t var colCount = table.rows[0].cells.length; 
 
\t \t for(var i=0; i<colCount; i++) { 
 
\t \t \t var newcell \t = row.insertCell(i); 
 
\t \t \t \t newcell.innerHTML = table.rows[0].cells[i].innerHTML; 
 
\t \t \t \t //alert(newcell.childNodes); 
 
\t \t \t \t switch(newcell.childNodes[0].type) { 
 
\t \t \t \t \t case "text": 
 
\t \t \t \t \t \t \t newcell.childNodes[0].value = ""; 
 
\t \t \t \t \t \t \t break; 
 
\t \t \t \t \t case "checkbox": 
 
\t \t \t \t \t \t \t newcell.childNodes[0].checked = false; 
 
\t \t \t \t \t \t \t break; 
 
\t \t \t \t \t case "select-one": 
 
\t \t \t \t \t \t \t newcell.childNodes[0].selectedIndex = 0; 
 
\t \t \t \t \t \t \t break; 
 
\t \t \t \t } 
 
\t \t \t } 
 
\t \t } 
 
function deleteRow(tableID) { 
 
try { 
 
\t var table = document.getElementById(tableID); 
 
\t var rowCount = table.rows.length; 
 
\t for(var i=0; i<rowCount; i++) { 
 
\t \t var row = table.rows[i]; 
 
\t \t var chkbox = row.cells[0].childNodes[0]; 
 
\t \t \t if(null != chkbox && true == chkbox.checked) { 
 
\t \t \t if(rowCount <= 1) { 
 
\t \t \t \t alert("Cannot delete all the rows."); 
 
\t \t \t \t break; 
 
\t \t \t } 
 
\t \t \t table.deleteRow(i); 
 
\t \t \t rowCount--; 
 
\t \t \t i--; 
 
\t \t \t } 
 
\t \t } 
 
\t }catch(e) { 
 
\t \t alert(e); 
 
\t \t } 
 
} 
 
$(document).ready(function(){ 
 
\t \t \t \t $("#btn-save").click(function(){ \t \t \t \t 
 
\t \t \t \t \t var agent \t \t = $('#agent').val(); 
 
\t \t \t \t \t var status \t = $('#status').val(); 
 
\t \t \t \t \t $('#store_agent').attr("value", agent); 
 
\t \t \t \t \t $('#store_status').attr("value", status); 
 
\t \t \t \t }); 
 
\t \t \t });

<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-保存」，在上面點擊另一個輸入狀態像我的拍攝 對不起我的英語不好。需要幫助主人我是初學者在PHP

Answer 1

入住這

function addRow(tableID) { 
 
\t var table = document.getElementById(tableID); 
 
\t var rowCount = table.rows.length; 
 
\t var row = table.insertRow(rowCount); 
 
\t var colCount = table.rows[0].cells.length; 
 
\t \t for(var i=0; i<colCount; i++) { 
 
\t \t \t var newcell \t = row.insertCell(i); 
 
\t \t \t \t newcell.innerHTML = table.rows[0].cells[i].innerHTML; 
 
\t \t \t \t //alert(newcell.childNodes); 
 
\t \t \t \t switch(newcell.childNodes[0].type) { 
 
\t \t \t \t \t case "text": 
 
\t \t \t \t \t \t \t newcell.childNodes[0].value = ""; 
 
\t \t \t \t \t \t \t break; 
 
\t \t \t \t \t case "checkbox": 
 
\t \t \t \t \t \t \t newcell.childNodes[0].checked = false; 
 
\t \t \t \t \t \t \t break; 
 
\t \t \t \t \t case "select-one": 
 
\t \t \t \t \t \t \t newcell.childNodes[0].selectedIndex = 0; 
 
\t \t \t \t \t \t \t break; 
 
\t \t \t \t } 
 
\t \t \t } 
 
\t \t } 
 
function deleteRow(tableID) { 
 
try { 
 
\t var table = document.getElementById(tableID); 
 
\t var rowCount = table.rows.length; 
 
\t for(var i=0; i<rowCount; i++) { 
 
\t \t var row = table.rows[i]; 
 
\t \t var chkbox = row.cells[0].childNodes[0]; 
 
\t \t \t if(null != chkbox && true == chkbox.checked) { 
 
\t \t \t if(rowCount <= 1) { 
 
\t \t \t \t alert("Cannot delete all the rows."); 
 
\t \t \t \t break; 
 
\t \t \t } 
 
\t \t \t table.deleteRow(i); 
 
\t \t \t rowCount--; 
 
\t \t \t i--; 
 
\t \t \t } 
 
\t \t } 
 
\t }catch(e) { 
 
\t \t alert(e); 
 
\t \t } 
 
} 
 
$(document).ready(function(){ 
 
\t $("#btn-save").click(function(){ \t \t \t \t 
 
\t \t var agent \t \t = $('select[name^="agent"]'); 
 
\t \t var status \t = $('select[name^="status"]'); 
 
\t \t var agentText = statusText = ''; 
 
\t \t $.each(agent, function (key, value) { 
 
\t \t \t agentText += value.value+','; 
 
\t \t }); 
 
\t \t $.each(status, function (key, value) { 
 
\t \t \t statusText += value.value+','; 
 
\t \t }); 
 
\t \t $('#store_agent').attr("value", agentText.slice(0, -1)); 
 
\t \t $('#store_status').attr("value", statusText.slice(0, -1)); 
 
\t }); 
 
});

<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>