How to create dynamic table with rowspan in javascript

Question

How to create a fully dynamic table with dynamic rowspan ? My data will change according to user search and the data shown below is just a sample only. Sample data and partially dynamic code is below I would like to make it fully dymnamic. please help me to make it fully dynamic so that I can display the content efficiently.

<html>
    <script
              src="https://code.jquery.com/jquery-3.6.0.min.js"
              integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4="
              crossorigin="anonymous"></script>
              <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.2/js/bootstrap.min.js" integrity="sha512-28e47INXBDaAH0F91T8tup57lcH+iIqq9Fefp6/p+6cgF7RKnqIMSmZqZKceq7WWo9upYMBLMYyMsFq7zHGlug==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
              <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.2/css/bootstrap.css" integrity="sha512-Fik9pU5hBUfoYn2t6ApwzFypxHnCXco3i5u+xgHcBw7WFm0LI8umZ4dcZ7XYj9b9AXCQbll9Xre4dpzKh4nvAQ==" crossorigin="anonymous" referrerpolicy="no-referrer" />
    <body>
        <script>
            $(document).ready(function(){
                var data = [];
                    data[0] = ["text1","cat1","121 AA","50"];
                    data[1] = ["text1","cat1","125 BB","45"];
                    data[2] = ["text2","cat2","214 CC","27"];
                    data[3] = ["text3","cat3","245 KP","31"];
                    data[4] = ["text4","cat4","425 DD","43"];
                    data[5] = ["text4","cat4","111 CC","95"];
                    data[6] = ["text5","cat5","222 EE","64"];
                    data[7] = ["text6","cat6","425 FF","72"];
                var htmls= "";
                htmls = "<table class='table table-hover table-bordered'>"+
                            "<tr>"+
                            "<th>TITE 1</th>"+
                            "<th>TITE 2</th>"+
                            "<th>TITE 3</th>"+
                            "<th>TITE 4</th>"+
                            "</tr>";
                for(var i=0;i<data.length;i++){
                    if(i==0 || i==1){
                        var i2 = 1+1;
                        htmls +="<tr>"+
                        "<td rowspan='2'>"+data[i][0]+"</td>"+
                        "<td  rowspan='2'>"+data[i][1]+"</td>"+
                        "<td>"+data[i][2]+"</td>"+
                        "<td>"+data[i][3]+"</td>"+
                        "</tr>";
                        htmls +="<tr>"+
                        "<td>"+data[i2][2]+"</td>"+
                        "<td>"+data[i2][3]+"</td>"+
                        "</tr>";
                        i=i+1;  
                    } 
                    else if(i==4 || i==5){
                        htmls +="<tr>"+
                        "<td rowspan='2'>"+data[i][0]+"</td>"+
                        "<td  rowspan='2'>"+data[i][1]+"</td>"+
                        "<td>"+data[i][2]+"</td>"+
                        "<td>"+data[i][3]+"</td>"+
                        "</tr>";
                        htmls +="<tr>"+
                        "<td>"+data[i+1][2]+"</td>"+
                        "<td>"+data[i+1][3]+"</td>"+
                        "</tr>";
                        i=i+1;  
                    }
                    else{
                        htmls +="<tr>"+
                        "<td>"+data[i][0]+"</td>"+
                        "<td>"+data[i][1]+"</td>"+
                        "<td>"+data[i][2]+"</td>"+
                        "<td>"+data[i][3]+"</td>"+
                        "</tr>";
                    }
                }
                $("#htmls").html(htmls);
            });
        </script>
        <div id='htmls'></div>
    </body>
</html>

Twisty · Accepted Answer · 2022-01-28 20:30:49Z

Consider the following.

$(function() {
  var data = [];
  data[0] = ["text1", "cat1", "121 AA", "50"];
  data[1] = ["text1", "cat1", "125 BB", "45"];
  data[2] = ["text2", "cat2", "214 CC", "27"];
  data[3] = ["text3", "cat3", "245 KP", "31"];
  data[4] = ["text4", "cat4", "425 DD", "43"];
  data[5] = ["text4", "cat4", "111 CC", "95"];
  data[6] = ["text5", "cat5", "222 EE", "64"];
  data[7] = ["text6", "cat6", "425 FF", "72"];

  function getCatCount(c) {
    var results = 0;
    $.each(data, function(i, r) {
      if (r[1] == c) {
        results++;
      }
    });
    return results;
  }

  var table = $("<table>", {
    class: "table table-hover table-bordered"
  });
  var head = $("<thead>").appendTo(table);
  var body = $("<tbody>").appendTo(table);

  $("<tr>").appendTo(head);
  $("<th>").html("Title 1").appendTo($("tr", head));
  $("<th>").html("Title 2").appendTo($("tr", head));
  $("<th>").html("Title 3").appendTo($("tr", head));
  $("<th>").html("Title 4").appendTo($("tr", head));

  var currentCat = "";

  $.each(data, function(i, r) {
    var row = $("<tr>").appendTo(body);
    if (r[1] != currentCat) {
      currentCat = r[1];
      $.each(r, function(j, c) {
        if (j < 2) {
          $("<td>", {
            rowspan: getCatCount(currentCat)
          }).html(c).appendTo(row);
        } else {
          $("<td>").html(c).appendTo(row);
        }
      });
    } else {
      $.each(r, function(j, c) {
        if (j >= 2) {
          $("<td>").html(c).appendTo(row);
        }
      });
    }
  });

  $("#htmls").html(table);
});

<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.2/js/bootstrap.min.js" integrity="sha512-28e47INXBDaAH0F91T8tup57lcH+iIqq9Fefp6/p+6cgF7RKnqIMSmZqZKceq7WWo9upYMBLMYyMsFq7zHGlug==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.2/css/bootstrap.css" integrity="sha512-Fik9pU5hBUfoYn2t6ApwzFypxHnCXco3i5u+xgHcBw7WFm0LI8umZ4dcZ7XYj9b9AXCQbll9Xre4dpzKh4nvAQ==" crossorigin="anonymous" referrerpolicy="no-referrer"
/>
<div id='htmls'></div>

This uses more jQuery to build the table. You need a bit more complex logic to build the rowspans. 1. You need to know how many categories there will be for each Category. 2. You need to conditionally build the rows in relationship to each other.

The Logic I used is based on the following example: https://jqueryui.com/autocomplete/#categories

Collectives™ on Stack Overflow

How to create dynamic table with rowspan in javascript

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related