请参阅随附的代码进行理解。 HTML表显示有基于某些条件的元素。每当“额外的KM /小时”单选按钮出现时？是，则应启用其右侧的所有列，否则应禁用。我在此“ displayTable” ID上使用PHP填充表值。
<html lang="en">
<head>
<!-- Meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<meta name="description" content="">
<meta name="author" content="">
<!-- Title -->
<title>Cab Tracker</title>
<script type="text/javascript">
function getRoutes(){
$(document).ready(function(){
$("#compName").change(function(){
var cID = $("#compName").val();
$.ajax({
type: "POST",
url: "loadTariff.php",
data:'companyID='+cID
}).done(function(data){
$("#displayTable").html(data);
});
});
});
}
</script>
<link rel="shortcut icon" type="image/png" href="">
<link rel="stylesheet" href="main/vendor/bootstrap4/css/bootstrap.min.css">
<link rel="stylesheet" href="main/vendor/themify-icons/themify-icons.css">
<link rel="stylesheet" href="main/vendor/font-awesome/css/font-awesome.min.css">
<link rel="stylesheet" href="main/vendor/animate.css/animate.min.css">
<link rel="stylesheet" href="main/vendor/jscrollpane/jquery.jscrollpane.css">
<link rel="stylesheet" href="main/vendor/waves/waves.min.css">
<link rel="stylesheet" href="main/vendor/switchery/dist/switchery.min.css">
<link rel="stylesheet" href="main/vendor/DataTables/css/dataTables.bootstrap4.min.css">
<link rel="stylesheet" href="main/vendor/DataTables/Responsive/css/responsive.bootstrap4.min.css">
<link rel="stylesheet" href="main/vendor/DataTables/Buttons/css/buttons.dataTables.min.css">
<link rel="stylesheet" href="main/vendor/DataTables/Buttons/css/buttons.bootstrap4.min.css">
<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-glyphicons.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/x-editable/1.5.0/bootstrap3-editable/css/bootstrap-editable.css">
<link rel="stylesheet" href="main/vendor/dropify/dist/css/dropify.min.css">
<link rel="stylesheet" href="main/assets/css/core.css">
<style type="text/css">
.rating-outer span,
.rating-symbol-background {
color: #ffe000!important;
}
.rating-outer span,
.rating-symbol-foreground {
color: #ffe000!important;
}
</style>
<link rel="stylesheet" href="main/vendor/jvectormap/jquery-jvectormap-2.0.3.css">
</head>
<body class="fixed-sidebar fixed-header content-appear skin-default">
<div class="wrapper">
<div class="preloader"></div>
<div class="site-overlay"></div>
<div class="site-sidebar">
<div class="custom-scroll custom-scroll-light">
<ul class="sidebar-menu">
<li class="with-sub">
<a href="#" class="waves-effect waves-light">
<span class="s-caret"><i class="fa fa-angle-down"></i></span>
<span class="s-icon"><i class="ti-crown"></i></span>
<span class="s-text">Company</span>
</a>
<ul>
<li><a href="listcompanies.php">List Company</a></li>
<li><a href="addcompany.php">Add New Company</a></li>
</ul>
</li>
</ul>
</div>
</div>
<div class="site-header">
<nav class="navbar navbar-light">
<div class="navbar-left">
<a class="navbar-brand" href="">
<div class="logo" style="background: url(/logo-black.png) no-repeat;"></div>
</a>
<div class="toggle-button dark sidebar-toggle-first float-xs-left hidden-md-up">
<span class="hamburger"></span>
</div>
<div class="toggle-button-second dark float-xs-right hidden-md-up">
<i class="ti-arrow-left"></i>
</div>
<div class="toggle-button dark float-xs-right hidden-md-up" data-toggle="collapse" data-target="#collapse-1">
<span class="more"></span>
</div>
</div>
<div class="navbar-right navbar-toggleable-sm collapse" id="collapse-1">
<div class="toggle-button light sidebar-toggle-second float-xs-left hidden-sm-down">
<span class="hamburger"></span>
</div>
<ul class="nav navbar-nav">
<li class="nav-item hidden-sm-down">
<a class="nav-link toggle-fullscreen" href="#">
<i class="ti-fullscreen"></i>
</a>
</li>
</ul>
<ul class="nav navbar-nav float-md-right">
<li class="nav-item dropdown hidden-sm-down">
<a href="#" data-toggle="dropdown" aria-expanded="false">
<span class="avatar box-32">
<img src="main/avatar.jpg" alt="">
</span>
</a>
<div class="dropdown-menu dropdown-menu-right animated fadeInUp">
<a class="dropdown-item" href="">
<i class="ti-user mr-0-5"></i> Profile
</a>
<a class="dropdown-item" href="">
<i class="ti-settings mr-0-5"></i> Change Password
</a>
<div class="dropdown-divider"></div>
<a href="logout.php" name="submit" class="dropdown-item">
<span class="s-icon"><i class="ti-power-off"></i></span>
<span class="s-text">Sign Out</span>
</a>
</div>
</li>
</ul>
</div>
</nav>
</div>
<div class="site-content">
<div class="content-area py-1">
<div class="container-fluid">
<form class="form-horizontal" name="tariffset" action="settariff.php" method="POST" enctype="multipart/form-data" role="form" onsubmit="return validateform()">
<div class="box box-block bg-white">
<div class="row" >
<div class="col-md-3" style="width:15%">
<label>Company:</label>
</div>
<div class="col-md-6" style="width:80%">
<?php
require_once "config.php";
$sqll = "select companyID,companyName from companymst where delFlag=0 order by companyName";
$results = mysqli_query($conn, $sqll);
if (mysqli_num_rows($results) > 0)
{
while ( $row = mysqli_fetch_array ($results,MYSQLI_ASSOC));
}
?>
<select id="compName" name="compName" class="form-control" style="width:100%;" required onChange="getRoutes();">
<option selected value=-1>Select Company</option>
<?php
if (mysqli_num_rows($results) >0)
{
foreach ($results as $row){
echo "<option value=$row[companyID]>$row[companyName]</option>";
}
}
?>
</select>
</div>
</div>
<br/>
<hr style="height: 2px;background: black; " >
<table id="editableTable" class="table table-bordered" >
<thead style="text-align:center">
<tr>
<th width='15%'><span>Route</span></th>
<th width='20%'><span>Pickup/Drop</span></th>
<th width='10%'><span># Days</span></th>
<th width='10%'><span>Total Amount</span></th>
<th width='20%'><span>Extra KM/Hr?</span></th>
<th width='10%'><span>Allowed KM</span></th>
<th width='10%'><span>Allowed Hr</span></th>
<th width='10%'><span>Extra KM Rate</span></th>
<th width='10%'><span>Extra Hourly Rate</span></th>
</tr>
</thead>
<tbody id="displayTable">
</tbody>
</table>
<hr style="height: 2px;background: black; " >
<br/>
<div class="row">
<input type="submit" class="btn btn-primary" value="Submit" name="submit">
</div>
</div>
</form>
</div>
</div>
<footer class="footer">
<div class="container-fluid">
<div class="row text-xs-center">
<div class="col-sm-4 text-sm-left mb-0-5 mb-sm-0">
<p>© 2020 S10Cabs</p>
</div>
</div>
</div>
</footer>
</div>
</div>
<script type="text/javascript" src="main/vendor/jquery/jquery-1.12.3.min.js"></script>
<script type="text/javascript" src="main/vendor/tether/js/tether.min.js"></script>
<script type="text/javascript" src="main/vendor/bootstrap4/js/bootstrap.min.js"></script>
<script type="text/javascript" src="main/vendor/detectmobilebrowser/detectmobilebrowser.js"></script>
<script type="text/javascript" src="main/vendor/jscrollpane/jquery.mousewheel.js"></script>
<script type="text/javascript" src="main/vendor/jscrollpane/mwheelIntent.js"></script>
<script type="text/javascript" src="main/vendor/jscrollpane/jquery.jscrollpane.min.js"></script>
<script type="text/javascript" src="main/vendor/jquery-fullscreen-plugin/jquery.fullscreen-min.js"></script>
<script type="text/javascript" src="main/vendor/waves/waves.min.js"></script>
<script type="text/javascript" src="main/vendor/DataTables/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="main/vendor/DataTables/js/dataTables.bootstrap4.min.js"></script>
<script type="text/javascript" src="main/vendor/DataTables/Responsive/js/dataTables.responsive.min.js"></script>
<script type="text/javascript" src="main/vendor/DataTables/Responsive/js/responsive.bootstrap4.min.js"></script>
<script type="text/javascript" src="main/vendor/DataTables/Buttons/js/dataTables.buttons.min.js"></script>
<script type="text/javascript" src="main/vendor/DataTables/Buttons/js/buttons.bootstrap4.min.js"></script>
<script type="text/javascript" src="main/vendor/DataTables/JSZip/jszip.min.js"></script>
<script type="text/javascript" src="main/vendor/DataTables/pdfmake/build/pdfmake.min.js"></script>
<script type="text/javascript" src="main/vendor/DataTables/pdfmake/build/vfs_fonts.js"></script>
<script type="text/javascript" src="main/vendor/DataTables/Buttons/js/buttons.html5.min.js"></script>
<script type="text/javascript" src="main/vendor/DataTables/Buttons/js/buttons.print.min.js"></script>
<script type="text/javascript" src="main/vendor/DataTables/Buttons/js/buttons.colVis.min.js"></script>
<script type="text/javascript" src="main/vendor/switchery/dist/switchery.min.js"></script>
<script type="text/javascript" src="main/vendor/dropify/dist/js/dropify.min.js"></script>
<script type="text/javascript" src="main/assets/js/app.js"></script>
<script type="text/javascript" src="main/assets/js/demo.js"></script>
<script type="text/javascript" src="main/assets/js/tables-datatable.js"></script>
<script type="text/javascript" src="main/assets/js/forms-upload.js"></script>
<script type="text/javascript" src="asset/js/rating.js"></script>
<script type="text/javascript">
$('.rating').rating();
</script>
<script>
function toggle(value){
if(value=='hide'){
document.getElementById("allowedhr").setAttribute('disabled', true);
document.getElementById("allowedkm").setAttribute('disabled', true);
document.getElementById("extrahr").setAttribute('disabled', true);
document.getElementById("extrakm").setAttribute('disabled', true);
}
else{
document.getElementById("allowedhr").removeAttribute('disabled');
document.getElementById("allowedkm").removeAttribute('disabled');
document.getElementById("extrahr").removeAttribute('disabled');
document.getElementById("extrakm").removeAttribute('disabled');
}
}
</script>
</body>
</html>
使用以下PHP代码填充表格：
while($row=mysqli_fetch_array($resultSet)){
$txtstr="";
echo "<tr>
<td style='width:30%'>" .$row["routeName"]. "</td>
<td style='width:20%'>
<label class='checkbox'><input type='checkbox' name='pickup' checked value='Pickup' style='margin-left: 0px;margin-right:6px'>Pickup</label>
<label class='checkbox'><input type='checkbox' name='drop' checked value='Drop' style='margin-left: 10px;margin-right: 6px'>Drop</label>
</td>
<td>
<input type='text' id='noofdays' value=".$row['noofdays']." name='noofdays' size='3'/>
</td>
<td>
<input type='text' id='pickupamt' value=".$row['pickupamt']." name='pickupamt' size='5'/>
</td>
<td style='width:20%'>";
if ($row['extraallowed']==1){
$txtstr = "<label class='radio-inline'><input type='radio' name='SourceOfc' style='margin-left: 0px;margin-right: 6px' checked value='Yes' onclick=toggle('show')>Yes</label>";
$txtstr.= "<label class='radio-inline'><input type='radio' name='SourceOfc' style='margin-left: 10px;margin-right: 6px' value='No' onclick=toggle('hide')>No</label>";
}
else{
$txtstr = "<label class='radio-inline'><input type='radio' name='SourceOfc' style='margin-left: 0px;margin-right: 6px' value='Yes' onclick=toggle('show')>Yes</label>";
$txtstr.= "<label class='radio-inline'><input type='radio' name='SourceOfc' style='margin-left: 10px;margin-right: 6px' checked value='No' onclick=toggle('hide')>No</label>";
}
echo $txtstr."</td>
<td>
<input type='text' id='allowedkm' value=".$row['allowedkm']." name='allowedkm' size='5'/>
</td>
<td>
<input type='text' id='allowedhr' value=".$row['allowedhrs']." name='allowedhr' size='5'/>
</td>
<td>
<input type='text' id='extrakm' value=".$row['extrakmamt']." name='extrakm' size='5'/>
</td>
<td>
<input type='text' id='extrahr' value=".$row['extrahrsamt']." name='extrahr' size='5'/>
</td>
</tr>";
}