Javascript 列和表具有相同行高的引导行

Javascript 列和表具有相同行高的引导行,javascript,html,jquery,Javascript,Html,Jquery,我有x个引导行和y个引导列,x和y取决于数据库查询。 在y列中,数据加载到html表中。 因为表格是可编辑的,所以我尝试将表格行高度设置为每个div.row中所有div.column中最高字段的高度 这是我要格式化的页面部分。 因此,我需要访问div.column和div.row中每个html表的每个'tr',检查哪一个是最高的tr,并将此高度应用于同一行中的另一个tr,并对每个div.row应用不同的高度 <div id="main" > <?php $

我有x个引导行和y个引导列,x和y取决于数据库查询。 在y列中,数据加载到html表中。 因为表格是可编辑的,所以我尝试将表格行高度设置为每个div.row中所有div.column中最高字段的高度

这是我要格式化的页面部分。 因此,我需要访问div.column和div.row中每个html表的每个'tr',检查哪一个是最高的tr,并将此高度应用于同一行中的另一个tr,并对每个div.row应用不同的高度

<div id="main" >
<?php

$a=0;
$result = $conn->query($query);
while ($row = $result->fetch_assoc()) {
$task[$a] = ( $row['task'] );
$a++;
}

$b=0;
foreach ($task as $row){
?>  

<?php
$query1 = ("SELECT step FROM somewhere where id = '$id' AND task = '$task'");
$result1 = $conn->query($query1);
$c=0;   
while ($row1 = $result1->fetch_assoc()) {
$step[$c] = ( $row1['step'] );
$c++;}    
           $d=0; 
 ?>
<div class="row">
        <div class="column" >
            <?php
                include'tabelle_index.php'; // first html table of a div.row with the legend
            ?>
        </div>
    <?php                    
        foreach ($step as $row){
    ?>
  
    <?php $st= $step[$b];?>
        <div class="column">
            <?php include'tabelle_data.php'; ?> // html tables with the data from database
        </div>
    <?php
    $d++;
}

  unset($step);
   unset ($c);
?>
</div>

<?php
 $b++;
}
?>


预览:


目前,这段代码对我有效:

jQuery.fn.GetIndex = function() {
    return $(this).parent().children().index($(this));
}



$('.row').each(function(){  

    var rows = $('table tr', this);

    rows.each(function() {
     var i = $(this).GetIndex() + 1;
     var highesttr = 0;
         if(rows.filter(':nth-child(' + i + ')').height() > highesttr) {
          highesttr = $(this).height(); 
        }
    rows.filter(':nth-child(' + i + ')').height(highesttr);
    
   });

}); 

我认为动态高度是不可能的。您可能需要查看CSS属性
display:table cell
jQuery.fn.GetIndex = function() {
    return $(this).parent().children().index($(this));
}



$('.row').each(function(){  

    var rows = $('table tr', this);

    rows.each(function() {
     var i = $(this).GetIndex() + 1;
     var highesttr = 0;
         if(rows.filter(':nth-child(' + i + ')').height() > highesttr) {
          highesttr = $(this).height(); 
        }
    rows.filter(':nth-child(' + i + ')').height(highesttr);
    
   });

});