To apply a script to specific tables only - javascript

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;}

Related

How to remove <br> and everything after that?

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] })

How to disable all rows of HTML table?

[Not exactly the same as the question "how to disable knockout click...". My question involves specific usage of an HTML table and contains valuable approaches on solving such case.]
I have the following table and button below it:
<table>
<tbody data-bind="foreach: my-array">
<tr data-bind="click: $ShowDetails()">
...
<button>Add New Record</button>
The table rows are clickable (and would load some details data in another table).
On click of the button I need to disable all table rows and add one new <tr> on top.
I know how to add the new record on top:
$('<tr><td contenteditable="true">New Record Here</td></tr>').prependTo('table > tbody');
But how to disable all rows of the table so they won't be clickable and look disabled (grayed out)?
Just add disabled class to your <tr>'s using $("tr").addClass("disabled").
The grayed out backgroung can be added by using $('tr').css('background-color','grey') or by describing .disabled class in your css-file:
tr.disabled {
background-color: grey;
}
Then in your ShowDetails() method just check if calling element has the .disabled class by using $(this).hasClass("disabled") method. Show details if it doesn't and do nothing if it does.
Instead of checking the disabled class you can also add a new bool observable named AddMode() and set it to true on Add New button click, and on ShowDetails() put a first line if(AddMode() === true) return; (by #st_stefanov)
I used this CSS code to disable HTML row
.row-disabled {
background-color: rgba(236, 240, 241, 0.5);
pointer-events: none;
width: 100%;
}
$(function (){
var myDisableBtn = $('#btn');
myDisableBtn.on('click',function (){
$('tr').css({'pointer-events':'none',
'background-color':'grey'});
});
});
$(document).ready(function () {
$('#btn').click(function () {
$('#test_table tr').prop('disabled', 'disabled').css('background-color', 'grey');
$('#test_table tbody').prepend('<tr><td contenteditable="true">New Record Here</td></tr>')
});
});
<input type="button" id="btn" value="Add New Record"/>
<table style="width:100%" id="test_table">
<tbody>
<tr>
<td>Jill</td>
</tr>
<tr>
<td>Eve</td>
</tr>
</tbody>
</table>

need to access current TR or TD

I have to change the table row color based on some business logic. I have limited access.
I have PHP code which decide TD content...from that TD I have to change the current TR background color.
jQuery can help, as it is having lot of traverser and accesser.
code I am writing is
<script type="text/javascript">$(this).closest("td").css("border", "1px solid red");</script>
But not able to access the current TD or TR
Instead of using this, give the element an id and get it using jQuery. In your code, this points to nothing. like:
<table><tr><td> <input id="myInput" type="text" /> </td></tr></table>
//If you want to access the td
$('#myInput').closest("td").css("border", "1px solid red");
//If you want to access the tr
$('#myInput').closest("tr").css("background", "red");
here you can use parents() funciton.
if your element is $('#el') then following will give you nearest td and tr
$('#el').parents('td').first();
$('#el').parents('tr').first();
then you can apply operation like below
$('#el').parents('td').first().css("border", "1px solid red");
$('#el').parents('tr').first().css("border", "1px solid red");
Assuming the worst case, where you have nested tables and you cannot change current TD attributes, than print an empty span within it this way:
<table>
<tr>
<td>Content 1
<table>
<tr>
<td>Content 2<span data-class="very_important" /></td>
</tr>
</table>
</td>
</tr>
</table>
Than add class to (first or last) parent TR like this:
$(function() {
$('span[data-class]').each(function(n) {
var highlightClass = $(this).attr('data-class');
$(this).parents('tr:first').addClass( highlightClass );
$(this).remove(); /* Optional */
});
});
Now your TR has class and you can style it (and its children) the way you like. Result code:
<table>
<tr>
<td>Content 1
<table>
<tr class="very_important">
<td>Content 2</td>
</tr>
</table>
</td>
</tr>
</table>
You need some way to target the TD content or the TD itself. If the content was unique you could search for a keyword or phrase. Either way, you need a selector - $(this) is just a reference to the jquery object once inside a handler.
EDIT
I thought about it a bit more and here's something you could try. Since you only have access to the content, could you add something to it like UPDATED? If so, then you could add that keyword and with jQuery we can add in the border, background and remove the keyword like this:
​<table cellpadding="5px" cellspacing="5px" border="1px">
<tr><td>*UPDATED*Apple</td><td>Pie</td></tr>
<tr><td>Orange</td><td>Crush</td></tr>
</table>​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​
-
var $updatedContent = $('td:contains("*UPDATED*")');
$updatedContent.closest('td').css('border', '1px solid red').closest('tr').css('background','green');
$updatedContent.text($updatedContent.text().replace('*UPDATED*', ''));
​

Hide table rows except head

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.

IE8 isn't resizing tbody or thead when a column is hidden in a table with table-layout:fixed

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.

Categories

Resources