构建像数据表选择的树的最佳方法是什么？ [英] What is the best approach to build a tree like datatable selection?

问题描述

我想显示一个数据表，在选择后可以选择一行我想在同一页面上显示另一个表并使用在表1中选择的id。

我尝试了不同的到达那里但不能完成它的方法



我尝试过：



那就是我现在的地方



表

I want to show a data table where one row can be selected after selection i want to show another table on the same page and use the id which was selected in table one.
I tried different approaches to get there but cant get it done

What I have tried:

That is where i am now

Table

$resultsupplier = mysqli_query($con,"SELECT supplier_id, supplier_name, supplier_origin FROM supplier");
<table class="table table-dark" id="SupplierTable">
  <thead>
    <tr>
      <th scope="col">ID</th>
      <th scope="col">Name</th>
      <th scope="col">Origin</th>
    </tr>
  </thead>
  <tbody>
      <?php
    while($row = mysqli_fetch_array($resultsupplier))
        {
            echo "<tr class=\"clickable-row\" id=\"" . $row['supplier_id'] . "\">";
            echo "<td>" . $row['supplier_id'] . "</td>";
            echo "<td>" . $row['supplier_name'] . "</td>";
            echo "<td>" . $row['supplier_origin'] . "</td>";
            echo "</tr>";
        }
?>
        </tbody>
    </table>

脚本

Script

<script>
    $('#SupplierTable').on('click', '.clickable-row', function(event) 
        {
            if($(this).hasClass('active'))  
            {
                $(this).removeClass('active');
                var x = document.getElementById("OrderT");
                x.style.display = "none";
                console.log($(this).attr('id'));
            } else 
            {
                $(this).addClass('active').siblings().removeClass('active');
                var x = document.getElementById("OrderT");
                x.style.display = "block";
                console.log($(this).attr('id'));
            }
        });   
        

        
        
    $(".clickable-row").click(function()
        {
            if($(this).hasClass("highlight"))
            $(this).removeClass('highlight');
        else
            $(this).addClass('highlight').siblings().removeClass('highlight');
        })        
</script>

表2（此刻刚刚加载SupplierTable，因为我无法想象o我如何将id传递给表2）

Table 2 (at the moment just loads SupplierTable again since i can not figure out how i can pass the id to Table 2)

<div id="OrderT" style="display: none;">
        <?php OrderTable(); ?>
    </div>

那么自从js起我现在该做什么只是客户端我不能将id传递给表2的SELECT查询或者我错了吗？也许我需要使用ajax，至少这是我从googleing中读到的...

或者我开始完全错了？



i don'如果没有其他方式重新加载就可以重定向到新页面如果表1中的选择不会重置应该是自我解释我猜想



更新1：可能使用链接header中的变量并传递一些变量？

So what do i do now since js is only Client side i cant pass id to the SELECT query for Table 2 or am i wrong ? Maybe i need to use ajax at least that's what i read from googleing...
Or did i start completely wrong ?

i don't want to redirect to a new page if there is no other way reloading would be okay if the selection from Table 1 won`t reset should be self explaining i guess

Update 1 : Maybe working with variables in link "header"and passing some variable ?

推荐答案

resultsupplier = mysqli_query（

resultsupplier = mysqli_query(

con， SELECT supplier_id，supplier_name，supplier_origin FROM supplier）;
< table < span class =code-attribute> class = table table-dark < span class =code-attribute> id = SupplierTable >
< thead >
< tr >
< th scope = col > ID < / th >
< th 范围 = col > 名称< / th >
< th 范围 = col > 来源< / th >
< / tr >
< / thead >
< tbody >
<？ php
while（

con,"SELECT supplier_id, supplier_name, supplier_origin FROM supplier"); <table class="table table-dark" id="SupplierTable"> <thead> <tr> <th scope="col">ID</th> <th scope="col">Name</th> <th scope="col">Origin</th> </tr> </thead> <tbody> <?php while(

row = mysqli_fetch_array（

row = mysqli_fetch_array(

这篇关于构建像数据表选择的树的最佳方法是什么？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！