【问题标题】:Insert form into the table将表格插入表格
【发布时间】:2016-12-26 14:04:00
【问题描述】:

我在php中的表是这样的

我想在 php 代码中添加动态代码,当我们选择单选按钮的右上角和右上角时,然后按提交按钮应该会在选中的十字中看到星号。

请帮助我。非常感谢您的支持!

<?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>";
}}

【问题讨论】:

  • 您似乎有 2 个问题。 1:你想要的html。 2:如何在php中生成。从解决问题 1 开始。问题 1 的提示是在表单中包含表格。

标签: php html html-table


【解决方案1】:

如果您想动态操作 html 元素,那么您需要使用 javascript 而不是 php。借助一些 jquery 帮助,我们可以构建您的表系统,请遵循以下代码:

<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>

【讨论】:

    猜你喜欢
    • 2023-03-02
    • 2012-08-10
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2016-10-25
    • 2012-01-01
    • 2013-12-01
    • 1970-01-01
    相关资源
    最近更新 更多