<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>
Related
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>
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>
Been trying to get my slideDown effect working and hide but somehow it does not work. Basically my user searches for a record and then it will show the result. There will be a button at the top-right of the search to hide the table or show the table again through a slidedown effect.
HTML:
<button type="button" class="toggling" id="togglething"><i class="fa fa-angle-down"></i></button>
<div id="scrolling">
<!--<div id="loading"></div>-->
<table id="results" class="table1" cellspacing=10px>
<thead>
<tr class = "spacing">
<th class='headers'>Index No</th>
<th class='headers'>SAM ID</th>
<th class='headers'>Item Description</th>
<th class='headers'>Type</th>
<th class='headers'>Inventory Status</th>
<th class='headers'>Issued QTY</th>
<th class='headers'>Opening QTY</th>
<th class='headers'>Closing QTY</th>
<th class='headers'>Corrupted QTY</th>
<th class='headers'>Date In</th>
<th class='headers'>Date Out</th>
<th class='headers'>Remarks</th>
<th class='headers'>NTA SAM Reference No.</th>
<th class='headers' colspan="2">Action to take</th>
</tr>
</thead>
<tbody id="bResults"></tbody>
</table>
</div>
JS:
$('#togglething').click(function(){
if ( $( ".table1" ).is( ":hidden" ) ) {
$( ".table1" ).slideDown( "slow" );
} else {
$( ".table1" ).hide();
}
$(this).find('i').toggleClass('fa-angle-up fa-angle-down')
});
CSS:
.table1 {
display:none;
position:relative;
}
table thead th .text {
position:relative;
}
#table-wrapper {
overflow:auto;
}
#scrolling{
overflow:auto;
}
So I am following jquery documentation on slideDown() but somehow, it does not slide down slowly and neither does it hide after that. I tried using $(document).ready but it does not seem to be the issue either which puzzles me. Does my position in css inteferes with the hide effect or slideDown effect?
Is there some alternative ways to make this work or a solution to enable the effects? Thanks in advance!
Not altogether sure why yours is not working, however if you wrap your table in a div and slidedown / hide that it works as expected. eg:
HTML
<button type="button" class="toggling" id="togglething"><i class="fa fa-angle-down"></i></button>
<div id="scrolling">
<!--<div id="loading"></div>-->
<div class="slide-container">
<table id="results" class="table1" cellspacing="10px">
<thead>
<tr class = "spacing">
<th class='headers'>Index No</th>
<th class='headers'>SAM ID</th>
<th class='headers'>Item Description</th>
<th class='headers'>Type</th>
<th class='headers'>Inventory Status</th>
<th class='headers'>Issued QTY</th>
<th class='headers'>Opening QTY</th>
<th class='headers'>Closing QTY</th>
<th class='headers'>Corrupted QTY</th>
<th class='headers'>Date In</th>
<th class='headers'>Date Out</th>
<th class='headers'>Remarks</th>
<th class='headers'>NTA SAM Reference No.</th>
<th class='headers' colspan="2">Action to take</th>
</tr>
</thead>
<tbody id="bResults">
</tbody>
</table>
</div>
</div>
JS:
$('#togglething').click(function(){
if ( $( ".slide-container" ).is( ":hidden" ) ) {
$( ".slide-container" ).slideDown( 'slow' );
} else {
$( ".slide-container" ).hide();
}
$(this).find('i').toggleClass('fa-angle-up fa-angle-down')
});
CSS:
.slide-container {
display: none;
}
.table1 {
position: relative;
}
table thead th .text {
position: relative;
}
#table-wrapper {
overflow: auto;
}
#scrolling {
overflow: auto;
}
This (somewhat simplified) jQuery code works. Now you can modify it to do what you want.
I have no idea why the the .slideUp() reacts so sluggish, it is something jQuery.
$('#togglething').click(function(){
if ( $( ".table1" ).is( ":visible" ) ) { $( ".table1" ).slideUp() ; }
else { $( ".table1" ).slideDown(); }
$(this).find('i').toggleClass('fa-angle-up fa-angle-down')
});
.table1 {
display:none;
position:relative;
}
table thead th .text {
position:relative;
}
#table-wrapper {
overflow:auto;
}
#scrolling{
overflow:auto;
}
done */
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button type="button" class="toggling" id="togglething"><i class="fa fa-angle-down"></i></button>
<div id="scrolling">
<table id="results" class="table1" cellspacing=10px>
<thead>
<tr class = "spacing">
<th class='headers'>Index No</th>
<th class='headers'>SAM ID</th>
<th class='headers'>Item Description</th>
<th class='headers'>Type</th>
<th class='headers'>Inventory Status</th>
<th class='headers'>Issued QTY</th>
<th class='headers'>Opening QTY</th>
<th class='headers'>Closing QTY</th>
<th class='headers'>Corrupted QTY</th>
<th class='headers'>Date In</th>
<th class='headers'>Date Out</th>
<th class='headers'>Remarks</th>
<th class='headers'>NTA SAM Reference No.</th>
<th class='headers' colspan="2">Action to take</th>
</tr>
</thead>
<tbody id="bResults"></tbody>
</table>
</div>
Setting your .table1 to display:block seems to help with the sliding.
HTML:
<button type="button" class="toggling" id="togglething"><i class="fa fa-angle-down"></i></button>
<table id="results" class="table1" cellspacing="10px" style="display:none; border:1px solid #000">
<thead>
<tr class = "spacing">
<th class='headers'>Index No</th>
<th class='headers'>SAM ID</th>
<th class='headers'>Item Description</th>
<th class='headers'>Type</th>
<th class='headers'>Inventory Status</th>
<th class='headers'>Issued QTY</th>
<th class='headers'>Opening QTY</th>
<th class='headers'>Closing QTY</th>
<th class='headers'>Corrupted QTY</th>
<th class='headers'>Date In</th>
<th class='headers'>Date Out</th>
<th class='headers'>Remarks</th>
<th class='headers'>NTA SAM Reference No.</th>
<th class='headers' colspan="2">Action to take</th>
</tr>
</thead>
<tbody id="bResults">
</tbody>
</table>
jQuery:
$( "#togglething" ).click(function() {
$( "#results" ).slideToggle( "slow");
});
CSS:
.table1 {display:block;}
And a Fiddle
So I want a html table to only show when the user has typed 1 or more letters in an input. So far what I have tried hasn't worked. Here's the html(i haven't included my full table):
<input type="text" id="schoolName" onkeyup="search()" placeholder="Search for names..">
<table class="table">
<thead><tr>
<th title="Field #1">Official Name</th>
<th title="Field #2">Local Name</th>
<th title="Field #3">Address 1</th>
<th title="Field #4">Address 2</th>
<th title="Field #5">Address 3</th>
<th title="Field #6">Address 4</th>
<th title="Field #7">County</th>
</tr></thead>
here's the js:
document.getElementById("search").addEventListener(search);
function search() {
if(document.getElementById("schoolName").value.length>1) {
document.getElementById("table").style.visibility="visible";
} else {
document.getElementById("table").style.visibility="hidden";
}
}
here's the css:
.table{
visibility: hidden;
display: block;
height: 150px;
overflow-y: scroll;
overflow-x: hidden;
}
I don't know know how to make this work, thank you for the help
Try this. Also changed the id in getElementById to one that is actually in your code, and gave table an id.
document.getElementById("schoolName").addEventListener('change', function() {
if (document.getElementById("schoolName").value.length > 1) {
document.getElementById("table1").style.visibility = "visible";
} else {
document.getElementById("table1").style.visibility = "hidden";
}
});
<input type="text" id="schoolName" placeholder="Search for names..">
<table id="table1" class="table">
<thead>
<tr>
<th title="Field #1">Official Name</th>
<th title="Field #2">Local Name</th>
<th title="Field #3">Address 1</th>
<th title="Field #4">Address 2</th>
<th title="Field #5">Address 3</th>
<th title="Field #6">Address 4</th>
<th title="Field #7">County</th>
</tr>
</thead>