当点击不同的按钮时如何更改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

回答

相关问题