Question

我有三个按钮（角色，部门，搜索）。单击角色时，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>`

单击部门按钮时，我希望整个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>'，但它不起作用。谁能帮帮我？

Answer 1

我认为以下代码会对您有所帮助。

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;

Answer 2

您可以使用唯一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>

Answer 3

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

我希望这会对你有所帮助。

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

3 个答案: