I try to get the background-color of the td using while loop. But the code won't execute.
I need to loop until getting the "white" colour as background colour.
This is I have tried:
while ($(row1).children('td:nth-child(' + startIndex + ')').css('background-color') == 'rgba(0,0,0,0)') {
startIndex = startIndex + 1;
}
while ($(row1).children('td:nth-child(' + endIndex + ')').css('background-color') == 'rgba(0,0,0,0)') {
endIndex = endIndex - 1;
}
HTML code:
<thead>
<tr>
<th id="profilepic" data-tag="Image" style="text-align:center;min-width:50px">Image</th>
<th id="empName" data-tag="Employee" style="text-align:center;min-width:50px">Employee</th>
<th id="0000">00:00</th>
<th id="0030">00:30</th>
<th id="0100">01:00</th>
<th id="0130">01:30</th>
<th id="0200">02:00</th>
<th id="0230">02:30</th>
<th id="0300">03:00</th>
<th id="0330">03:30</th>
<th id="0400">04:00</th>
<th id="0430">04:30</th>
<th id="0500">05:00</th>
<th id="0530">05:30</th>
<th id="0600">06:00</th>
<th id="0630">06:30</th>
<th id="0700">07:00</th>
<th id="0730">07:30</th>
<th id="0800">08:00</th>
<th id="0830">08:30</th>
<th id="0900">09:00</th>
<th id="0930">09:30</th>
<th id="1000">10:00</th>
<th id="1030">10:30</th>
<th id="1100">11:00</th>
<th id="1130">11:30</th>
<th id="1200">12:00</th>
<th id="1230">12:30</th>
<th id="1300">13:00</th>
<th id="1330">13:30</th>
<th id="1400">14:00</th>
<th id="1430">14:30</th>
<th id="1500">15:00</th>
<th id="1530">15:30</th>
<th id="1600">16:00</th>
<th id="1630">16:30</th>
<th id="1700">17:00</th>
<th id="1730">17:30</th>
<th id="1800">18:00</th>
<th id="1830">18:30</th>
<th id="1900">19:00</th>
<th id="1930">19:30</th>
<th id="2000">20:00</th>
<th id="2030">20:30</th>
<th id="2100">21:00</th>
<th id="2130">21:30</th>
<th id="2200">22:00</th>
<th id="2230">22:30</th>
<th id="2300">23:00</th>
<th id="2330">23:30</th>
</tr>
</thead>
<tbody id="body1"></tbody>
//Here Iam appending the Row using Jquery
</table>
Related
I want CSS or html to break the columns in a new page lets say after 5th column or any column I want.
I want a table in three pages with page-1 having col-1 to col-5, page-2 with col-6 to col-10 and page-3 with col-11 to col-15
<table class="table">
<thead style="color:#ceb03d">
<tr>
<th id="column_1">column1</th>
<th id="column_2">column2</th>
<th id="column_3">column3</th>
<th id="column_4">column4</th>
<th id="column_5">column5</th>
<th id="column_6">column6</th>
<th id="column_7">column7</th>
<th id="column_8">column8</th>
<th id="column_9">column9</th>
<th id="column_10">column10</th>
<th id="column_11">column11</th>
<th id="column_12">column12</th>
<th id="column_13">column13</th>
<th id="column_14">column14</th>
<th id="column_15">column15</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="item in model.items"> //The table contains several rows.
<td>result1</td>
<td>result2</td>
<td>result3</td>
<td>result4</td>
<td>result5</td>
<td>result6</td>
<td>result7</td>
<td>result8</td>
<td>result9</td>
<td>result10</td>
<td>result11</td>
<td>result12</td>
<td>result13</td>
<td>result14</td>
<td>result15</td>
</tr>
</tbody>
</table>
I want to hide some of the columns in the table below. It is from a wordpress plugin so the ids and classes are predefined. I hope I can solve it with css fx: display:none, but I cant seem to get it to work.
<table cellspacing="0" class="wp-list-table widefat fixed brugere">
<thead>
<tr>
<th class="manage-column column-company_name sortable asc" id="company_name" scope="col" style="">
<span>Virksomhed</span><span class="sorting-indicator"></span>
</th>
<th class="manage-column column-CVR._Nr." id="CVR._Nr." scope="col" style="">CVR. Nr.</th>
<th class="manage-column column-arbejdsområde" id="arbejdsområde" scope="col" style="">Arbejdsområde</th>
<th class="manage-column column-fagområde" id="fagområde" scope="col" style="">Fagområde</th>
<th class="manage-column column-address_zipcode sortable asc" id="address_zipcode" scope="col" style="">
<span>Postnummer</span><span class="sorting-indicator"></span>
</th>
<th class="manage-column column-address_city sortable asc" id="address_city" scope="col" style="">
<span>By</span><span class="sorting-indicator"></span>
</th>
<th class="manage-column column-tlf._nr." id="tlf._nr." scope="col" style="">Tlf. Nr.</th>
<th class="manage-column column-email sortable asc" id="email" scope="col" style="">
<span>Email</span><span class="sorting-indicator"></span>
</th>
<th class="manage-column column-view" id="view" scope="col" style="">Se mere</th>
</tr>
</thead>
<tfoot>
<tr>
<th class="manage-column column-company_name sortable asc" scope="col" style="">
<span>Virksomhed</span><span class="sorting-indicator"></span>
</th>
<th class="manage-column column-CVR._Nr." scope="col" style="">CVR. Nr.</th>
<th class="manage-column column-arbejdsområde" scope="col" style="">Arbejdsområde</th>
<th class="manage-column column-fagområde" scope="col" style="">Fagområde</th>
<th class="manage-column column-address_zipcode sortable asc" scope="col" style="">
<span>Postnummer</span><span class="sorting-indicator"></span>
</th>
<th class="manage-column column-address_city sortable asc" scope="col" style="">
<span>By</span><span class="sorting-indicator"></span>
</th>
<th class="manage-column column-tlf._nr." scope="col" style="">Tlf. Nr.</th>
<th class="manage-column column-email sortable asc" scope="col" style="">
<span>Email</span><span class="sorting-indicator"></span>
</th>
<th class="manage-column column-view" scope="col" style="">Se mere</th>
</tr>
</tfoot>
<tbody class="list:bruger" id="the-list">
<tr class="alternate">
<td class="company_name column-company_name">DHV</td>
<td class="CVR._Nr. column-CVR._Nr.">20891940</td>
<td class="arbejdsområde column-arbejdsområde">Bornholm, Lolland og Falster, Nordsjælland</td>
<td class="fagområde column-fagområde">Gardin, Gulve, fremstilling</td>
<td class="address_zipcode column-address_zipcode">2300</td>
<td class="address_city column-address_city">Kbh S</td>
<td class="tlf._nr. column-tlf._nr."></td>
<td class="email column-email">test#hotmail.com</td>
<td class="view column-view">
Klik her
</td>
</tr>
</tbody>
</table>
You can use the nth-child selector in CSS to hide the columns you need. But in that case you need to hide that same th as well.
CSS:
table tr th:nth-child(1), table tr td:nth-child(1){
display:none;// It will hide the first column of the table
}
Also check this for better understanding https://css-tricks.com/how-nth-child-works/
Try to add in a separate .CSS (and call this .CSS in last in your head) and for example try
#company_name {
display: none; //If it doesn't work try visibility: hidden;
}
from w3school
Question
When I click the table header row, I would like a generic function to get the id of the clicked <th> element, so I don't have to create a separate function for each header item.
I'm using jQuery, and have the following code:
HTML
<div id="title">
<table class="policies sortable">
<thead id="h-th">
<tr id="h-tr">
<th width="3%" id="h-client">Client</th>
<th width="7%" id="h-company-code">Company Code</th>
<th width="9%" id="h-unique-reference">Unique Reference</th>
<th width="8%" id="h-doc-date">Document Date</th>
<th width="8%" id="h-post-date">Posting Date</th>
<th width="7%" id="h-doc-type">Document Type</th>
<th width="5%" id="h-trip-id">Trip Id</th>
<th width="7%" id="h-ticket-no">Ticket Number</th>
<th width="6%" id="h-calc-tax">Calculate Tax</th>
<th width="15%" id="h-passenger-name">Passenger Name</th>
<th width="4%" id="h-error">Valid</th>
<th width="4%" id="h-processed">Processed</th>
<th width="4%" id="h-payment">Payment</th>
<th width="11%" id="h-updated">Updated</th>
</tr>
</thead>
</table>
</div>
JavaScript
$("#h-tr").click(function(item) {
console.log(item);
// get the id of the clicked <th>
});
if you include the th to the selector then you can access the id using $(this)
$("#h-tr th").click(function(item) {
console.log($(this).prop('id'));
});
With plain Vanilla JS
You can call querySelectorAll() on all th elements and use a loop
to iterate and console.log() attributes once the EventListener is
triggered by the element clicked.
document.querySelectorAll('th').forEach(element => {
element.addEventListener('click', () => {
console.log(element.getAttribute('id'))
})
})
th{cursor:pointer}
<div id="title">
<table class="policies sortable">
<thead id="h-th">
<tr id="h-tr">
<th width="3%" id="h-client">Client</th>
<th width="7%" id="h-company-code">Company Code</th>
<th width="9%" id="h-unique-reference">Unique Reference</th>
<th width="8%" id="h-doc-date">Document Date</th>
<th width="8%" id="h-post-date">Posting Date</th>
<th width="7%" id="h-doc-type">Document Type</th>
<th width="5%" id="h-trip-id">Trip Id</th>
<th width="7%" id="h-ticket-no">Ticket Number</th>
<th width="6%" id="h-calc-tax">Calculate Tax</th>
<th width="15%" id="h-passenger-name">Passenger Name</th>
<th width="4%" id="h-error">Valid</th>
<th width="4%" id="h-processed">Processed</th>
<th width="4%" id="h-payment">Payment</th>
<th width="11%" id="h-updated">Updated</th>
</tr>
</thead>
</table>
</div>
<table id="table-DataView-Ceft-History" class="table table-bordered v-table">
<thead>
<tr>
<th style="width:auto;">Date</th>
<th style="width:auto;">MBSL Account No</th>
<th style="width:auto;">Reference No</th>
<th style="width:auto;">Amount(LKR)</th>
<th style="width:auto;">Reason</th>
<th style="width:auto;">Third Party Acc No</th>
<th style="width:auto;">Transfer status</th>
<th style="width:auto;">Target Bank</th>
<th style="width:auto;">Transfer By</th>
</tr>
</thead>
</table>
Using jQuery, it can be done by css method
$('#table-DataView-Ceft-History thead th').css('text-align', 'right');
OR, we can use text-align: right; css property for right alignment of text in th tags
th {
text-align: right;
}
<table id="table-DataView-Ceft-History" class="table table-bordered v-table">
<thead>
<tr>
<th style="width:auto;">Date</th>
<th style="width:auto;">MBSL Account No</th>
<th style="width:auto;">Reference No</th>
<th style="width:auto;">Amount(LKR)</th>
<th style="width:auto;">Reason</th>
<th style="width:auto;">Third Party Acc No</th>
<th style="width:auto;">Transfer status</th>
<th style="width:auto;">Target Bank</th>
<th style="width:auto;">Transfer By</th>
</tr>
</thead>
</table>
I have a dashboard which is contain some information from firebase
and i have a button Like this (more)
and when i click on it, it doesn't work or redirect me to my specific page
this my code in html file
<table class="table table-inverse">
<thead>
<tr>
<th scope="col">First Name</th>
<th scope="col">Last Name</th>
<th scope="col">Email </th>
<th scope="col">Country</th>
<th scope="col">City</th>
<th scope="col">Salary</th>
<th scope="col">ID</th>
<th scope="col">Action</th>
</tr>
</thead>
<tbody >
<tr *ngFor="let item of employees">
<th >{{item.firstName}}</th>
<th >{{item.lastName}}</th>
<th >{{item.email}}</th>
<th >{{item.country}}</th>
<th >{{item.city}}</th>
<th >{{item.salary}}</th>
<th >{{item.key}}</th>
<th> <a href="" [routerLink]="['/employee/employee/]" class="btn btn-primary">more <i class="fa fa-info-circle" ></i>
</a></th>
</tr>
</tbody>
</table>
i have import this in the app.module.ts
import { RouterModule, Routes} from '#angular/router';
And also i added this in the route config
{path:'employee/:id',component:EmployeeInfoComponent},
[routerLink]="['/employee/employee/]" your routerLink not match with your routes it should be like {path:'employee/:id',component:EmployeeInfoComponent}, . And you missed close single quotes.
Try to this [routerLink]="['/employee/, item.key]”