與包含數據表的div標籤相關的呈現問題

Question

這是我在某個Q & 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()這樣http://jsfiddle.net/sLXMU/3/

Answer 2

一個Ajax請求，這是不完整解決你的問題，但這是你的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(); 
});