Question

这是我在某些Q＆amp; A网站上发表的第一篇文章。指出我最微小的错误并纠正我。我开始学习PHP，我正在使用WAMP服务器。我有多个渲染问题。我先介绍一下。我有一个index.php页面，我想在其中显示五个表，分支，学生，主题，考试和标记。现在我在同一页面上保留了上面提到的每个表格的显示按钮。我不希望页面刷新，因此按钮的输入类型是“按钮”而不是“提交”。然后我想检查按钮是否被点击，所以我使用的是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 param。

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

1将它们全部隐藏在加载时，然后有选择地显示为http://jsfiddle.net/DVd3A/1/
2按下$.ajax()按钮点击ajax请求http://jsfiddle.net/sLXMU/3/

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();
});

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

2 个答案: