Without Jquery or any JavaScript library i need to hide the rows of a simple html table except for the table head on page load.
if your table is correctly marked up.
You can do something like :
document.getElementById('yourtable')
.getElementsByTagName('tbody')[0]
.style.display = 'none';
Then put this on an 'onload' event
You could also do it in CSS + Javascript by setting a global .js class to your tag and then use CSS selector.
html.js #yourtable tbody
{
display: none;
}
<style type="text/css">
.mytable tr {
display: none;
}
</style>
Just kidding. Here we go:
<table border="1" id="mytable">
<th>
<td>asd</td>
<td>asd</td>
</th>
<tr>
<td>asdkjas</td>
<td>asdasdjwa</td>
</tr>
<tr>
<td>asdkjas</td>
<td>asdasdjwa</td>
</tr>
</table>
<script type="text/javascript">
window.onload=function(){
hideTableRows();
}
function hideTableRows() {
var myTableRows = document.getElementById("mytable").getElementsByTagName("tr");
for(i=0;i< myTableRows.length;i++) {
myTableRows[i].style.display = "none";
}
}
</script>
I think a table requires rows, won't display with just headers.. I could suggest adding a blank row at the start of the table, and changing "i" in the for loop to 1. That way the first row should be skipped.
HTH
Marko
No particular need to resort to javascript, you can do the trick through CSS too:
#table_id tr
{
display:none;
}
This should hide all TRs not TH.
Related
I have the following piece of code:
<tr>
<td style="display:none;" id="missing_person_report_label"><b>Enter image</b></td>
<td style="display:none;" id="missing_person_report_image"><input type="file"><br/></td>
</tr>
These td elements are initially set as hidden and are only displayed when I'm selecting the "Missing Person Report" option from the dropdown menu. The Javascript function to activate these td elements is given as:
function checkForChange(that) {
if (that.value == "missing_person_report") {
console.log(that.value);
console.log('person');
document.getElementById("missing_person_report_label").style.display = "block";
document.getElementById("missing_person_report_image").style.display = "block";
}
}
The code is doing as intended but there is a problem with the alignment of the tr element. This is the screenshot of the webpage.
I want the Choose file to have the same alignment as all the above elements,i.e. I want the Choose file to be on the right side of the Enter Image label . How do I do it?
Edit: Full Code is available here:
Edit: Those who are saying that I should assign the style to tr instead of td, I already tried doing this. If I do this, the webpage looks like this:
I want all the elements on the right to have the same alignment.
#Ronith.
Actially you their CSS as block, so that's why they are on separated lines. You should set display = "table-cell"
table {
width: 100%;
}
td {
display: table-cell;
}
<table>
<tr>
<td
id="missing_person_report_label"><b>Enter image</b></td>
<td
id="missing_person_report_image"><input type="file"></td>
</tr>
</table>
P.S.: do not pay attention that display is in CSS. It's just for instance. You should set it from JS code as you wish
display:block; makes a html element to take the full width of it's parent. So, you made tds to block level element they took all the width available and the upper one pushed the second one below.
Solution is not to change it's default display property. However try with inline-block or table-cell; which is the default property for tds inside a table.
The issue is because of display:block in javascript. set display: inline-block in your javascript code:
document.getElementById("missing_person_report_label").style.display = "inline-block";
document.getElementById("missing_person_report_image").style.display = "inline-block";
try this - apply display none to tr and not the td and from the function display block it again
<tr style="display:none;" id="missing_person_report_row">
<td><b>Enter image</b></td>
<td><input type="file"><br/></td>
</tr>
Function
function checkForChange(that) {
if (that.value == "missing_person_report") {
console.log(that.value);
console.log('person');
document.getElementById("missing_person_report_row").style.display = "block";
}
}
If I do the following is fine:
<div id="results">
<p>Hello<br>there</p>
</div>
$($("#results p").children('br').get(0).nextSibling).remove();
I get: hello
But if I do:
<th class="infobox">Head</th>
<td>Hello<br>there</td>
var newLineRemove = $(".infobox td").children('br').get(0).nextSibling();
$wikiDOM.find(newLineRemove).remove();
Gives me
Uncaught TypeError: Cannot read property 'nextSibling' of undefined
That is because .get(...) returns a DOM element not a jQuery object.
In the first example you're using $(...) to convert that DOM element to a jQuery object but you're not doing that in the second example.
This will convert the DOM element to a jQuery element and get rid of the error
var newLineRemove = $($(".infobox td").children('br').get(0).nextSibling);
But it won't do what you want it to do because as #Forty3 said "the <td> isn't inside the ..infobox"
This seems to work but I've probably made things more complicated then they have to be:
$(function(){
var td = $(".infobox").next();
if(td.find("br").length){
$(td.contents().get().reverse()).each(function(){
$(this).remove();
if(this.tagName == "BR"){
return false;
}
});
}
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<th class="infobox"></th>
<td>Hello<br>there</td>
</table>
I've simplest solution for this, try this one:
$('td').each(function() {
$(this).html($(this).html().split('<br>')[0]);
});
li {
margin-bottom: 10px;
}
#usp-custom-3 {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<table>
<tr>
<th class="infobox"></th>
</tr>
<tr>
<td>Hell
<br>there</td>
</tr>
<tr>
<td>Hello
<br>there<br>there</td>
</tr>
</table>
Your code doesn't work because the ".infobox td" selector is looking for a td element inside an .infobox element, but in your HTML the td immediately follows the .infobox.
If you want something that is very similar to your existing JS but working with that HTML (noting that td and th elements need to be inside a tr in a table) you can do this:
$($(".infobox").next().children("br")[0].nextSibling).remove()
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table>
<tr>
<th class="infobox"></th>
<td>Hello<br>there</td>
</tr>
</table>
That is, use .next() to get the element following the .infobox, get that element's child br elements, take the first one's .nextSibling, then wrap it in a jQuery object so that you can call .remove().
EDIT: Note that if there were multiple rows with similar elements the above code would only do the removal on the first one. If it were my code I would probably select all of the relevant elements and then update their HTML something more like this:
$(".infobox").next("td").html(function(i, h) { return h.split('<br>')[0] })
The following script helps to make html tables to have rows of alternating colors:
<script type = "text/javascript">
$(document).ready(function () {
$("tr:even").css("background-color", "#e8eef4");
});
$(document).ready(function () {
$("tr:odd").css("background-color", "#fff");
});
</script>
It works ok, but the problem is that it applies this rule to all tables in its scope, and I'd like it to be applied to several tables only.
How I could apply such a script to specific tables only?
Change your selector (tr:even or tr:odd) to .CLASSNAME tr:even and .CLASSNAME tr:odd - then add CLASSNAME to your containing tables where you want the stripes.
You should forget about using javascript and just use CSS
<style>
.myTable tr:nth-child(even) { background-color: #c5c5c5; }
.myTable tr:nth-child(odd) { background-color: #fff;}
</style>
<table class="myTable">
<tr>
<td>asdf</td>
</tr>
<tr>
<td>asdf</td>
</tr>
<tr>
<td>asdf</td>
</tr>
<tr>
<td>asdf</td>
</tr>
</table>
Here's a fiddle
http://jsfiddle.net/ZxvpX/1/
This will increase performance and reduce overhead simply because it doesn't require any additional libraries for such a menial task.
EDIT
as pointed out this doesn't work in IE. So you will need to load up the jQuery plugin to fix IE's broken system.
<RANT>
COME ON ALREADY MICROSOFT!!! WE ALL KNOW YOUR DEVELOPERS
READ THESE QUESTIONS ON STACKOVERFLOW AND FULLY UNDERSTAND
THE FRUSTRATION BEING EXPRESSED ON A DAILY BASIS.
GET WITH THE PROGRAM ALREADY!
</RANT>
You can narrow the selector and combine your code, like this:
$(document).ready(function () {
$(".selector tr:even").css("background-color", "#e8eef4");
$(".selector tr:odd").css("background-color", "#fff");
});
.selector is an example, but whatever your can identify those tables on will work, or if this is part of an AJAX request, use $("tr:even", context) instead.
Set table classes for the tables you want it applied to such as
<table class="even-odd"/>
<tr></tr>
<tr></tr>
</table>
Then Adjust your jQuery selectors to select all tables with the appropriate class and the descendant tr of that table only.
<script type = "text/javascript">
$(document).ready(function () {
$("table.even-odd tr:even").css("background-color", "#e8eef4");
});
$(document).ready(function () {
$("table.even-odd tr:even").css("background-color", "#fff");
});
</script>
I would personally just suggest using CSS properties
table.even-odd tr:nth-child(even) { background-color: #e8eef4; }
table.even-odd tr:nth-child(odd) { background-color: #fff;}
i have a HTML table and a button send.
First of all the send button must have this style: style.display="none".
But if the table has at least one row the button should be displayed (block/inline);
I still have no idea how to relate between the table and the button.
I try to use JavaScript but i should think about a function and I don't found any of it to apply at type table. Thinking about CSS still also hard since I cannot find a relation between the table and the button.
A plain, non-jquery equivalent of Lance May's answer would be something like this:
var button = document.getElementById('the-button');
if (document.getElementById('the-table').getElementsByTagName('tr').length > 0){
button.style.display = 'block';
}else{
button.style.display = 'none';
}
You'll need to toggle the visibility of the button when the table is adjusted. Since that can be done in many ways, there's not way to know what is right for you.
For simplicity, give jQuery a try. I will make accessing the elements and modifying the styles much easier than 'vanilla' JavaScript. Also be sure that if you're updating the table after page load (via JavaScript), that you use this whenever you do that.
$(document).ready(function(){
if ($("#table > tr").length > 0)
$("#button").show();
else
$("#button").hide();
});
I hope that helps.
If the Button lies inside a TD which it most def. does then simply access it via:
td input {
display: none;
}
You even can define the stlye with a advanced selector like this in CSS3
input[type="button"] {
display: none;
}
I wrote about this at my blog.
With JavaScript you can grab the input field with
var myInput = document.getElementsByTagName('input');
myInput.style.display = none;
To select your input inside a tr, use something like
myTableRow.childNodes[0];
<html>
<head>
<title>whatever</title>
<style type="text/css">
.hidden {
display: none;
}
</style>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function ()
{
var $t = $('table');
var $h = $t.find('thead');
var $b = $t.find('tbody');
var $s = $('#send');
// the "add" button appends a new row
// into the table body; if the body
// transitions from empty, the "send"
// button is displayed
$('#add').bind('click', function ()
{
$b.append(newRow());
if (1 == $b.find('tr').length)
$s.removeClass('hidden');
});
// the remove button removes the last
// row from the table body (if there's
// any); if the body transitions to
// empty, the "send" button is hidden
$('#remove').bind('click', function ()
{
$b.find('tr:last').remove();
if (0 == $b.find('tr').length)
$s.addClass('hidden');
});
// generates a table row; this demo
// impl. just copies the heading row
var newRow = function ()
{
return $h.find('tr').clone();
};
});
</script>
</head>
<body>
<table border="1">
<thead>
<tr><td>foo</td><td>bar</td></tr>
</thead>
<tbody>
</tbody>
</table>
<input type="button" id="add" value="add" />
<input type="button" id="remove" value="remove" />
<input type="button" id="send" value="send" class="hidden" />
</body>
</html>
IE 8 is doing something very strange when I hide a column in a table with table-layout:fixed. The column is hidden, the table element stays the same width, but the tbody and thead elements are not resized to fill the remaining width. It works in IE7 mode (and FF, Chrome, etc. of course). Has anyone seen this before or know of a workaround?
Here is my test page - toggle the first column and use the dev console to check out the table, tbody and thead width:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>bug</title>
<style type="text/css">
table {
table-layout:fixed;
width:100%;
border-collapse:collapse;
}
td, th {
border:1px solid #000;
}
</style>
</head>
<body>
<table>
<thead>
<tr>
<th id="target1">1</th>
<th>2</th>
<th>3</th>
<th>4</th>
</tr>
</thead>
<tbody>
<tr>
<td id="target2">1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
</tbody>
</table>
toggle first column
<script type="text/javascript">
function toggleFirstColumn() {
if (document.getElementById('target1').style.display=='' ||
document.getElementById('target1').style.display=='table-cell') {
document.getElementById('target1').style.display='none';
document.getElementById('target2').style.display='none';
} else {
document.getElementById('target1').style.display='table-cell';
document.getElementById('target2').style.display='table-cell';
}
}
document.getElementById('toggle').onclick = function(){ toggleFirstColumn(); return false; };
</script>
</body>
</html>
A simple work-around for IE8 consists in giving the table a nudge, to get IE8 to adjust the column width based on the remaining columns. Assuming table points the to the table, the following will do the trick:
table.style.display = "inline-table";
window.setTimeout(function(){table.style.display = "";},0);
Credits: I read about this technique first from Srikanth's blog.
And for reference, here is the updated example using this technique.
I should note however that this technique doesn't always work. I am seeing a case in a more complicated app where no style change I could do seem to convince IE take into account that the number of columns changed (sorry, I don't have a simpler reproducable case). Luckily for us, IE9 entirely solves this problem.
Just found a nasty hack - Pick a visible column that should fill up the empty space and give it the class "colspanfix". Call this function after the other column is toggled (using jquery for brevity):
function fixColspans(tableId) {
if ($('#' + tableId).width() > $('#' + tableId + ' tbody').width()) {
var current = $('#' + tableId + ' .colspanfix').attr('colspan');
$('#' + tableId + ' .colspanfix').attr('colspan', ++current);
}
}
It checks to see if the table element is wider than the tbody element then it assigns a colspan value to the elements with the "colspanfix" class. The kicker is that it has to increase the colspan by one for each hide/show. Not very pretty, but it works.