PHP-如何将值从先前的文本框传递到同一页面上的新创建的行？

Question

我打算使用一种表格来注册新老师（请参见下面的图片）。 老师可以分配给不同的班级来教授不同的科目。

通过单击按钮（+）创建新行时，是否可以将值从Row1_Column1（AAAA）中的文本框传递到Row2_Column1中的文本框？

我不希望用户在某些文本框中键入相同的值时会费心-这些值将是相同的。 只有[Subject Taught]和[Class Taught]列可能会有所不同，因此我想在创建的每个新行中将其留空。

样本表格

我的代码如下：

 <div class="row"> <div class="col-xs-12"> <!-- PAGE CONTENT BEGINS --> <div class="row"> <div class="col-xs-12"> <p><button class="btn btn-success" type="button" name="viewStaff"> <i class="ace-icon fa fa-eye bigger-120"></i> View List</button> </p> <form method="post" id="insert_form"> <span id="error"></span> <table class="table table-bordered" id="staff_table"> <thead> <tr> <th>Name (Initials)</th> <th>Username</th> <th>Password</th> <th>Role</th> <th>Class Assigned</th> <th>Subject Taught</th> <th>Class Taught</th> <th><button type="button" name="add" class="btn btn-success btn-sm add"><span class="glyphicon glyphicon-plus"></span></button></th> </tr> </thead> </table> <div class="space-24"></div> <div class="clearfix form-actions"> <div class="center"> <button class="btn btn-info" type="submit" name="submit"> <i class="ace-icon fa fa-check bigger-110"></i> Submit </button> &nbsp; &nbsp; &nbsp; <button class="btn" type="reset"> <i class="ace-icon fa fa-undo bigger-110"></i> Reset </button> </div> </div> </form> </div> </div> </div> </div> <script> $(document).ready(function(){ $(document).on('click', '.add', function(){ var html = ''; html += '<tr>'; html += '<td><input type="text" name="initials[]" class="form-control initials" /></td>'; html += '<td><input type="text" name="user_name[]" class="form-control user_name" /></td>'; html += '<td><input type="password" name="password[]" class="form-control password" /></td>'; html += '<td><select name="role[]" class="form-control role"><option value="">Select...</option><option value="admin">Admin</option><option value="form_master">Form Master</option><option value="staff">Staff</option></select></td>'; html += '<td><select name="class_assigned[]" class="form-control class_assigned"><option value="">Select...</option><?php echo fill_class_box($conn); ?></select></td>'; html += '<td><select name="subject_taught[]" class="form-control subject_taught"><option value="">Select...</option><?php echo fill_subject_box($conn); ?></select></td>'; html += '<td><select name="class_taught[]" class="form-control class_taught"><option value="">Select...</option><?php echo fill_class_box($conn); ?></select></td>'; html += '<td><button type="button" name="remove" class="btn btn-danger btn-sm remove"><span class="glyphicon glyphicon-minus"></span></button></td></tr>'; $('#staff_table').append(html); }); $(document).on('click', '.remove', function(){ $(this).closest('tr').remove(); }); $('#insert_form').on('submit', function(event){ event.preventDefault(); var error = ''; $('.initials').each(function(){ var count = 1; if($(this).val() == '') { error = "<p>Please enter the required information</p>"; return false; } count = count + 1; }); $('.user_name').each(function(){ var count = 1; if($(this).val() == '') { error = "<p>Please enter the required information</p>"; return false; } count = count + 1; }); $('.password').each(function(){ var count = 1; if($(this).val() == '') { error = "<p>Please enter the required information</p>"; return false; } count = count + 1; }); $('.role').each(function(){ var count = 1; if($(this).val() == '') { error = "<p>Please enter the required information</p>"; return false; } count = count + 1; }); $('.class_assigned').each(function(){ var count = 1; if($(this).val() == '') { return true; } count = count + 1; }); $('.subject_taught').each(function(){ var count = 1; if($(this).val() == '') { error = "<p>Please enter the required information</p>"; return false; } count = count + 1; }); $('.class_taught').each(function(){ var count = 1; if($(this).val() == '') { error = "<p>Please enter the required information</p>"; return false; } count = count + 1; }); var form_data = $(this).serialize(); if(error == '') { $.ajax({ url:"staff_insert.php", method:"POST", data:form_data, success:function(data) { if(data == 'ok') { $('#staff_table').find("tr:gt(0)").remove(); $('#error').html('<div class="alert alert-success">Staff Details Saved</div>'); } } }); } else { $('#error').html('<div class="alert alert-danger">'+error+'</div>'); } }); }); </script> 

和staff_insert.php

<?php
//staff_insert.php
$connect = mysqli_connect("localhost", "root", "", "studentsdatabase");
if(isset($_POST["initials"]))
{
 $initials = $_POST["initials"];
 $user_name = $_POST["user_name"];
 $password = $_POST["password"];
 $role = $_POST["role"];
 $class_assigned = $_POST["class_assigned"];
 $subject_taught = $_POST["subject_taught"];
 $class_taught = $_POST["class_taught"];

 $query = '';
 for($count = 0; $count<count($initials); $count++)
 {
  $initials_clean = mysqli_real_escape_string($connect, $initials[$count]);
  $user_name_clean = mysqli_real_escape_string($connect, $user_name[$count]);
  $password_clean = mysqli_real_escape_string($connect, $password[$count]);
  $role_clean = mysqli_real_escape_string($connect, $role[$count]);
  $class_assigned_clean = mysqli_real_escape_string($connect, $class_assigned[$count]);
  $subject_taught_clean = mysqli_real_escape_string($connect, $subject_taught[$count]);
  $class_taught_clean = mysqli_real_escape_string($connect, $class_taught[$count]);

  if($initials_clean != '' && $user_name_clean != '' && $password_clean != '' && $role_clean != '' && $class_assigned_clean != '' && $subject_taught_clean != '' && $class_taught_clean != '')
  {
   $query .= '
   INSERT INTO tbl_users(fullname, username, password, role, class_assigned, subject_taught, class_taught) 
   VALUES("'.$initials_clean.'", "'.$user_name_clean.'", "'.$password_clean.'", "'.$role_clean.'", "'.$class_assigned_clean.'", "'.$subject_taught_clean.'", "'.$class_taught_clean.'"); 
   ';
  }
 }
 if($query != '')
 {
  if(mysqli_multi_query($connect, $query))
  {
   echo 'ok';
  }
 }
}
?>

如果您知道更好的方法，请帮忙。

谢谢。

编辑 ：

新图片请检查此图片

我该如何操作上述jquery，使Name ， Username ， Password ， Role和Class Assigned在每行中显示其余的Subject Taught和Class Taught输入？

请帮忙。

Answer 1

未填充某些字段，因为此处无法检索任何server side数据。 您可以在“ Role列中看到示例。

在代码段中查找此部分：

  // Here is were you can do the conditional and copying part
  var last_row_role_sel_val = $('#staff_table tr:last td:nth-child(4) select option:selected').val();
  var last_row_role_sel_html = $('#staff_table tr:last td:nth-child(4) select option:selected').html();
  console.log('last_row_role_sel_val',last_row_role_sel_val);
  console.log('last_row_role_sel_html',last_row_role_sel_html);

和更换部分

if (last_row_role_sel_val!=undefined && last_row_role_sel_val!="") {
  html += '<td><select name="role[]" class="form-control role"><option value="'+last_row_role_sel_val+'">'+last_row_role_sel_html+'</option></select></td>';
} else {
...

 //$( "b" ).clone().prependTo( "p" ); $(document).ready(function(){ $(document).on('click', '.add', function(){ var html = ''; html += '<tr>'; // Here is were you can do the conditional and copying part var last_5_rows_sel_val = []; var last_5_rows_sel_html = []; for (var i=1;i<=5;i++) { if (i>=4) { last_5_rows_sel_val.push($('#staff_table tr:last td:nth-child('+i+') select option:selected').val()); last_5_rows_sel_html.push($('#staff_table tr:last td:nth-child('+i+') select option:selected').html()); } else { last_5_rows_sel_val.push($('#staff_table tr:last td:nth-child('+i+') input').val()); last_5_rows_sel_html.push(''); } } if (last_5_rows_sel_val[0]!=undefined && last_5_rows_sel_val[0]!="") { html += '<td><input type="text" name="initials[]" class="form-control initials" value="'+last_5_rows_sel_val[0]+'" /></td>'; html += '<td><input type="text" name="user_name[]" class="form-control user_name" value="'+last_5_rows_sel_val[1]+'" /></td>'; html += '<td><input type="password" name="password[]" class="form-control password" value="'+last_5_rows_sel_val[2]+'" /></td>'; html += '<td><select name="role[]" class="form-control role"><option value="'+last_5_rows_sel_val[3]+'">'+last_5_rows_sel_html[3]+'</option></select></td>'; html += '<td><select name="class_assigned[]" class="form-control class_assigned"><option value="'+last_5_rows_sel_val[4]+'">'+last_5_rows_sel_html[4]+'</option></select></td>'; } else { html += '<td><input type="text" name="initials[]" class="form-control initials" /></td>'; html += '<td><input type="text" name="user_name[]" class="form-control user_name" /></td>'; html += '<td><input type="password" name="password[]" class="form-control password" /></td>'; html += '<td><select name="role[]" class="form-control role"><option value="">Select...</option><option value="admin">Admin</option><option value="form_master">Form Master</option><option value="staff">Staff</option></select></td>'; html += '<td><select name="class_assigned[]" class="form-control class_assigned"><option value="">Select...</option><?php echo fill_class_box($conn); ?></select></td>'; } html += '<td><select name="subject_taught[]" class="form-control subject_taught"><option value="">Select...</option><?php echo fill_subject_box($conn); ?></select></td>'; html += '<td><select name="class_taught[]" class="form-control class_taught"><option value="">Select...</option><?php echo fill_class_box($conn); ?></select></td>'; html += '<td><button type="button" name="remove" class="btn btn-danger btn-sm remove"><span class="glyphicon glyphicon-minus">-</span></button></td></tr>'; $('#staff_table').append(html); }); $(document).on('click', '.remove', function(){ $(this).closest('tr').remove(); }); $('#insert_form').on('submit', function(event){ event.preventDefault(); var error = ''; $('.initials').each(function(){ var count = 1; if($(this).val() == '') { error = "<p>Please enter the required information</p>"; return false; } count = count + 1; }); $('.user_name').each(function(){ var count = 1; if($(this).val() == '') { error = "<p>Please enter the required information</p>"; return false; } count = count + 1; }); $('.password').each(function(){ var count = 1; if($(this).val() == '') { error = "<p>Please enter the required information</p>"; return false; } count = count + 1; }); $('.role').each(function(){ var count = 1; if($(this).val() == '') { error = "<p>Please enter the required information</p>"; return false; } count = count + 1; }); $('.class_assigned').each(function(){ var count = 1; if($(this).val() == '') { return true; } count = count + 1; }); $('.subject_taught').each(function(){ var count = 1; if($(this).val() == '') { error = "<p>Please enter the required information</p>"; return false; } count = count + 1; }); $('.class_taught').each(function(){ var count = 1; if($(this).val() == '') { error = "<p>Please enter the required information</p>"; return false; } count = count + 1; }); var form_data = $(this).serialize(); if(error == '') { $.ajax({ url:"staff_insert.php", method:"POST", data:form_data, success:function(data) { if(data == 'ok') { $('#staff_table').find("tr:gt(0)").remove(); $('#error').html('<div class="alert alert-success">Staff Details Saved</div>'); } } }); } else { $('#error').html('<div class="alert alert-danger">'+error+'</div>'); } }); }); 

 table,th,tr,td,div,p { border: 1px solid #888; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="row"> <div class="col-xs-12"> <!-- PAGE CONTENT BEGINS --> <div class="row"> <div class="col-xs-12"> <p><button class="btn btn-success" type="button" name="viewStaff"> <i class="ace-icon fa fa-eye bigger-120"></i> View List</button> </p> <form method="post" id="insert_form"> <span id="error"></span> <table class="table table-bordered" id="staff_table"> <thead> <tr> <th>Name (Initials)</th> <th>Username</th> <th>Password</th> <th>Role</th> <th>Class Assigned</th> <th>Subject Taught</th> <th>Class Taught</th> <th><button type="button" name="add" class="btn btn-success btn-sm add"><span class="glyphicon glyphicon-plus">+</span></button></th> </tr> </thead> </table> <div class="space-24"></div> <div class="clearfix form-actions"> <div class="center"> <button class="btn btn-info" type="submit" name="submit"> <i class="ace-icon fa fa-check bigger-110"></i> Submit </button> &nbsp; &nbsp; &nbsp; <button class="btn" type="reset"> <i class="ace-icon fa fa-undo bigger-110"></i> Reset </button> </div> </div> </form> </div> </div> </div> </div> 

更新！！