两个动态创建的表中行的相等高度，使用JQuery

Posted 2023-05-09

【中文标题】两个动态创建的表中行的相等高度，使用JQuery

【英文标题】：Equal Height of rows in two dynamically created tables,using JQuery

【发布时间】：2021-01-01 04:05:04

【问题描述】：

根据我的要求，我需要创建两个不同的表，它们的行数相同，但数据不同。第一个表将包含商品信息，第二个表将包含有关商品的综合信息，例如上周售出多少商品，库存中有多少等。 我首先使用 jQuery 数据表，因为我需要对项目进行排序，所以使用 jquery 数据表很容易。第二个表是普通表，一旦所有项目都加载到第一个表中，就会创建它。

这是一个例子：

$(document).ready(function()
   var displayShopColumns = [
        "QOH",
        "PO",
        "Sold LW",
        "QTY",
        "Cost"
    ];
     var shopColumns = [
        "qoh",
        "po",
        "sold",
        "qty",
        ""
    ];

        var arr=[
        'itemCread':'202/09/01','imageUrl':'https://picsum.photos/seed/picsum/200/300','description':'test1','manSKU':'654789','moq':'10','cost':'12.36','Retail':'12.36','margin':'0','Category':'Test Category 1','subCat1':'Sub Category 1','subCat2':'Sub Category 2',
      'itemCread':'202/09/01','imageUrl':'https://picsum.photos/seed/picsum/200/300','description':'test1','manSKU':'654789','moq':'10','cost':'12.36','Retail':'12.36','margin':'0','Category':'Test Category 1','subCat1':'Sub Category 1','subCat2':'Sub Category 2','itemCread':'202/09/01','imageUrl':'https://picsum.photos/seed/picsum/200/300','description':'test1','manSKU':'654789','moq':'10','cost':'12.36','Retail':'12.36','margin':'0','Category':'Test Category 1','subCat1':'Sub Category 1','subCat2':'Sub Category 2','itemCread':'202/09/01','imageUrl':'https://picsum.photos/seed/picsum/200/300','description':'test1','manSKU':'654789','moq':'10','cost':'12.36','Retail':'12.36','margin':'0','Category':'Test Category 1','subCat1':'Sub Category 1','subCat2':'Sub Category 2','itemCread':'202/09/01','imageUrl':'https://picsum.photos/seed/picsum/200/300','description':'test1','manSKU':'654789','moq':'10','cost':'12.36','Retail':'12.36','margin':'0','Category':'Test Category 1','subCat1':'Sub Category 1','subCat2':'Sub Category 2','itemCread':'202/09/01','imageUrl':'https://picsum.photos/seed/picsum/200/300','description':'test1','manSKU':'654789','moq':'10','cost':'12.36','Retail':'12.36','margin':'0','Category':'Test Category 1','subCat1':'Sub Category 1','subCat2':'Sub Category 2','itemCread':'202/09/01','imageUrl':'https://picsum.photos/seed/picsum/200/300','description':'test1','manSKU':'654789','moq':'10','cost':'12.36','Retail':'12.36','margin':'0','Category':'Test Category 1','subCat1':'Sub Category 1','subCat2':'Sub Category 2',
            'itemCread':'202/09/01','imageUrl':'https://picsum.photos/seed/picsum/200/300','description':'test1','manSKU':'654789','moq':'10','cost':'12.36','Retail':'12.36','margin':'0','Category':'Test Category 1','subCat1':'Sub Category 1','subCat2':'Sub Category 2','itemCread':'202/09/01','imageUrl':'https://picsum.photos/seed/picsum/200/300','description':'test1','manSKU':'654789','moq':'10','cost':'12.36','Retail':'12.36','margin':'0','Category':'Test Category 1','subCat1':'Sub Category 1','subCat2':'Sub Category 2','itemCread':'202/09/01','imageUrl':'https://picsum.photos/seed/picsum/200/300','description':'test1','manSKU':'654789','moq':'10','cost':'12.36','Retail':'12.36','margin':'0','Category':'Test Category 1','subCat1':'Sub Category 1','subCat2':'Sub Category 2','itemCread':'202/09/01','imageUrl':'https://picsum.photos/seed/picsum/200/300','description':'test1','manSKU':'654789','moq':'10','cost':'12.36','Retail':'12.36','margin':'0','Category':'Test Category 1','subCat1':'Sub Category 1','subCat2':'Sub Category 2','itemCread':'202/09/01','imageUrl':'https://picsum.photos/seed/picsum/200/300','description':'test1','manSKU':'654789','moq':'10','cost':'12.36','Retail':'12.36','margin':'0','Category':'Test Category 1','subCat1':'Sub Category 1','subCat2':'Sub Category 2','itemCread':'202/09/01','imageUrl':'https://picsum.photos/seed/picsum/200/300','description':'test1','manSKU':'654789','moq':'10','cost':'12.36','Retail':'12.36','margin':'0','Category':'Test Category 1','subCat1':'Sub Category 1','subCat2':'Sub Category 2',
      'itemCread':'202/09/01','imageUrl':'https://picsum.photos/seed/picsum/200/300','description':'test1','manSKU':'654789','moq':'10','cost':'12.36','Retail':'12.36','margin':'0','Category':'Test Category 1','subCat1':'Sub Category 1','subCat2':'Sub Category 2','itemCread':'202/09/01','imageUrl':'https://picsum.photos/seed/picsum/200/300','description':'test1','manSKU':'654789','moq':'10','cost':'12.36','Retail':'12.36','margin':'0','Category':'Test Category 1','subCat1':'Sub Category 1','subCat2':'Sub Category 2','itemCread':'202/09/01','imageUrl':'https://picsum.photos/seed/picsum/200/300','description':'test1','manSKU':'654789','moq':'10','cost':'12.36','Retail':'12.36','margin':'0','Category':'Test Category 1','subCat1':'Sub Category 1','subCat2':'Sub Category 2','itemCread':'202/09/01','imageUrl':'https://picsum.photos/seed/picsum/200/300','description':'test1','manSKU':'654789','moq':'10','cost':'12.36','Retail':'12.36','margin':'0','Category':'Test Category 1','subCat1':'Sub Category 1','subCat2':'Sub Category 2','itemCread':'202/09/01','imageUrl':'https://picsum.photos/seed/picsum/200/300','description':'test1','manSKU':'654789','moq':'10','cost':'12.36','Retail':'12.36','margin':'0','Category':'Test Category 1','subCat1':'Sub Category 1','subCat2':'Sub Category 2','itemCread':'202/09/01','imageUrl':'https://picsum.photos/seed/picsum/200/300','description':'test1','manSKU':'654789','moq':'10','cost':'12.36','Retail':'12.36','margin':'0','Category':'Test Category 1','subCat1':'Sub Category 1','subCat2':'Sub Category 2',
      'itemCread':'202/09/01','imageUrl':'https://picsum.photos/seed/picsum/200/300','description':'test1','manSKU':'654789','moq':'10','cost':'12.36','Retail':'12.36','margin':'0','Category':'Test Category 1','subCat1':'Sub Category 1','subCat2':'Sub Category 2','itemCread':'202/09/01','imageUrl':'https://picsum.photos/seed/picsum/200/300','description':'test1','manSKU':'654789','moq':'10','cost':'12.36','Retail':'12.36','margin':'0','Category':'Test Category 1','subCat1':'Sub Category 1','subCat2':'Sub Category 2','itemCread':'202/09/01','imageUrl':'https://picsum.photos/seed/picsum/200/300','description':'test1','manSKU':'654789','moq':'10','cost':'12.36','Retail':'12.36','margin':'0','Category':'Test Category 1','subCat1':'Sub Category 1','subCat2':'Sub Category 2','itemCread':'202/09/01','imageUrl':'https://picsum.photos/seed/picsum/200/300','description':'test1','manSKU':'654789','moq':'10','cost':'12.36','Retail':'12.36','margin':'0','Category':'Test Category 1','subCat1':'Sub Category 1','subCat2':'Sub Category 2','itemCread':'202/09/01','imageUrl':'https://picsum.photos/seed/picsum/200/300','description':'test1','manSKU':'654789','moq':'10','cost':'12.36','Retail':'12.36','margin':'0','Category':'Test Category 1','subCat1':'Sub Category 1','subCat2':'Sub Category 2','itemCread':'202/09/01','imageUrl':'https://picsum.photos/seed/picsum/200/300','description':'test1','manSKU':'654789','moq':'10','cost':'12.36','Retail':'12.36','margin':'0','Category':'Test Category 1','subCat1':'Sub Category 1','subCat2':'Sub Category 2',
      'itemCread':'202/09/01','imageUrl':'https://picsum.photos/seed/picsum/200/300','description':'test1','manSKU':'654789','moq':'10','cost':'12.36','Retail':'12.36','margin':'0','Category':'Test Category 1','subCat1':'Sub Category 1','subCat2':'Sub Category 2','itemCread':'202/09/01','imageUrl':'https://picsum.photos/seed/picsum/200/300','description':'test1','manSKU':'654789','moq':'10','cost':'12.36','Retail':'12.36','margin':'0','Category':'Test Category 1','subCat1':'Sub Category 1','subCat2':'Sub Category 2','itemCread':'202/09/01','imageUrl':'https://picsum.photos/seed/picsum/200/300','description':'test1','manSKU':'654789','moq':'10','cost':'12.36','Retail':'12.36','margin':'0','Category':'Test Category 1','subCat1':'Sub Category 1','subCat2':'Sub Category 2','itemCread':'202/09/01','imageUrl':'https://picsum.photos/seed/picsum/200/300','description':'test1','manSKU':'654789','moq':'10','cost':'12.36','Retail':'12.36','margin':'0','Category':'Test Category 1','subCat1':'Sub Category 1','subCat2':'Sub Category 2','itemCread':'202/09/01','imageUrl':'https://picsum.photos/seed/picsum/200/300','description':'test1','manSKU':'654789','moq':'10','cost':'12.36','Retail':'12.36','margin':'0','Category':'Test Category 1','subCat1':'Sub Category 1','subCat2':'Sub Category 2','itemCread':'202/09/01','imageUrl':'https://picsum.photos/seed/picsum/200/300','description':'test1','manSKU':'654789','moq':'10','cost':'12.36','Retail':'12.36','margin':'0','Category':'Test Category 1','subCat1':'Sub Category 1','subCat2':'Sub Category 2',

    ]
        var tbl = $('#tblItems').DataTable(
            data:arr,
            bStateSave: false,
            columns: [
                 data: "itemCread" ,
                
                    data: "imageUrl",
                    render: function (file_id) 
                        //console.log(file_id);
                        return file_id ?
                            '<img class="gridImg" src="' + file_id + '"/>' :
                            null;
                    ,
                    title: "Img"
                ,
                 data: "description" ,
                 data: "manSKU" ,
                 data: "moq" ,
                 data: "cost" ,
                 data: "Retail" ,
                 data: "margin" ,
                 data: "Category" ,
                 data: "subCat1" ,
                 data: "subCat2" ,
            ],
            select: true,
            "paging": false,
            "ordering": true,
            "info": false,
            "searching": false,
            fnInitComplete: function (oSettings, json) 
              //  window.setLocalStorage('de',JSON.stringify(json));
                //loadShopItemsTemp(json);
                loadOtherTable(oSettings.aiDisplay);
            
        );
        
        
         function loadOtherTable(response)
        
                $('#ddd').html("");
                var rows = "", mainCols="", headerCols = "";
                <!-- var name = "<tr><td colspan='5'style='text-align: center;'>001 - SoHa Kahala</td></tr>"; -->
                <!-- var PONum = "<tr><td >PO#</td><td colspan='4'>001-test1</td></tr>"; -->
                <!-- var sum = "<tr><td colspan='3'>Total <span>64 Units</span></td><td colspan='2'>$150.00</td></tr>"; -->
                <!-- mainCols = name + PONum + sum; -->
                var headerHeight = $('#tblItems thead').find('tr').eq(0).height();
                displayShopColumns.forEach((v, i) =>                 
                    headerCols += "<th> " + v + "</th>";
                );
                //common rows
                //var response = JSON.parse(res);
                for (let row = 0; row < response.length; row++) 
                    var height = $('#tblItems tbody').find('tr').eq(row).height();
                    var isChange = true;
                    if (row > 0 && (row) / 3 == 0) 
                        if (isChange) 
                            isChange = false;
                            height = height - 3;
                         else
                            isChange = true;
                            height = height + 3;
                                        
                    
           
                    rows += "<tr style='height:"+height+"px'>";

                    shopColumns.forEach((val, index) => 
                        var colVal = response[row][val];
                        if (val == "qty")                     
                            rows += "<td class='td-padding' style='padding:0;'><input style='height:" + height +"px ;' class='input-cost' type='text'/></td>";
                         else 
                            
                            rows += "<td class='td-padding'>" + row + "</td>";
                        
                    );
                    rows += "</tr>";
                

                var tabltemp = "<table id='T' class='table-bordered'style='background-color:#f0f0f0;table-layout:fixed;'><thead>" + mainCols + "<tr style='height:" + headerHeight + "px;text-align:center'> " + headerCols + "</tr></thead > <tbody>" + rows + "</tbody></table > ";

                if ($.fn.dataTable.isDataTable('#T')) 
                    table = $('#T').DataTable();
                    table.destroy();
                
                $('#ddd').append(tabltemp);
        
)

.gridImg
            width: 30px;
            height:30px;
        

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script
  src="https://code.jquery.com/jquery-3.5.1.min.js"
  integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0="
  crossorigin="anonymous"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>
  <link href="https://cdn.datatables.net/1.10.21/css/jquery.dataTables.min.css" rel="stylesheet"/>
  <script src="https://cdn.datatables.net/1.10.21/js/jquery.dataTables.min.js"></script>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous"> 
</head>
<body>
   <div class="row">
            <div class="col-md-6">
             <table id="tblItems" class="table-bordered" style="display:block;table-layout:fixed;float:left">
                  <thead>
                      <tr>
                          <th>Item Created</th>
                          <th>Image</th>
                          <th>Item</th>
                          <th>Manf SKU</th>
                          <th>MOQ</th>
                          <th>Cost</th>
                          <th>Retail</th>
                          <th>Margin</th>
                          <th>Cateogry</th>
                          <th>Sub Cat1</th>
                          <th>Sub Cat2</th>
                      </tr>
                  </thead>
                  <tbody>
                  </tbody>
              </table>  
            </div>
            <div id="ddd" class="col-md-3">
            
            
            </div>
          </div>
</body>
</html>

【参考方案1】：

其实你已经很接近了。罪魁祸首似乎是您在第二个表格中包含的文本框。我只需要对您的原始代码进行 2 处更改：

添加此 CSS 规则 tr height: 50px; 以确保 thead 和 tbody 行具有相同的高度。

这是最重要的变化。 我正在从您的文本框高度中减去 2 个像素。因为它似乎是默认边框大小，它相当于 1 个像素，并且由于它有一个顶部和底部边框，它为您的高度变量添加了 2 个额外的像素。

$(document).ready(function()
   var displayShopColumns = [
        "QOH",
        "PO",
        "Sold LW",
        "QTY",
        "Cost"
    ];
     var shopColumns = [
        "qoh",
        "po",
        "sold",
        "qty",
        ""
    ];

        var arr=[
        'itemCread':'202/09/01','imageUrl':'https://picsum.photos/seed/picsum/200/300','description':'test1','manSKU':'654789','moq':'10','cost':'12.36','Retail':'12.36','margin':'0','Category':'Test Category 1','subCat1':'Sub Category 1','subCat2':'Sub Category 2',
      'itemCread':'202/09/01','imageUrl':'https://picsum.photos/seed/picsum/200/300','description':'test1','manSKU':'654789','moq':'10','cost':'12.36','Retail':'12.36','margin':'0','Category':'Test Category 1','subCat1':'Sub Category 1','subCat2':'Sub Category 2','itemCread':'202/09/01','imageUrl':'https://picsum.photos/seed/picsum/200/300','description':'test1','manSKU':'654789','moq':'10','cost':'12.36','Retail':'12.36','margin':'0','Category':'Test Category 1','subCat1':'Sub Category 1','subCat2':'Sub Category 2','itemCread':'202/09/01','imageUrl':'https://picsum.photos/seed/picsum/200/300','description':'test1','manSKU':'654789','moq':'10','cost':'12.36','Retail':'12.36','margin':'0','Category':'Test Category 1','subCat1':'Sub Category 1','subCat2':'Sub Category 2','itemCread':'202/09/01','imageUrl':'https://picsum.photos/seed/picsum/200/300','description':'test1','manSKU':'654789','moq':'10','cost':'12.36','Retail':'12.36','margin':'0','Category':'Test Category 1','subCat1':'Sub Category 1','subCat2':'Sub Category 2','itemCread':'202/09/01','imageUrl':'https://picsum.photos/seed/picsum/200/300','description':'test1','manSKU':'654789','moq':'10','cost':'12.36','Retail':'12.36','margin':'0','Category':'Test Category 1','subCat1':'Sub Category 1','subCat2':'Sub Category 2','itemCread':'202/09/01','imageUrl':'https://picsum.photos/seed/picsum/200/300','description':'test1','manSKU':'654789','moq':'10','cost':'12.36','Retail':'12.36','margin':'0','Category':'Test Category 1','subCat1':'Sub Category 1','subCat2':'Sub Category 2',
            'itemCread':'202/09/01','imageUrl':'https://picsum.photos/seed/picsum/200/300','description':'test1','manSKU':'654789','moq':'10','cost':'12.36','Retail':'12.36','margin':'0','Category':'Test Category 1','subCat1':'Sub Category 1','subCat2':'Sub Category 2','itemCread':'202/09/01','imageUrl':'https://picsum.photos/seed/picsum/200/300','description':'test1','manSKU':'654789','moq':'10','cost':'12.36','Retail':'12.36','margin':'0','Category':'Test Category 1','subCat1':'Sub Category 1','subCat2':'Sub Category 2','itemCread':'202/09/01','imageUrl':'https://picsum.photos/seed/picsum/200/300','description':'test1','manSKU':'654789','moq':'10','cost':'12.36','Retail':'12.36','margin':'0','Category':'Test Category 1','subCat1':'Sub Category 1','subCat2':'Sub Category 2','itemCread':'202/09/01','imageUrl':'https://picsum.photos/seed/picsum/200/300','description':'test1','manSKU':'654789','moq':'10','cost':'12.36','Retail':'12.36','margin':'0','Category':'Test Category 1','subCat1':'Sub Category 1','subCat2':'Sub Category 2','itemCread':'202/09/01','imageUrl':'https://picsum.photos/seed/picsum/200/300','description':'test1','manSKU':'654789','moq':'10','cost':'12.36','Retail':'12.36','margin':'0','Category':'Test Category 1','subCat1':'Sub Category 1','subCat2':'Sub Category 2','itemCread':'202/09/01','imageUrl':'https://picsum.photos/seed/picsum/200/300','description':'test1','manSKU':'654789','moq':'10','cost':'12.36','Retail':'12.36','margin':'0','Category':'Test Category 1','subCat1':'Sub Category 1','subCat2':'Sub Category 2',
      'itemCread':'202/09/01','imageUrl':'https://picsum.photos/seed/picsum/200/300','description':'test1','manSKU':'654789','moq':'10','cost':'12.36','Retail':'12.36','margin':'0','Category':'Test Category 1','subCat1':'Sub Category 1','subCat2':'Sub Category 2','itemCread':'202/09/01','imageUrl':'https://picsum.photos/seed/picsum/200/300','description':'test1','manSKU':'654789','moq':'10','cost':'12.36','Retail':'12.36','margin':'0','Category':'Test Category 1','subCat1':'Sub Category 1','subCat2':'Sub Category 2','itemCread':'202/09/01','imageUrl':'https://picsum.photos/seed/picsum/200/300','description':'test1','manSKU':'654789','moq':'10','cost':'12.36','Retail':'12.36','margin':'0','Category':'Test Category 1','subCat1':'Sub Category 1','subCat2':'Sub Category 2','itemCread':'202/09/01','imageUrl':'https://picsum.photos/seed/picsum/200/300','description':'test1','manSKU':'654789','moq':'10','cost':'12.36','Retail':'12.36','margin':'0','Category':'Test Category 1','subCat1':'Sub Category 1','subCat2':'Sub Category 2','itemCread':'202/09/01','imageUrl':'https://picsum.photos/seed/picsum/200/300','description':'test1','manSKU':'654789','moq':'10','cost':'12.36','Retail':'12.36','margin':'0','Category':'Test Category 1','subCat1':'Sub Category 1','subCat2':'Sub Category 2','itemCread':'202/09/01','imageUrl':'https://picsum.photos/seed/picsum/200/300','description':'test1','manSKU':'654789','moq':'10','cost':'12.36','Retail':'12.36','margin':'0','Category':'Test Category 1','subCat1':'Sub Category 1','subCat2':'Sub Category 2',
      'itemCread':'202/09/01','imageUrl':'https://picsum.photos/seed/picsum/200/300','description':'test1','manSKU':'654789','moq':'10','cost':'12.36','Retail':'12.36','margin':'0','Category':'Test Category 1','subCat1':'Sub Category 1','subCat2':'Sub Category 2','itemCread':'202/09/01','imageUrl':'https://picsum.photos/seed/picsum/200/300','description':'test1','manSKU':'654789','moq':'10','cost':'12.36','Retail':'12.36','margin':'0','Category':'Test Category 1','subCat1':'Sub Category 1','subCat2':'Sub Category 2','itemCread':'202/09/01','imageUrl':'https://picsum.photos/seed/picsum/200/300','description':'test1','manSKU':'654789','moq':'10','cost':'12.36','Retail':'12.36','margin':'0','Category':'Test Category 1','subCat1':'Sub Category 1','subCat2':'Sub Category 2','itemCread':'202/09/01','imageUrl':'https://picsum.photos/seed/picsum/200/300','description':'test1','manSKU':'654789','moq':'10','cost':'12.36','Retail':'12.36','margin':'0','Category':'Test Category 1','subCat1':'Sub Category 1','subCat2':'Sub Category 2','itemCread':'202/09/01','imageUrl':'https://picsum.photos/seed/picsum/200/300','description':'test1','manSKU':'654789','moq':'10','cost':'12.36','Retail':'12.36','margin':'0','Category':'Test Category 1','subCat1':'Sub Category 1','subCat2':'Sub Category 2','itemCread':'202/09/01','imageUrl':'https://picsum.photos/seed/picsum/200/300','description':'test1','manSKU':'654789','moq':'10','cost':'12.36','Retail':'12.36','margin':'0','Category':'Test Category 1','subCat1':'Sub Category 1','subCat2':'Sub Category 2',
      'itemCread':'202/09/01','imageUrl':'https://picsum.photos/seed/picsum/200/300','description':'test1','manSKU':'654789','moq':'10','cost':'12.36','Retail':'12.36','margin':'0','Category':'Test Category 1','subCat1':'Sub Category 1','subCat2':'Sub Category 2','itemCread':'202/09/01','imageUrl':'https://picsum.photos/seed/picsum/200/300','description':'test1','manSKU':'654789','moq':'10','cost':'12.36','Retail':'12.36','margin':'0','Category':'Test Category 1','subCat1':'Sub Category 1','subCat2':'Sub Category 2','itemCread':'202/09/01','imageUrl':'https://picsum.photos/seed/picsum/200/300','description':'test1','manSKU':'654789','moq':'10','cost':'12.36','Retail':'12.36','margin':'0','Category':'Test Category 1','subCat1':'Sub Category 1','subCat2':'Sub Category 2','itemCread':'202/09/01','imageUrl':'https://picsum.photos/seed/picsum/200/300','description':'test1','manSKU':'654789','moq':'10','cost':'12.36','Retail':'12.36','margin':'0','Category':'Test Category 1','subCat1':'Sub Category 1','subCat2':'Sub Category 2','itemCread':'202/09/01','imageUrl':'https://picsum.photos/seed/picsum/200/300','description':'test1','manSKU':'654789','moq':'10','cost':'12.36','Retail':'12.36','margin':'0','Category':'Test Category 1','subCat1':'Sub Category 1','subCat2':'Sub Category 2','itemCread':'202/09/01','imageUrl':'https://picsum.photos/seed/picsum/200/300','description':'test1','manSKU':'654789','moq':'10','cost':'12.36','Retail':'12.36','margin':'0','Category':'Test Category 1','subCat1':'Sub Category 1','subCat2':'Sub Category 2',

    ]
        var tbl = $('#tblItems').DataTable(
            data:arr,
            bStateSave: false,
            columns: [
                 data: "itemCread" ,
                
                    data: "imageUrl",
                    render: function (file_id) 
                        //console.log(file_id);
                        return file_id ?
                            '<img class="gridImg" src="' + file_id + '"/>' :
                            null;
                    ,
                    title: "Img"
                ,
                 data: "description" ,
                 data: "manSKU" ,
                 data: "moq" ,
                 data: "cost" ,
                 data: "Retail" ,
                 data: "margin" ,
                 data: "Category" ,
                 data: "subCat1" ,
                 data: "subCat2" ,
            ],
            select: true,
            "paging": false,
            "ordering": true,
            "info": false,
            "searching": false,
            fnInitComplete: function (oSettings, json) 
              //  window.setLocalStorage('de',JSON.stringify(json));
                //loadShopItemsTemp(json);
                loadOtherTable(oSettings.aiDisplay);
            
        );
        
        
         function loadOtherTable(response)
        
                $('#ddd').html("");
                var rows = "", mainCols="", headerCols = "";
                <!-- var name = "<tr><td colspan='5'style='text-align: center;'>001 - SoHa Kahala</td></tr>"; -->
                <!-- var PONum = "<tr><td >PO#</td><td colspan='4'>001-test1</td></tr>"; -->
                <!-- var sum = "<tr><td colspan='3'>Total <span>64 Units</span></td><td colspan='2'>$150.00</td></tr>"; -->
                <!-- mainCols = name + PONum + sum; -->
                var headerHeight = $('#tblItems thead').find('tr').eq(0).height();
                displayShopColumns.forEach((v, i) =>                 
                    headerCols += "<th> " + v + "</th>";
                );
                //common rows
                //var response = JSON.parse(res);
                for (let row = 0; row < response.length; row++) 
                    var height = $('#tblItems tbody').find('tr').eq(row).height();
                    var isChange = true;
                    if (row > 0 && (row) / 3 == 0) 
                        if (isChange) 
                            isChange = false;
                            height = height - 3;
                         else
                            isChange = true;
                            height = height + 3;
                                        
                    
           
                    rows += "<tr style='height:"+height+"px'>";

                    shopColumns.forEach((val, index) => 
                        var colVal = response[row][val];
                        if (val == "qty")                     
                            rows += "<td class='td-padding' style='padding:0;'><input style='height:" + (height - 2) +"px ;' class='input-cost' type='text'/></td>";
                         else 
                            
                            rows += "<td class='td-padding'>" + row + "</td>";
                        
                    );
                    rows += "</tr>";
                

                var tabltemp = "<table id='T' class='table-bordered'style='background-color:#f0f0f0;table-layout:fixed;'><thead>" + mainCols + "<tr style='height:" + headerHeight + "px;text-align:center'> " + headerCols + "</tr></thead > <tbody>" + rows + "</tbody></table > ";

                if ($.fn.dataTable.isDataTable('#T')) 
                    table = $('#T').DataTable();
                    table.destroy();
                
                $('#ddd').append(tabltemp);
        
)

.gridImg 
    width: 30px;
    height:30px;


tr  height: 50px; 

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script
  src="https://code.jquery.com/jquery-3.5.1.min.js"
  integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0="
  crossorigin="anonymous"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>
  <link href="https://cdn.datatables.net/1.10.21/css/jquery.dataTables.min.css" rel="stylesheet"/>
  <script src="https://cdn.datatables.net/1.10.21/js/jquery.dataTables.min.js"></script>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous"> 
</head>
<body>
   <div class="row">
            <div class="col-md-6">
             <table id="tblItems" class="table-bordered" style="display:block;table-layout:fixed;float:left">
                  <thead>
                      <tr>
                          <th>Item Created</th>
                          <th>Image</th>
                          <th>Item</th>
                          <th>Manf SKU</th>
                          <th>MOQ</th>
                          <th>Cost</th>
                          <th>Retail</th>
                          <th>Margin</th>
                          <th>Cateogry</th>
                          <th>Sub Cat1</th>
                          <th>Sub Cat2</th>
                      </tr>
                  </thead>
                  <tbody>
                  </tbody>
              </table>  
            </div>
            <div id="ddd" class="col-md-3">
            
            
            </div>
          </div>
</body>
</html>