我计划使用表单注册新教师（见下图）。教师可以指派不同的课程来教授不同的科目。
当通过单击按钮（+）创建新行时，是否可以将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>
<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 { {1}}和Subject Taught？
请帮忙。
答案 0 :(得分：0)
某些字段未填充，因为此处无法恢复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>
<button class="btn" type="reset">
<i class="ace-icon fa fa-undo bigger-110"></i>
Reset
</button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
已更新！