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>