My table in php is like that
I want like that add dynamic code in php code and When we select the top and right corner of radio button then press submit button should seen star in the cross of selected.
Help me please.Your support will highly appreciated!
<?php
echo "<table border =1>";
for ($i=1;$i<=7;$i++) {
echo"<tr></tr>";
for($j=1;$j<=6;$j++){
echo"<td width='30'height='30'></td>";
}}
分享 If you want to dynamically manipulate html elements, then you need to go for javascript instead of php. with some jquery help we can build your table system, follow the code bellow:
<html lang="en">
<head>
<meta charset="utf-8">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
</head>
<body>
<?php
// Initialize table markup buffer
$table_markup = "<table border='1'>";
// Itinerate rows
for ($i = 1; $i <= 7; $i++) {
$table_markup .= "<tr>";
// Itinerate columns
for ($j = 1; $j <= 6; $j++) {
// Define Cell ID
$td_id = "cell-".$j.$i;
// Create Cell content
if($i == 1 && $j <> 1){ // Radios for first row, ignore first cell
$radio_value = "radio-top-".$j;
$td_content = "<input type='radio' name='top' value='".$radio_value."'/>";
$td_class = "";
}else if($j == 1 && $i <> 1) { // Radios for first column, ignore first cell
$radio_value = "radio-right-".$i;
$td_content = "<input type='radio' name='right' value='".$radio_value."'/>";
$td_class = "";
}else{
$td_content = "";
$td_class = "noradio";
}
// Put Cell on table row
$table_markup .= "<td id='".$td_id."' class='".$td_class."' width='30'height='30'>".$td_content."</td>";
}
$table_markup .= "</tr>";
}
// Finalize table markup buffer
$table_markup .= "</table>";
?>
<?php echo $table_markup; // Use this anywhere you want to show your table ?>
<script type="text/javascript">
// This is the jquery code that does your dynamic manipulations
// When click on any radio button
$("input[type=radio]").click(function(){
// Obtain the value of the checkeds top and right radios
var top_val = $("input[name=top]:checked").val();
var right_val = $("input[name=right]:checked").val();
// If both are checked
if(top_val && right_val){
// Get their number
var top_number = top_val.replace("radio-top-", "");
var right_number = right_val.replace("radio-right-", "");
// Mount cell id for search
var cell_id = "cell-"+top_number+right_number;
// Clean all cells that dont have radios
$("td.noradio").html("");
// Mark found cell
$("td#"+cell_id).html("*");
}
});
</script>
</body>
</html>
