中添加动态文本字段添加到HTML表格

问题描述:

中添加动态文本字段添加到HTML表格

$(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?

+0

你想单行右边多于一个龙头代码? – Jaimin

您的代码的问题是您正在使用类选择器来选择元素。类选择器返回具有该类的所有元素的数组像对象。

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文本框。

$Tape_Code = $_POST['Tape_Code'];你会得到一个文本输入数组,你必须将它插入到数据库中,以你想要的形式。

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