如何在单击不同按钮时更改div内容。javascript php html

我有三个按钮：洞、部门、搜索。单击角色时，div将显示角色信息。div代码为：

<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>`

单击department按钮时，我希望整个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\u div'.innerhtml='我认为下面的代码将对您有所帮助

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;

---

您可以创建三个具有唯一ID的div。然后向其中两个显示“无”样式。然后您可以使用jquery在单击按钮时显示/隐藏它们。例如：

HTML:

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>

---

您可以简单地将角色/部门数据放在两个隐藏的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
    }
?>

---

我希望这能对您有所帮助。

按钮和完整的javascript代码在哪里？连接无效$conn=new PDO；Tuttons在div旁边。我只想使用一个div。当deep包含php代码时，它失败了。当deep是字符串时，它工作正常。谁能帮助我？帮助，帮助，帮助三个div将破坏我的结构。我只能使用一个div。@john请检查我的更新答案。。谢谢。它工作正常。只能使用一个div。三个div将影响web显示。

<?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
    }
?>