1
我想在使用javascript創建的新行內創建一個切換按鈕。 這裏是我的代碼使用Javascript動態創建切換按鈕
<?php
session_start();
?>
<?php require_once 'dbconnection.php'; ?>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<title>Training Attendance form</title>
<link rel="stylesheet" href="logincss.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<link href="https://gitcdn.github.io/bootstrap-toggle/2.2.2/css/bootstrap-toggle.min.css" rel="stylesheet">
<script src="https://gitcdn.github.io/bootstrap-toggle/2.2.2/js/bootstrap-toggle.min.js"></script>
<script src="js/bootstrap-checkbox.js"></script>
<script>
jQuery(function(){
var counter = 1;
jQuery('a.aaaaa').click(function(event){
event.preventDefault();
var newRow = jQuery('<tr><td colspan="3" class="table-active"><input type="text" name="emp_code[]" class="form-control"></td><td colspan="3" class="table-success"><input type="text" name="emp_name[]" class="form-control"></td><td colspan="3" class="table-info"><input type="text" name="emp_mailid[]" class="form-control"></td><td colspan="3" class="table-info"><input type="text" name="nomination[]" class="form-control"></td><td colspan="3"><input type="checkbox" id="attendance" name="attendance[]" data-toggle="toggle" data-on="Yes" data-off="No"></td><td><a href="javascript:void(0);" class="remove"><span class="glyphicon glyphicon-remove"></span></a></td></tr>');
counter++;
jQuery('table.table').append(newRow);
});
});
</script>
<script>
$(function(){
$(document).on('click', '.remove', function() {
var trIndex = $(this).closest("tr").index();
if(trIndex>1) {
$(this).closest("tr").remove();
} else {
alert("Sorry!! Can't remove first row!");
}
});
});
</script>
<script>
$(function() {
$('#toggleone').bootstrapToggle({
on: 'Enabled',
off: 'Disabled'
});
}) </script>
</head>
<body>
<div class="container">
<div class="row vertical">
<div class="col-md-8 col-md-offset-2">
<div class="panel panel-info">
<div class="panel-heading">
<h3 class="panel-title"><center>Training Attendance form</center></h3>
</div>
<div class="panel-body">
<form class="form-horizontal" action="" method="post" id="loginform"
enctype="multipart/form-data">
<div class="form-group">
<label for="input_trainername" class="col-sm-3 control-label">Trainer Name</label>
<div class="col-sm-8">
<input readonly class="form-control" id="trainername" name="trainername" value="">
</div>
</div>
<div class="form-group">
<label for="input_trainingname" class="col-sm-3 control-label">Training Name</label>
<div class="col-sm-8">
<input readonly class="form-control" id="trainingname" name="trainingname" value="">
</div>
</div>
<div class="form-group">
<label for="input_trainingname" class="col-sm-3 control-label">Date</label>
<div class="col-sm-8">
<input type="date" class="form-control" id="trainingdate" name="trainingdate" value="" onfocus="(this.type='date')" onfocusout="(this.type='text')">
</div>
</div>
<div class="form-group">
<label for="labeldate" class="col-sm-1 control-label">Time</label>
<label for="input_fromdate" class="col-sm-2 control-label">From</label>
<div class="col-sm-3">
<input type="time" class="form-control" id="fromtime" name="fromtime"
placeholder="Pick here">
</div>
<label for="input_todate" class="col-sm-1 control-label">To </label>
<div class="col-sm-3">
<input type="time" class="form-control" id="totime" name="totime" value=""
placeholder="Pick here" >
</div></div>
<div class="form-group">
<label for="input_venue" class="col-sm-3 control-label">Venue</label>
<div class="col-sm-8">
<input type="text" class="form-control" id="venue" name="venue" value="">
</div>
</div>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<?php
//session_start();
//echo $_SESSION['year'];
mysql_select_db ("training_db");
$sql = "select * from training_nominated";
$result = mysqli_query($connect,$sql);
$num=mysqli_num_rows($result);
?>
<table align="center" class="table table-bordered"id="tb" border="10" bordercolor="#0066FF" style=\"background-color:#CCFFFF\" width="50%" cellpadding="9" cellspacing="9">
<tr><b>
<td colspan="3">Empid</td>
<td colspan="3">Name</td>
<td colspan="3">Email ID</td>
<td colspan="3">Nominated and invited</td>
<td colspan="3">Attendance</td>
<td><a href="javascript:void(0);" class="aaaaa" style="font-size:18px;" id="addMore" title="Add More Person"><span class="glyphicon glyphicon-plus"></span></a></td>
</b></tr>
<?php $sno=0; while ($row = mysqli_fetch_assoc($result))
{?>
<tr>
<td colspan="3" class="table-active"><?php echo $row['emp_code']?></td>
<td colspan="3" class="table-success"><?php echo $row['emp_name']?></td>
<td colspan="3" class="table-info"><?php echo $row['emp_mailid']?></td>
<td colspan="3" class="table-info"><input type="text" name="nomination[]" class="form-control"></td>
<td colspan="3" class="table-info">
<input type="checkbox" id="attendance" name="attendance[]" data-toggle="toggle" data-on="Yes" data-off="No"></td>
<td><a href='javascript:void(0);' class='disabled'><span class='glyphicon glyphicon-remove'></span></a></td>
<?php }?>
</td>
</tr>
<!-- <tr>
<td colspan="3" class="table-active"><input type="text" name="emp_code[]" class="form-control"></td>
<td colspan="3" class="table-success"><input type="text" name="emp_name[]" class="form-control"></td>
<td colspan="3" class="table-info"><input type="text" name="emp_mailid[]" class="form-control"></td>
<td colspan="3" class="table-info"><input type="text" name="nomination[]" class="form-control"></td>
<td colspan="3"><input type="checkbox" data-toggle="toggle" data-on="Yes" data-off="No" class="form-control"></td>
<td><a href='#' class='remove'><span class='glyphicon glyphicon-remove'></span></a></td>
</td>
<input type="hidden" id="count" name="count" value=""/>
</tr>-->
</table>
<!--<script>
$("#attendance").change(function(){
if($(this).prop("checked") == true){
alert("1");
}else{
alert("0");
}
});-->
<div class="form-group">
<div class="col-xs-11 text-center">
<button type="submit" class="btn btn-success">Submit</button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
所有的代碼工作fine.I我能夠創造內取表切換按鈕。但是當我點擊添加新行按鈕（+）時，我只收到複選框。有關這個bug的任何建議？