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>
Related
I have this situation
Col 1
Col 2
Col 3
Col 4
Col 5
val 1
val 2
val 3
val 4
val 3
as you can see col 3 and 5 have the same value.
In this case how can I check the values and see if are the same and then hide col 3 giving the following result?
Col 1
Col 2
Col 4
Col 5
val 1
val 2
val 4
val 3
it's been 2 days I'm trying this without any success. Any kind of help is appreciated.
You can get specific column values using:
$("tbody tr:eq(0) td:eq(2)").text()
Note that :eq is 0-based so this is 2nd row, 3rd column. This assumes your th's are in your thead (original html wasn't provided).
You can then access an entire column using
td:nth-child(3)
note that :nth-child is 1-based (to match css nth-child... helpful...)
If your th's are in your thead then you'll need an additional selector for the same thead>th:nth-child(3)
Put together:
// Check if row 1, col3 = row 1, col5
var cell1x3 = $("table>tbody>tr:eq(0)>td:eq(2)").text();
var cell1x5 = $("table>tbody>tr:eq(0)>td:eq(4)").text();
console.log(cell1x3, cell1x5)
if (cell1x3 == cell1x5)
{
console.log("match")
// remove entire column, including th
$("table th:nth-child(3),table td:nth-child(3)").remove();
}
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
th { background-color: #CCC }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<thead>
<tr>
<th>Col 1</th>
<th>Col 2</th>
<th>Col 3</th>
<th>Col 4</th>
<th>Col 5</th>
</tr>
</thead>
<tbody>
<tr>
<td>Val 1</td>
<td>Val 2</td>
<td>Val 3</td>
<td>Val 4</td>
<td>Val 3</td>
</tr>
</tbody>
</table>
you can try to unique the data then only output it
let unique = [...new Set(myArray)]
I am trying to read a html-table with python that looks like this:
+------------+---------+
| ID | Value |
+------------+---------+
| 1 | 12 098 |
| 2 | 20 |
| 3 | 123 456 |
+------------+---------+
In html-code the elements look like this:
<span> 123 456</span>
Pandas reads this as object but I need it to be numeric. I tried:
df_tables=pd.read_html(table_html,header=0,thousands=' ')
and
df_tables=pd.read_html(table_html,header=0,thousands=' ')
But the column is always 'object'.
I tried casting to float:
df_table['Value']=df_table['Value'].apply(pd.to_numeric,errors='coerce')
But that just deleted the values in the columns where there was a blank space.
Subsequently I tried to strip the space from the column before applying to numeric:
df_table=df_table['Value'].map(lambda x: x.strip(' '))
But that doesn't seem to have any effect. I'd prefer to fix this while reading the html but I am happy to accept any solution that gives me a numeric column at this point.
Update:
I can not remove from the source html because there are other columns that contain text.
Try using:
df_table['Value'] = df_table['Value'].str.replace('\D', '').astype(int)
Another way to approach this
import pandas as pd
html_string = """
<table>
<thead>
<tr>
<th>ID</th>
<th>value</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>1 230</td>
</tr>
<tr>
<td>2</td>
<td>100</td>
</tr>
<tr>
<td>3</td>
<td>220</td>
</tr>
</tbody>
</table>
"""
html_string = html_string.replace(" ","")
df_table = pd.read_html(html_string)
dfs = df_table[0]
for (index, row) in dfs.iterrows():
print(float(row[1]))
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");
}
}
}
I have not found the exact example for this so please point me to a link if you have. I had also made a mistake in my prev question so I awarded a correct answer but I still need help!
I want to make a table in HTML be responsive as follows - is it possible with CSS?
<table>
<thead>
<tr>
<td>HEADER Data 1</td>
<td>HEADER Data 2</td>
<td>HEADER Data 3</td>
</tr>
</thead>
<tbody>
<tr>
<td>Row 1 Data 1</td>
<td>Row 1 Data 2</td>
<td>Row 1 Data 3</td>
</tr>
<tr>
<td>Row 2 Data 1</td>
<td>Row 2 Data 2</td>
<td>Row 2 Data 3</td>
</tr>
<tr>
<td>Row 3 Data 1</td>
<td>Row 3 Data 2</td>
<td>Row 3 Data 3</td>
</tr>
</tbody>
</table>
On small screens I want the table responsive so that is places the data as follows:
FROM THIS:
HEADER Data 1 HEADER Data 2 HEADER Data 3
Row 1 Data 1 Row 1 Data 2 Row 1 Data 3
Row 2 Data 1 Row 2 Data 2 Row 2 Data 3
Row 3 Data 1 Row 3 Data 2 Row 3 Data 3
TO THIS:
HEADER Data 1
Row 1 Data 1
Row 2 Data 1
Row 3 Data 1
HEADER Data 2
Row 1 Data 2
Row 2 Data 2
Row 3 Data 2
HEADER Data 3
Row 1 Data 3
Row 2 Data 3
Row 3 Data 3
To split a table into blocks of its columns is not possible with CSS. Therefore Javascript is needed. Like so:
<body>
<h1>Test</h1>
<table id="responsiveTable">
<thead>
<tr>
<td>HEADER Data 1</td>
<td>HEADER Data 2</td>
<td>HEADER Data 3</td>
</tr>
</thead>
<tbody>
<tr>
<td>Row 1 Data 1</td>
<td>Row 1 Data 2</td>
<td>Row 1 Data 3</td>
</tr>
<tr>
<td>Row 2 Data 1</td>
<td>Row 2 Data 2</td>
<td>Row 2 Data 3</td>
</tr>
<tr>
<td>Row 3 Data 1</td>
<td>Row 3 Data 2</td>
<td>Row 3 Data 3</td>
</tr>
</tbody>
</table>
<hr>
<script>
var table = document.getElementById("responsiveTable");
var changeTable = function(e) {
if (document.body.clientWidth < 400) {
if (document.getElementById("responsiveTable")) {
var tr = null;
var td = null;
var cols = [];
for ( i=0; i<table.getElementsByTagName("tr").length; i++ ) {
tr = table.getElementsByTagName("tr")[i];
for ( j=0; j<tr.getElementsByTagName("td").length; j++) {
td = tr.getElementsByTagName("td")[j];
if(cols[j]==null) cols[j]=[];
cols[j][i] = td;
}
}
var divWrapper = document.createElement("div");
divWrapper.id = "divWrapper";
var divCol = null;
var divData = null;
for ( j=0; j<cols.length; j++ ) {
divCol = document.createElement("div");
for ( i=0; i<cols[j].length; i++ ) {
divData = document.createElement("div");
divData.innerHTML = cols[j][i].innerHTML;
divCol.appendChild(divData);
}
divWrapper.appendChild(divCol);
}
document.body.replaceChild(divWrapper, table);
}
} else if (document.getElementById("divWrapper")) {
document.body.replaceChild(table, document.getElementById("divWrapper"));
}
}
window.addEventListener("load", changeTable, true);
window.addEventListener("resize", changeTable, true);
</script>
</body>
Fiddle: http://jsfiddle.net/ch3sqx8j/
Greetings
Axel
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 |
----------------