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
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 currently getting records from multiple table by using join in laravel. But my issue is that the under the teacher name all records will show those have same teacher name others should be in next table like that
e.g
Teacher1 name
id name class subject
1 student1 8 chem
2 student2 9 phy
teacher2 name
3 student3 9 chem
4 student4 11 chem
teacher3 name
......
here is my laravel view
<table class="table">
<thead>
#foreach($students as $student)
<tr style="background-color: #e9e5e4;">
<td colspan="4">{{$student->teacher_name}}</td>
</tr>
<tr>
<th>Name</th>
<th>Class</th>
<th>Subject</th>
</tr>
</thead>
<tbody>
<tr>
<td>{{$student->name }}</td>
<td>{{$student->class}} </td>
<td>{{$student->subject }} </td>
</tr>
#endforeach
</tbody>
</table>
but according to above code I have multiple issues like teacher name is repeating if duplicate entry found in database and I can't make teacher name unique because I need multiple entry of same name , secondly all records are showing under every teacher. my current output is like that
Teacher1 name
id name class subject
1 student1 8 chem
2 student2 9 phy
3 student3 9 chem
4 student4 11 chem
Teacher2 name
id name class subject
1 student1 8 chem
2 student2 9 phy
3 student3 9 chem
4 student4 11 chem
I assume that $students is collection. Then you can use the groupBy
method. You can rewrite your code like this:
#php
$index = 1;
#endphp
#foreach($students->groupBy('teacher_name') as $teacherName => $subStudents)
<h2>{{$teacherName}}</h2>
<table class="table">
<thead>
<tr>
<th>No.</th>
<th>Name</th>
<th>Class</th>
<th>Subject</th>
</tr>
</thead>
<tbody>
#foreach($subStudents as $student)
<tr>
<td>{{$index }}</td>
<td>{{$student->name }}</td>
<td>{{$student->class}} </td>
<td>{{$student->subject }} </td>
</tr>
#php
$index++;
#endphp
#endforeach
</tbody>
</table>
#endforeach
Let me know if that answer your question.
I have tried asking this question previously but moderators closed the question citing it as not clear. Hope this time I make it clear.
I've a services table with up to 1000 services. The table has id & service_title column. So, I basically want to get 10 services each for each alphabet starting from A to Z. If there are fewer than 10 items starting with any particular alphabet than I want to get them all. Also I want them in alphabetical order if possible.
Here's my services table.
So my output table should look something like the one displayed below. For the sake of simplicity I've shown 2 services starting with each alphabet from A to J.
<table border="1">
<caption>Services</caption>
<thead>
<tr>
<th>id</th>
<th>name</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Auditing</td>
</tr>
<tr>
<td>2</td>
<td>Accounting</td>
</tr>
<tr>
<td>3</td>
<td>Brick laying</td>
</tr>
<tr>
<td>4</td>
<td>Builders</td>
</tr>
<tr>
<td>5</td>
<td>Carpet Cleaning</td>
</tr>
<tr>
<td>6</td>
<td>Carpenters</td>
</tr>
<tr>
<td>7</td>
<td>Demolition</td>
</tr>
<tr>
<td>8</td>
<td>Dog Walking</td>
</tr>
<tr>
<td>9</td>
<td>Electrician</td>
</tr>
<tr>
<td>10</td>
<td>Equipment Hire</td>
</tr>
<tr>
<td>11</td>
<td>Fencing & Gates</td>
</tr>
<tr>
<td>12</td>
<td>Fright Services</td>
</tr>
<tr>
<td>13</td>
<td>Gardeners</td>
</tr>
<tr>
<td>14</td>
<td>Gate keepers</td>
</tr>
<tr>
<td>15</td>
<td>Handyman</td>
</tr>
<tr>
<td>16</td>
<td>Health service</td>
</tr>
<tr>
<td>17</td>
<td>Interview Trainer</td>
</tr>
<tr>
<td>18</td>
<td>Iterpersonal Relationship Coach</td>
</tr>
<tr>
<td>19</td>
<td>Joinery Experts</td>
</tr>
<tr>
<td>20</td>
<td>Jacket Maker</td>
</tr>
</tbody>
</table>
Here's the code I've come up with till now
SELECT *
FROM (
SELECT id, service_title,
#count := IF(#value = service_title, #count + 1, 1) AS count
FROM services, (SELECT #count := 1, #value := NULL) a
WHERE services.service_title REGEXP '^[A-z]+$'
) a
WHERE a.count <= 10
Order by service_title
I've listed some services in my sample output table which are not listed in the sample items on the table image, please do not raise that as as issue as I can't display all items on the sample table image.
You may try below query with minor updates from your query -
SELECT *
FROM (SELECT id,
#count := IF(LEFT(#value, 1) = LEFT(service_title, 1), #count + 1, 1) AS cnt,
#value := service_title service_title
FROM services, (SELECT #count := 0, #value := 0) vars
WHERE services.service_title REGEXP '^[A-z]+'
ORDER BY service_title, id
) a
WHERE a.cnt <= 10
Order by service_title, id
Demo.
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>
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 |
----------------