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>
1 answers
solution1
0 2022-01-28 20:30:49
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
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
Create dynamic table with rowspan
How To Add Row Dynamic with Rowspan in Table with JavaScript
Create rowspan in the table in Javascript
How create create effect rowspan in table
How would one create a dynamic html table from a one dimensional array, taking into account rowspan and colspan?
How to add rowspan with dynamic table values in this html table?
Create Complex & Dynamic rowspan in React
Dynamic & Complex rowspan in HTML table
Dynamic Rowspan creation for HTML Table
How do you create dynamic rowspan tables in vuejs?
Related Tags