當點擊不同的按鈕時如何更改div內容.javascript php html

我有三個按鈕（角色，部門，搜索）。當角色被點擊時，div將顯示角色信息。 DIV的代碼是：當點擊不同的按鈕時如何更改div內容.javascript php html

<div id="role_div" class="role" name="role" > 
<?php 
... 
$sql = "select distinct role from hpc_user ;"; 
echo '<table>'; 
$sel=$conn->query($sql); 
while($row=$sel->fetch(PDO::FETCH_NUM)) 
{ 
    echo '<tr>'; 
    echo '<td style="word-break:break-all;">'.$row[0].'</td>'; 
    echo '</tr>'; 
} 
    echo '</table>'; 
?> 
</div>`

當按下按鈕處，我希望整個DIV內容

<div id="role_div" class="role" name="role" > 
<?php 
$conn = new PDO(''); 
$conn->setAttribute(PDO::ATTR_ORACLE_NULLS, true); 
$sql = "select distinct department from hpc_user ;"; 
echo '<table >'; 
$sel=$conn->query($sql); 
while($row=$sel->fetch(PDO::FETCH_NUM)) 
{ 
echo '<tr>'; 
echo '<td style="word-break:break-all;">'.$row[0].'</td>'; 
echo '</tr>'; 
} 
?> 
</div>

我嘗試使用 innerhtml.document.getElementById('role_div').innerHTML='<?php>....</php>'，但它不工作。誰能幫我？

來源

2017-07-17 john

你的按鈕和完整的JavaScript代碼在哪裏？ –

它不是有效的連接$ conn = new PDO（''）; – JYoThI

在div旁邊的Tuttons。 – john

您可以簡單地把你的角色/部門的數據在兩個隱藏的div比你可以通過改變數據的Jquery

你提到的另一個解決方案你不能添加三個div

html：

<div id="ajax_exchange"></div> 
<input type="button" id="role" onclick="change_data(this.id);" value="role"> 
<input type="button" id="department" onclick="change_data(this.id);" value="department"> 
<input type="button" id="search" onclick="change_data(this.id);" value="search">

腳本：

<script type="text/javascript"> 
function change_data(id){ 
    var data_to_fetch = $('#'+id).val(); 

    $.ajax({ 
     type: "post", 
     url: "<?php echo SFURI::SEFURL('index.php?itemtype=skus&layout=ajax_call',array('call'=>'ajax')); ?>", 
     dataType: 'html', 
     cache: false,  
     data: {get_this: data_to_fetch}, 
     success: function(data){ 
      $('#ajax_exchange').html(""); 
      $('#ajax_exchange').html(data); 

     }, 
     error: function(){ 
      alert('Error while request..! try again'); 
     } 
    }); 
} 
</script>

ajax_call.php：

<?php 
    if(isset($_POST['get_this']) && $_POST['get_this']=="role"){ 
     echo "role data"; 
     // here you can put your role data to be sent to div 
    } 
    if(isset($_POST['get_this']) && $_POST['get_this']=="department"){ 

     echo "department data"; 
     // here you can put your department data to be sent to div 
    } 
    if(isset($_POST['get_this']) && $_POST['get_this']=="search"){ 

     echo "search data"; 
     // here you can put your search data to be sent to div 
    } 
?>

我希望這會幫助你。

來源

2017-07-17 06:56:06

三個分裂將破壞我的施工。我只能使用一個格。 – john

@john請檢查我的更新答案。 –

。謝謝。它工作正常。 – john

我認爲下面的代碼會幫助你。

var dt = '<table>'; 
    var sql = "select distinct role from hpc_user ;"; 
    for(var i = 0; i <= 5; i++) 
    { 
     dt = dt + '<tr>'; 
     dt = dt + '<td style="word-break:break-all;">'+ i +'</td>'; 
     dt = dt + '</tr>'; 
    } 
     dt = dt + '</table>'; 

     document.getElementById('role_div').innerHTML = dt;

來源

2017-07-17 06:45:23

您可以使用唯一的ID創建三個div。然後將其中的兩個樣式顯示爲無。然後你可以使用jquery在按鈕點擊時顯示/隱藏它們。例如：

HTML：

<!--Buttons--> 
<div class="btnsContainer"> 
    <button class="showHideDiv" id="role">Show Role Div</button> 
    <button class="showHideDiv" id="department">Show DepartmentDiv</button> 
    <button class="showHideDiv" id="search">Show Search Div</button> 
</div> 
<!--Role Container -->  
<div id="role_div" class="role" name="role"> 
    <!--Your role script here--> 
</div> 
<!--Department Container -->  
<div id="dept_div" class="role" name="role" style="display:none;"> 
    <!--Your department script here--> 
</div> 
<!--Search Container -->  
<div id="search_div" class="role" name="role" style="display:none;"> 
    <!--Your search script here--> 
</div>

的Jquery：

<!--latest jquery Library file--> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
<script> 
$(document).ready(function(){ 
    $(".showHideDiv").click(function(){ 
    var clickedBtnId = $(this).attr('id'); 
    if(clickedBtnId === 'role') { 
     $('#role_div').show(); 
     $('#dept_div').hide(); 
     $('#search_div').hide(); 
    } else if(clickedBtnId === 'department') { 
     $('#role_div').hide(); 
     $('#dept_div').show(); 
     $('#search_div').hide(); 
    } else if(clickedBtnId === 'search') { 
     $('#role_div').hide(); 
     $('#dept_div').hide(); 
     $('#search_div').show(); 
    } 
    }); 
}); 
</script>

來源

2017-07-17 06:51:59 Gyan

只有一個div可以使用。三divs會影響網頁顯示。 – john

當點擊不同的按鈕時如何更改div內容.javascript php html

回答

相關問題