Aligning data vertically in td elements for horizontally connected rows using jquery
Question
I've html in the below format.
<head><script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script></head>
<script type="text/javascript">
$(document).ready(function(){
var dups = $('.comps + .comps');
dups.remove();
});
var list1 = [1,2,3,4,5,6];
var list2 = [6,5,4,3,2,1];
</script>
<div class="serverSet">
<h2>JH Storefront servers</h2>
<table border="1" class="CSSTableGenerator" class="myTable">
<tr>
<th>Component</th>
<th>Properties</th>
<th class="servers"> lqwasc10 </th>
<th class="servers"> lqwasc11 </th>
</tr>
<tr>
<td class="comps">DeliveryMethodsRepository</td>
<td class="props">externalCacheBatchInfoSize</td>
<tr/>
<tr/>
<td class="comps">InventoryManager</td>
<td class="comps">InventoryManager</td>
<td class="props">itemType</td>
</tr>
<tr>
<td class="comps">InventoryManager</td>
<td class="props">maxConcurrentUpdateRetries</td>
</tr>
<tr>
<td class="comps">CatalogTools</td>
<td class="comps">CatalogTools</td>
<td class="props">queryASAFFabrics</td>
</tr>
<tr>
<td class="comps">CatalogTools</td>
<td class="props">loggingDebug</td>
</tr>
<tr>
<td class="comps">CatalogTools</td>
<td class="props">outOfStockCode</td>
</tr>
<tr>
</table>
</div>
In the above jquery function, list1 and list2 are horizontally connected to lqwasc10 and lqwasc11 respectively. Is there a way I can align list1 and list2 vertically along with existing td elements of Components and Properties in their respective orders.
I've tried a lot and couldn't get hold of the logic. It would be great if someone can answer.
I'm expecting data in the format as shown in the screenshot.
1 answers
solution1
0 2016-09-10 16:03:56
You can merely add the desired <td> s just after removing duplicates, like this:
var list1 = [1,2,3,4,5,6]; var list2 = [6,5,4,3,2,1]; $(document).ready(function(){ $('.comps + .comps').remove(); $('.myTable tr').each(function(i) { if (i > 0) { $(this) .append('<td>' + list1[i - 1] + '</td>') .append('<td>' + list2[i - 1] + '</td>'); } }); });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="serverSet"> <h2>JH Storefront servers</h2> <table border="1" class="myTable"> <tr> <th>Component</th> <th>Properties</th> <th class="servers"> lqwasc10 </th> <th class="servers"> lqwasc11 </th> </tr> <tr> <td class="comps">DeliveryMethodsRepository</td> <td class="props">externalCacheBatchInfoSize</td> </tr> <tr> <td class="comps">InventoryManager</td> <td class="comps">InventoryManager</td> <td class="props">itemType</td> </tr> <tr> <td class="comps">InventoryManager</td> <td class="props">maxConcurrentUpdateRetries</td> </tr> <tr> <td class="comps">CatalogTools</td> <td class="comps">CatalogTools</td> <td class="props">queryASAFFabrics</td> </tr> <tr> <td class="comps">CatalogTools</td> <td class="props">loggingDebug</td> </tr> <tr> <td class="comps">CatalogTools</td> <td class="props">outOfStockCode</td> </tr> </table> </div>
Please note that this snippet works only after correcting HTML errors: <tr> inconsistency (already noticed by comments), duplicate class attribute on <table> .
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.