与包含数据表的 div 标签相关的渲染问题

Question

这是我在某个问答网站上的第一篇文章。指出我最小的错误并纠正我。我已经开始学习 PHP，并且正在使用 WAMP 服务器。我有多个渲染问题。我先介绍一个。我有一个 index.php 页面，我想在该页面上显示五个表格，即 Branch、Student、Subject、Exam 和 Marks。现在，我在同一页面上保留了上述每个表格的显示按钮。我不想刷新页面，所以按钮的输入类型是“按钮”而不是“提交”。然后我想检查按钮是否被点击，所以我使用 isset($_POST['button']) 其中 button 是相应表的显示按钮的名称。如果单击该按钮，则仅在隐藏其他表时才显示该特定表的数据表。

一次渲染一个表的问题：我希望当我点击显示分支表按钮时，将显示分支表，然后如果我点击显示学生表按钮，那么应该显示学生表，其余的表应该被隐藏，所有的表也是如此。现在下面的代码有太多多余的jquery，我想优化它。另外，我的 PHP 代码的一部分显示了分支表，其 div 标签 id 为 branch1，对于学生来说，它是 student1，同样如此。单击显示分支按钮时，我看不到任何事情发生。这意味着 if(isset($_POST['display_branch'])) 在按钮单击时不起作用。每个表还有一个 div 标签，并且具有不同的 id 但相同的类（即渲染） 我想知道我在哪里错了，我不想再次重新加载页面。

jQuery:

$('.render').hide();
$('#display_branch').click(function (event) {
    $('#student1').hide();
    $('#subject1').hide();
    $('#exam1').hide();
    $('#marks1').hide();
    $('#branch1').show();
});

$('#display_student').click(function (event) {
    $('#subject1').hide();
    $('#exam1').hide();
    $('#marks1').hide();
    $('#branch1').hide();
    $('#student1').show();
});
$('#display_subject').click(function (event) {
    $('#subject1').show();
    $('#exam1').hide();
    $('#marks1').hide();
    $('#branch1').hide();
    $('#student1').hide();
});
$('#display_exam').click(function (event) {
    $('#subject1').hide();
    $('#exam1').show();
    $('#marks1').hide();
    $('#branch1').hide();
    $('#student1').hide();
});
$('#display_marks').click(function (event) {
    $('#subject1').hide();
    $('#exam1').hide();
    $('#marks1').show();
    $('#branch1').hide();
    $('#student1').hide();
});

显示按钮：

       <div id="display" style="position:absolute; top:100px;">
       <form action="" method="post">
       <input type="button" id="display_branch" name="display_branch" value="Display Branch Table" >
       <input type="button" id="display_student" name="display_student" value="Display Student Table">
       <input type="button" id="display_subject" name="display_subject" value="Display Subject Table">
       <input type="button" id="display_exam" name="display_exam" value="Display Exam Table">
       <input type="button" id="display_marks" name="display_marks" value="Display Marks Table">
       </form>
       </div>

PHP 代码片段：

   if(isset($_POST['display_branch']))
   {
   $result = mysql_query("SELECT * FROM branch");?>
 <div class="render" id="branch1" style="position:absolute; left:200px; top:150px;">
        <table id="datatables" class="display">
            <thead>
                <tr>
                    <th>Branch ID</th>
                    <th>Branch Name</th>
                </tr>
            </thead>
            <tbody>
                <?php
                while ($row = mysql_fetch_array($result)) {
                $branch_id= $row['branch_id'];
                $branch_name = $row['branch_name'];?>
                    <tr>
                        <td><?php echo $branch_id;?></td>
                        <td><?php echo $branch_name;?></td>                         
                    </tr>
                    <?php
                }
                ?>
            </tbody>
        </table>
    </div>}

我搜索了很多方法并尝试了很多方法，但都没有得到完美的结果。希望这次讨论能帮助其他人解决类似的问题。

Answer 1

$_POST['display_branch']

这需要 POST 请求并给出 display_branch 参数。

你基本上有两个选项来隐藏/显示这样的元素。

• 1 在加载时将它们全部隐藏，然后像这样选择性地显示http://jsfiddle.net/DVd3A/1/
• 2 使用$.ajax() 像这样http://jsfiddle.net/sLXMU/3/ 在按钮单击时执行ajax 请求

Answer 2

这不是您问题的完整解决方案，但这是对您的 jQuery 代码的一些优化。我已经为您的问题创建了虚拟场景。您可以从这段代码中获得一些帮助：

HTML：

<div id="tables">
    <table id="branch1">
    </table>
    <table id="subject1">
    </table>
    <table id="student1">
    </table>
    <table id="marks1">
    </table>
    <table id="exam1">
    </table>
</div>

jQuery：

$('#display_branch').click(function (event) {
    var table = $(this).attr(id).split("_");
    $("#tables").find("table").hide();
    $("#"+table[1]+"1").show();
});