I'm trying to create the following table structure (Example 1) with AngularJS and ng-repeat. The only requirement I have is that the tbody does not get repeated. The data I'm working with has structure of product.productunit. The left table cell that has a rowspan=3 will display an image and the follow right 3 cells will display product units of that image. The entire table will then be placed in a fixed scrollable grid with fixed header/footers using css: tbody {overflow-y: scroll}. Unfortunately having multiple tbodys between each product breaks apart scrolling as one table as shown in (Example 2) which is non-working.
UPDATE
My question is how to remove the ng-repeat within the tbody. People below voted my question down due to the fact my example shows the ng-repeat together with tbody. I'm asking on how to rewrite my code to render the html correctly like in (Example 1). The end result should allow me to have a table like the following fiddle example link.
jsfiddle.net/TroyAlford/SNKfd
Example 1
<table style="width: 500px; border-style: solid; border-width: 1px">
<tbody>
<tr>
<td rowspan="3" style="width: 250px">
<img src=".." />
</td>
<td>Unit 1</td>
</tr>
<tr>
<td>Unit 2</td>
</tr>
<tr>
<td>Unit 3</td>
</tr>
<tr>
<td rowspan="3" style="width: 250px">
<img src=".." />
</td>
<td>Unit 1</td>
</tr>
<tr>
<td>Unit 2</td>
</tr>
<tr>
<td>Unit 3</td>
</tr>
</tbody>
</table>
This is the AngularJS bound to my nested products and units. I'm also aware of ng-repeat-start and ng-repeat-end which so far I don't think will work?
Second, the example below first must repeat a TR for each product with a nested TDs for each unit.
Example 2
<div class="scrollable-table-wrapper">
<table id="tablegrid">
<thead>
<tr>
<th>Product</th>
<th>Unit</th>
</tr>
</thead>
<!-- my issue is here with tbody repeated for each product -->
<tbody ng-repeat="product in productsList">
<tr ng-repeat="resProductUnit in product.ResProductUnits">
<!-- place first cell with rowspan to match units length -->
<td ng-if="$index == 0" rowspan="{{product.ResProductUnits.length}}">
<img src="{{ product.ImageGalleryId }}" />
</td>
<!-- /ResProductUnits -->
<td>
<label>Unit: {{resProductUnit.Title}}</label>
</td>
</tr>
<!-- /ResProductUnits-->
</tbody>
</table>
</div>
ng-repeat repeats the element it is declared on. Try moving your ng-repeat's to the <tr>'s and <td>'s.
If you want a separate table for each product, place the outer ng-repeat on the <table> element.
Related
I have the following React JSX code for a table:
<table>
<tr>
<td>col1</td>
<td>col2</td>
<td>col3</td>
</tr>
</table>
And I want to add a footer with 2 columns filling up the entire width but I'm having trouble doing that. I tried colspan but its not working as expected. How can I do this?
You can do this with colspan, all you need to take into account is that colspan should be integers (1,2,3) and cannot have something like 1.5.
So the trick is to also use colspan in your first row and give them all a colspan of 2, such that the total is 6 which you can divide by two columns of 3.
<table border="1">
<tr>
<td colspan="2">col1</td>
<td colspan="2">col2</td>
<td colspan="2">col3</td>
</tr>
<tr>
<td colspan="3">footer1</td>
<td colspan="3" >footer2</td>
</tr>
</table>
Just colspan your footer cell on all the 3 cells. Then add a separate table within that footer table and make 2 columns. Don't forget to make that inner table as lean as possible (no border, no margin, .. as you need it)
<table border="1">
<tr>
<td>col1</td>
<td width="400">col2</td>
<td>col3</td>
</tr>
<tr>
<td colspan="3">
<table width="100%">
<tr>
<td width="50%">footer left</td>
<td width="50%">footer right</td>
</tr>
</table>
</td>
</tr>
</table>
I have a list in a table that is alphabetically ordered like so.
<tbody>
<tr>
<th><strong>A</strong></th>
</tr>
<tr>
<td class="hide-me">Ants</td>
</tr>
<tr>
<td class="hide-me">Animals</td>
</tr>
<tr>
<td class="hide-me">Apples</td>
</tr>
<tr>
<th><strong>B</strong></th>
</tr>
<tr>
<td>Bars</td>
</tr>
<tr>
<td class="hide-me">Bats</td>
</tr>
<tr>
<td class="hide-me">Bananas</td>
</tr>
<tr>
<th><strong>C</strong></th>
</tr>
<tr>
<td>Cans</td>
</tr>
<tr>
<td>Cars</td>
</tr>
<tr>
<td>Cats</td>
</tr>
</tbody>
I use the $('table tr:has(td.hide-me)').hide() method to hide any of the elements that I don't want shown. However I also want to be able to hide the table headers if the table rows that contain normal table cells are hidden.
In the case above I would like to hide <tr><th><strong>A</strong></th></tr> because it has all of the following table rows hidden but not the the <tr><th><strong>B</strong></th></tr> because not all of the table rows are hidden.
I am relatively new to Jquery and am not sure how best implement conditional statements for a situation like this.
The first thing I did was put a class on the tr to indicate that that row contained a header. This makes it much easier to tell which rows are headers, rather than having to interrogate if they contain a th.
The second thing I did was change your hide expression for the .hide-me to find the hide me first, then find their parent trs, and hide them. This way the selector doesn't have to find the tr and check if each one has a hide me.
Then finally the logic finds all the headers, and shows them, so if any were previously hidden, they would be visible. It then filters the headers and only returns the ones that do not have any following trs that are not hidden. Havin the headers that do not have any visible following trs, it then hides them.
$('.hide-me').closest('tr').hide();
$('.header').show().filter(function(){
return $(this).nextUntil('.header').filter(':not(:hidden)').length < 1;
}).hide();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tbody>
<tr class="header">
<th><strong>A</strong></th>
</tr>
<tr>
<td class="hide-me">Ants</td>
</tr>
<tr>
<td class="hide-me">Animals</td>
</tr>
<tr>
<td class="hide-me">Apples</td>
</tr>
<tr class="header">
<th><strong>B</strong></th>
</tr>
<tr>
<td>Bars</td>
</tr>
<tr>
<td class="hide-me">Bats</td>
</tr>
<tr>
<td class="hide-me">Bananas</td>
</tr>
<tr class="header">
<th><strong>C</strong></th>
</tr>
<tr>
<td>Cans</td>
</tr>
<tr>
<td>Cars</td>
</tr>
<tr>
<td>Cats</td>
</tr>
</tbody>
</table>
I am replacing a plain HTML table like the one in the snippet below with an Angular.js ui-grid
<table border="1">
<thead>
<tr>
<th>col1</th>
<th>col2</th>
<th>col3</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="row in rows">
<td colspan="3">
table data goes here...
</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="3" style="text-align: center">
Footer heading
</td>
</tr>
<tr>
<td>Sum of col1</td>
<td>Sum of col2</td>
<td>Sum of col3</td>
</tr>
<tr>
<td colspan="3" style="text-align: right">
Footer notes
</td>
</tr>
</tfoot>
</table>
As you can see the footer layout is not very simple. I have seen that is possible to customize the gridFooterTemplate and the single columns footerTemplate. However the grid footer is always placed below the columns footer.
Is it possible to place the grid footer above the columns footer? Alternatively can I create a grid footer template that encloses the columns footer?
Is there any possibility to Highlight a table row without external JS Library but using just JavaScript?
<table>
<tr>
<th>Nom</th>
<th>n°</th>
</tr>
<tr class="item">
<td class="listeitem">Denis PAPIN</td>
<td class="listeitem">7</td>
</tr>
<tr class="item">
<td class="listeitem">Albert EINSTEIN</td>
<td class="listeitem">2</td>
</tr>
<tr class="item">
<td class="listeitem">Nikola TESLA</td>
<td class="listeitem">18</td>
</tr>
(…)
</table>
Add a class to the row you want to highlight? We need some context here. But yes it's entirely possible
I am dynamically creating an html table using asp.net and the page source is below.
<table id="MainTable" border="2" class="tdclass">
<tr>
<th><img src="arrow.png" /></th>
<td colspan="4">Title 1</td>
<td id="1" style="Display:none">1</td>
<td>0</td>
</tr>
<tr>
<th><img src="arrow.png" /></th>
<td colspan="3">Title 2</td>
<td id="2" style="Display:none">2</td>
<td>1</td>
</tr>
<tr>
<th><img src="arrow.png" /></th>
<td colspan="2">Title 3</td>
<td id="3" style="Display:none">3</td>
<td>2</td>
</tr>
I want to compare the td id values of each row with all other td in each row. For example, in the above code, the first row contains the td id value as 1. So this has to be compared with all the other td elements of all the rows. Here the second row contains the matching element which is 1.
So how to write a javascript function to loop through all the rows and find the match? The matching values actualy belongs to child element. So if any match occurs then i can display that row and make the rest of the rows hide. If my question is not clear please let me know.
I have achieved till this.