中添加動態文本字段添加到HTML表格

Question

$(document).ready(function() { 
 
    var maxField = 10; 
 
    var addButton = $('.add_button'); 
 
    var wrapper = $('.field_wrapper'); 
 
    var fieldHTML = '<div><input type="text" name="Tape_Code[]" value=""/><a href="javascript:void(0);" class="remove_button" title="Remove field">delete</a></div>'; 
 
    var x = 1; 
 
    $(addButton).click(function() { 
 
    if (x < maxField) { 
 
     x++; 
 
     $(wrapper).append(fieldHTML); 
 
    } 
 
    }); 
 
    $(wrapper).on('click', '.remove_button', function(e) { 
 
    e.preventDefault(); 
 
    $(this).parent('div').remove(); 
 
    x--; 
 
    }); 
 
});

<?php 
 
    include_once 'dpconnect.php'; 
 
    $que=mysqli_query($MySQLiconn,"select Backup_Name from admin_backup_list "); 
 
    if(isset($_POST['confirm'])) { 
 
    $Date=date('d/m/y'); 
 
    $Backup_Name=$_POST['Backup_Name']; 
 
    $Tape_Code = $_POST['Tape_Code']; 
 
    $Operator_Approval = $_POST['Operator_Approval']; 
 
    $Operator_Remark = $_POST['Operator_Remark']; 
 

 
    $abc=mysqli_query($MySQLiconn,"insert into backup_details(Date, Backup_Name, Tape_Code,Operator_Approval,Operator_Remark)values('$Backup_Name','$Tape_Code','$Operator_Approval','$Operator_Remark')"); 
 
    } 
 

 
?> 
 

 

 
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script> 
 
<?php $Date=date('d/m/y'); ?> 
 

 

 
<form name="form2" action="" method="post"> 
 
    <table> 
 
    <tr> 
 
     <td width="103">Date</td> 
 
     <td width="94">Backup_Name</td> 
 
     <td width="94">No Of Tapes</td> 
 
     <td width="53">Tape Code</td> 
 
     <td width="71">Operator Approval</td> 
 
     <td width="144">Operator Remark</td> 
 

 
    </tr> 
 
    <?php if ($que->num_rows > 0) { while ($row = mysqli_fetch_array($que)) { ?> 
 
    <tr> 
 
     <td> 
 
     <?php echo $Date; ?> 
 
     </td> 
 
     <td> 
 
     <?php echo $row[ 'Backup_Name']; ?> 
 
     </td> 
 
     <td> 
 
     <input type="text" name="No_Of_Backup"> 
 
     </td> 
 
     <td> 
 
     <div class="field_wrapper"> 
 
      <input type="text" name="Tape_Code" value="" /><a href="javascript:void(0);" class="add_button" title="Add field">add</a> 
 
     </div> 
 
     </td> 
 
     <td> 
 
     <input type="text" name="Operator_Approval"> 
 
     </td> 
 
     <td> 
 
     <input type="text" name="Operator_Remark"> 
 
     </td> 
 
     <td colspan="8"> 
 
     <input type="submit" name="confirm" value="Confirm"> 
 
     </center> 
 
     </td> 
 
    </tr> 
 
    <?php } } ?> 
 

 
    </table> 
 
</form> 
 
</body> 
 

 
</html>

我做這個代碼在PHP。我需要幫助將文本字段動態添加到表格的特定列中。我也使用JavaScript完成了代碼。但問題是當我在一行中添加字段時，所有行都使用額外的字段進行更新。我需要幫助。我怎樣才能將這些數據插入MySQL？

Answer 1

您的代碼的問題是您正在使用類選擇器來選擇元素。類選擇器返回具有該類的所有元素的數組像對象。

https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementsByClassName

你可以找到，如果你改變類似下面一個代碼被點擊哪個元素。

<a href="javascript:void(0);" class="add_button" title="Add field" onclick="addButton(event);">add</a> 

，並在腳本

 function addButton(ev) { 
     var clickedElement = console.log(ev.target); 
     } 

現在你有哪些點擊是來自用戶的元素，你可以找到父TD/tr和追加的HTML文本框。

Answer 2

在$Tape_Code = $_POST['Tape_Code'];你會得到一個文本輸入數組，你必須將它插入到數據庫中，以你想要的形式。

$Tape_Code = $_POST['Tape_Code'] 
foreach($Tape_Code as $code){ 
    echo $code; 
}