Iterate table HTML - html

I want to iterate through tbodies into table and compare the content of each row1 with 'B'.
<table>
<tbody>
<tr><th>row1</th><td>A</td></tr>
<tr><th>row2</th><td>A</td></tr>
</tbody>
<tbody>
<tr><th>row1</th><td>B</td></tr>
<tr><th>row2</th><td>B</td></tr>
</tbody>
<tbody>
<tr><th>row1</th><td>C</td></tr>
<tr><th>row2</th><td>C</td></tr>
</tbody>
</table>
When the tbody with row1 content 'B' is found, I want it to disappear with (display:none).
How can I do this?


Var table = document.getElementByName('table').children;
For(b = 1 ; b < table.length() ; b++)
{
Var cells = table[b].children;
for(c = 1 ; c < cells.length() ; c++)
{
If(cells[c].childNodes[0].innerHtml == 'row1')
{
If((cells[c].childNodes[1].innerHtml == 'B')
Console.log("jackpot");
}
}
}

Related

Can I somehow change the order of the tables to be displayed?

I have three tables
<table class="table1">
...
<tbody>
<tr *ngFor="let data of datasource1">
...
</tr>
</tbody>
</table>
<table class="table2">
...
<tbody>
<tr *ngFor="let data of datasource2">
...
</tr>
</tbody>
</table>
<table class="table3">
...
<tbody>
<tr *ngFor="let data of datasource3">
...
</tr>
</tbody>
</table>
and I want to somehow be in control of which table should be displayed in which order, i.e., first table3 then table1 then table2 (or some other order). How would I do that?

Templates can be created for each table and rendered in the required order based on a condition.
Create table templates:
<ng-template name="table1">
<table class="table1">
...
<tbody>
<tr *ngFor="let data of datasource1">
...
</tr>
</tbody>
</table>
</ng-template>
... similarly for table2, 3
I am assuming there is a variable order in your component.ts file which defines the order to use. And
If it's value is 1: order of tables is 1, 2, 3
If it's value is 2: order is 2, 3, 1
If it's value is 3: order is 3, 1, 2
So the html to render in required order could be one of the following as per your case
1.
<ng-container *ngIf="order === 1">
<ng-container *ngTemplateOutlet="table1">
<ng-container *ngTemplateOutlet="table2">
<ng-container *ngTemplateOutlet="table3">
</ng-container>
<ng-container *ngIf="order === 2">
<ng-container *ngTemplateOutlet="table2">
<ng-container *ngTemplateOutlet="table3">
<ng-container *ngTemplateOutlet="table1">
</ng-container>
Note: *ngIf needs to be updated with required condition
.... other conditions
<ng-container *ngTemplateOutlet="order === 1 ? table1 : order === 2 ? table2 : table3">
<ng-container *ngTemplateOutlet="order === 1 ? table2 : order === 2 ? table3 : table1">
<ng-container *ngTemplateOutlet="order === 1 ? table3 : order === 2 ? table1 : table2">

You can use CSS, wrap the tables in a div and apply flex box - display: flex;
Assign tot each table an order - order: 0; order:1; and so on.

html arrange div inside the table

I need a little hand. So basically im trying to arrange the div inside the table but for some reason I could not. I already tried adding tr, td but it keeps messing the code now im here for some assistance.
Here is a sample picture of what I did.
Sample Picture
As you can see timer goes first before the Title or the names. So I want to change their position. I want to the title to appear first before the timer.
Now Here is the sample picture of what I wanted
Here below is the code for the firt picture sample.
<table width="214" border="0" align="center" cellpadding="0" cellspacing="0" style="margin-top: 10px; ">
<tr>
<td height="48" style="background-image:url(template/<?=$core['config']['template'] ?>/images/eventsmenu.png) "><div class="m_title"></div></td>
</tr>
<tr>
<td style="background-image:url(template/<?=$core['config']['template'] ?>/images/bg_snbmid.png); background-repeat:repeat-y; "><ul class="snb_1dep">
<table width="95%" height="119" border="0" cellpadding="0" cellspacing="0" class="gen_table">
<tr>
<td height="69" align="center" valign="top" class="n_back">
<table width="200" border="0" align="center" cellpadding="2" cellspacing="0">
<div id="events">
<script type="text/javascript" src="template/<?=$core['config']['template'] ?>/js/time.js"></script>
<script type="text/javascript">MuEvents.init('00:00:00');</script>
</div>
</table>
</td>
</tr>
<tr>
<td class="n_foot"> </td>
</tr>
</table>
Here is the css if you want to see.
/* Styles */
#left_box_body {
width: 220px;
margin-left: 80px;
margin-top: -100px;
margin-bottom: -90px;
}
#events dt {
padding: 1px 2px;
border-radius: 2px;
margin: 2px 0;
}
#events span {
display:block;
font-size:11px;
}
#events {
margin:5px;
width: 200px;
padding-top: 4px;
padding-left: 10px;
}
.rightfloat { float: right; }
/*
MUCore CSS Start
*/
If you are looking for the timer code here is it below.
var MuEvents = {};
MuEvents.text = [
[lang[0], lang[1]],
[lang[2], lang[3]]
];
MuEvents.sked = [
['Blood Castle', 0, '02:30', '04:30', '06:30', '08:30', '10:30', '12:30', '14:30', '16:30', '18:30', '20:30', '22:30', '22:30'],
['Chaos Castle', 0, '02:40', '04:40', '06:40', '08:40', '10:40', '12:40', '14:40', '16:40', '18:40', '20:40', '22:40', '22:40'],
['Devil Square', 0, '01:00', '03:00', '05:00', '07:00', '09:00', '11:00', '13:00', '15:00', '17:00', '19:00', '21:00', '23:00'],
['Illusion Temple', 0, '01:20', '05:20', '09:20', '13:20', '17:20', '20:20', '21:20', '23:20'],
['Happy Hour', 0, '12:00'],
['BlueEvent', 0, '10:35', '12:05', '13:25', '15:07', '18:25'],
['White Wizard', 1, '13:00', '19:00'],
['Golden Invasion', 1, '23:23', '18:25', '00:00', '06:00', '20:00', '14:05'],
['Red Dragon Invasion', 1, '14:00', '20:00'],
['Loren Deep', 0, '20:00']
];
MuEvents.init = function (e) {
if (typeof e == "string")
var g = new Date(new Date().toString().replace(/\date('H')+:\date('i')+:\date('s')+/g, e));
var f = (typeof e == "number" ? e : (g.getHours() * 60 + g.getMinutes()) * 60 + g.getSeconds()), q = MuEvents.sked, j = [];
for (var a = 0; a < q.length; a++) {
var n = q[a];
for (var k = 2; k < q[a].length; k++) {
var b = 0, p = q[a][k].split(":"), o = (p[0] * 60 + p[1] * 1) * 60, c = q[a][2].split(":");
if (q[a].length - 1 == k && (o - f) < 0) b = 1;
var r = b ? (1440 * 60 - f) + ((c[0] * 60 + c[1] * 1) * 60) : o - f;
if (f <= o || b) {
var l = Math.floor((r / 60) / 60), l = l < 10 ? "0" + l : l, d = Math.floor((r / 60) % 60), d = d < 10 ? "0" + d : d, u = r % 60, u = u < 10 ? "0" + u : u;
j.push('<dt class="event">' + (l == 0 && !q[a][1] && d < 5 ? '<img src="template/default/images/online.png" />' : '') + '<b class="rightfloat">' + q[a][b ? 2 : k] + "</b><b>" + n[0] + '</b><span><div class="rightfloat">' + (l + ":" + d + ":" + u) + "</div>" + (MuEvents.text[q[a][1]][+(l == 0 && d < (q[a][1] ? 1 : 5))]) + "</span>");
break;
};
};
};
document.getElementById("events").innerHTML = j.join("");
setTimeout(function () {
MuEvents.init(f == 86400 ? 1 : ++f);
}, 1000);
};
Im no so sure but im thinking the problem is somewhere here?
<table width="200" border="0" align="center" cellpadding="2" cellspacing="0">
<div id="events">
<script type="text/javascript" src="template/<?=$core['config']['template'] ?>/js/time.js"></script>
<script type="text/javascript">MuEvents.init('00:00:00');</script>
</div>
</table>
EDIT HTML
<div id="events"><dt class="event"><b class="rightfloat">02:30</b><b>Blood Castle</b><span><div class="rightfloat">03:22:35</div>Starts at</span></dt><dt class="event"><b class="rightfloat">02:40</b><b>Chaos Castle</b><span><div class="rightfloat">03:32:35</div>Starts at</span></dt>
<dt
class="event"><b class="rightfloat">01:00</b><b>Devil Square</b><span><div class="rightfloat">01:52:35</div>Starts at</span>
</dt><dt class="event"><b class="rightfloat">23:20</b><b>Illusion Temple</b><span><div class="rightfloat">00:12:35</div>Starts at</span></dt><dt class="event"><b class="rightfloat">12:00</b><b>Happy Hour</b><span><div class="rightfloat">12:52:35</div>Starts at</span></dt>
<dt
class="event"><b class="rightfloat">10:35</b><b>BlueEvent</b><span><div class="rightfloat">11:27:35</div>Starts at</span>
</dt><dt class="event"><b class="rightfloat">13:00</b><b>White Wizard</b><span><div class="rightfloat">13:52:35</div>Starts at</span></dt><dt class="event"><b class="rightfloat">23:23</b><b>Golden Invasion</b><span><div class="rightfloat">00:15:35</div>Starts at</span></dt>
<dt
class="event"><b class="rightfloat">14:00</b><b>Red Dragon Invasion</b><span><div class="rightfloat">14:52:35</div>Starts at</span>
</dt><dt class="event"><b class="rightfloat">20:00</b><b>Loren Deep</b><span><div class="rightfloat">20:52:35</div>Starts at</span></dt>
</div>

Make dynamically generate table stay in form when not enough item in row

I am working with asp.net MVC. I have dynamically generate table with 5 items in a row on my view. But I have a problem when model have not enough 5 items, items width will increase to fill in row like below:
| x | x | x | x | x | (when have >=5 item)
| x | x | (when have <5 item, in this case is 2)
| x | x | (what I want to display)
This is my cshtml code:
<table style="width:100%;height:100%">
#{
int count = 0;
foreach (var thread in Model)
{
if (count % 5 == 0)
{
#:<tr>
}
<td style="width:20%">
//thread details here
</td>
count++;
if (count % 5 == 0)
{
#:</tr>
}
}
}
</table>
I can change to 2 items per row or use fix width in , but it is not my goal.
Can you suggest me some way to improve my table?

I solved it by add more blank <td> in row if my items smaller than 5. Now it display like I want
<table style="width:100%;height:100%">
#{
int count = 0;
foreach (var thread in Model)
{
if (count % 5 == 0)
{
#:<tr>
}
<td style="width:20%">
//thread details here
</td>
count++;
if (count % 5 == 0)
{
#:</tr>
}
}
while (count%5!=0)
{
<td></td>
count++;
}
#:</tr>
}
</table>

spliting data at specified index in two vertical columns

I have array of 20 integers int[] numbers;
I want to display those numbers in two html table columns where first columns should break at 11 number and continue rendering on second, for example
Numbers | Some other data
---------------------------
1 12 | Some data a
2 13 | Some data b
.. 14 | Some data c
10 15 |
11 16 |
I tried something like this
<table>
<tr>
<td>Numbers</td>
<td>Some other data</td>
</tr>
<tr>
#{
int numberscounter= 0;
foreach (var item in numbers){
if (numberscounter< 11) {
numberscounter++;
<tr>
<td>#item.Number</td>
<td>#item.SomeOtherData</td>
</tr>
}
else {
<tr>
<td>#item.Number</td>
<td>#item.SomeOtherData</td>
</tr>
}
}
}
</tr>
</table>

This isn't elegant and I still don't understand what you are trying to do. for example what the some other data is and how you will display it, but to get what you are after (just splitting the numbers at 11 into 2 columns) you could do the following:
Get rid of the array it is not needed and do the following with a for loop
<table>
<tr>
<td colspan="2">Numbers</td>
<td>Some other data</td>
</tr>
#for (int i = 1; i <= 11; i++){
<tr>
<td>#i.ToString()</td>
<td>#(((i + 11) <= 20) ? (i + 11).ToString(): "")</td>
<td>Some other data here (notsure how this is generated)</td>
</tr>
}
</table>
EDIT
(after comments): Ok so you want to use the numbers you have already in the unknown object and keep them in the 2 separate columns....
How about this
#{
//These are my test values. you will need to edit them with your values
int[] intarray = new int[] { 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15 };
var Below11 = intarray.Where(x => x <= 11).OrderBy(x => x).ToArray();
var Above11 = intarray.Where(x => x > 11).OrderBy(x => x).ToArray();
}
<table>
<tr>
<td colspan="2">Numbers</td>
<td>Some other data</td>
</tr>
#for (int i = 0; i <= Math.Max(Below11.Count(), Above11.Count()) - 1; i++)
{
<tr>
<td>#(i < Below11.Count() ? Below11[i].ToString() : "")</td>
<td>#(i < Above11.Count() ? Above11[i].ToString() : "")</td>
<td>Someother data</td>
</tr>
}
</table>

How to create nested cells inside the same table TD

I have the following table:-
<table class="table table-striped">
<thead>
<tr>
<th></th>
</tr>
</thead>
<tbody>
#foreach(var permisionMag in Model.PermisionManagement)
{
<tr>
<td>#permisionMag.Name</td>
#{
int i = 0;
<td class="f">
#foreach(var item in permisionMag.TechnologyTypes.OrderBy(a => a.Name)) {
#(i+1) #item.Name
i = i + 1;
}
<br />
</td>
}
</tr>
}
</tbody>
</table>
But currently i need the second column to have nested rows instead of showing the rows inside the same TD? any advice on this?

You can not generate directly table cells, you have to generate a new table inside the second table cell.
You could also render #item.Name as a span/div and style that to create the illusion of a nested table(jsFiddle example).

You can use rowspan on the first column :
<table class="table table-striped">
<thead>
<tr>
<th></th>
</tr>
</thead>
<tbody>#foreach(var permisionMag in Model.PermisionManagement) {
<tr>
<td rowspan="#permisionMag.TechnologyTypes.Count()">#permisionMag.Name</td>
#{
int i = 0;
foreach (var item in permisionMag.TechnologyTypes.OrderBy(a => a.Name))
{
i = i + 1;
if( i > 1) {
</tr><tr>
}
<td class="f">
#(i+1) #item.Name
</td>
}
}
</tr>
}
</tbody>
</table>
See expecting result
I hope it helps.

If I understand your question, then you probably want to do this:
#foreach(var permisionMag in Model.PermisionManagement) {
<tr>
<td rowspan="#permisionMag.TechnologyTypes.Count()">#permisionMag.Name</td>
#{int i = 0;
#foreach (var item in permisionMag.TechnologyTypes.OrderBy(a => a.Name)) {
<td class="f">
#(i+1) #item.Name
i = i + 1;
</td>
</tr>
<tr>
}
</tr>
}
}
But it should essentially build you something like this:
----------------
| Name | Item1 |
| | ----- |
| | Item2 |
| | ----- |
| | Item3 |
| | ----- |
| | Item4 |
----------------