Injecting CSS and JavaScript in HTML code - javascript

I am new to web programming. So I have modified a code that I found online and ended up with this : jsfiddle.net/y4Mdy/673 witch works fine, all the header rows in the table are shown and the others are hidden, and then can be revealed by clicking the headers.
But When I am trying to assemble the html, CSS and JavaScript together (following the instruction found here) it does not seem to work. When I click on the headers nothing happens, the other rows are not revealed.
Here is the content of my html file :
<html>
<head>
<script type="text/javascript">
$('.header').click(function () {
$(this).find('span').text(function (_, value) {
return value == '-' ? '+' : '-'
});
$(this).nextUntil('tr.header').slideToggle(100, function () {});
});
</script>.
<style>
table, tr, td, th {
border-collapse:collapse;
}
tr {
display: none;
}
table {
margin-left:auto;
margin-right:auto;
text-align:center;
}
tr.header {
cursor:pointer;
display: table-row;
}
</style>.
</head>
<body>
<table>
<tr class="header">
<th><span>+</span> Header</th>
</tr>
<tr>
<td>data</td>
<td>data</td>
</tr>
<tr>
<td>data</td>
<td>data</td>
</tr>
<tr class="header">
<th><span>+</span> Header</th>
</tr>
<tr>
<td>date</td>
<td>data</td>
</tr>
<tr>
<td>data</td>
<td>data</td>
</tr>
<tr>
<td>data</td>
<td>data</td>
</tr>
</table>
</body>
</html>

You want to load jQuery first, like other people are saying, and you may also want to put your code inside the 'ready' function, since you're running the code at the top of the page. That way, you can make sure your whole page is loaded before the code runs.
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script type="text/javascript">
$( document ).ready(function() {
// Handler for .ready() called.
$('.header').click(function () {
$(this).find('span').text(function (_, value) {
return value == '-' ? '+' : '-'
});
$(this).nextUntil('tr.header').slideToggle(100, function () {});
});
});
</script>.
<style>
table, tr, td, th {
border-collapse:collapse;
}
tr {
display: none;
}
table {
margin-left:auto;
margin-right:auto;
text-align:center;
}
tr.header {
cursor:pointer;
display: table-row;
}
</style>.
</head>
<body>
<table>
<tr class="header">
<th><span>+</span> Header</th>
</tr>
<tr>
<td>data</td>
<td>data</td>
</tr>
<tr>
<td>data</td>
<td>data</td>
</tr>
<tr class="header">
<th><span>+</span> Header</th>
</tr>
<tr>
<td>date</td>
<td>data</td>
</tr>
<tr>
<td>data</td>
<td>data</td>
</tr>
<tr>
<td>data</td>
<td>data</td>
</tr>
</table>
</body>
</html>
See info here:
http://api.jquery.com/ready/
Also, keep in mind that in the above example, you're loading jQuery from the internet. You may want to download it locally and load it from within your local directory, depending on your situation. For your purposes, though, as long as you have an internet connection, you're probably fine to do it by linking from the internet.

You are using jQuery in your code, but you forgot to include the jquery files !
Add this in your html :
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>

Import jquery library first
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>

Related

tablesorter - How to sort child rows and parent rows

I'm using tablesorter on my project with the children functionality (described here).
Here is my code:
$(function() {
$('table').tablesorter();
});
td,
th {
border: solid 2px #121E23
}
table {
border-collapse: collapse;
}
thead {
background-color: red;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
</style>
</head>
<body>
<table>
<thead>
<tr>
<th>this is column 1</th>
<th>this is column 2</th>
</tr>
</thead>
<tbody>
<tr>
<th colspan="4">TITLE 1</th>
</tr>
<tr class="tablesorter-childRow">
<td>abc</td>
<td>yolo</td>
</tr>
<tr class="tablesorter-childRow">
<td>def</td>
<td>yolo</td>
</tr>
<tr>
<th colspan="4">TITLE 2</th>
</tr>
<tr class="tablesorter-childRow">
<td>test1</td>
<td>yolo</td>
</tr>
<tr class="tablesorter-childRow">
<td>test2</td>
<td>yolo</td>
</tr>
</tbody>
</table>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.tablesorter/2.31.1/js/jquery.tablesorter.combined.min.js"></script>
</body>
</html>
By default we have this:
And if we change the sorting order of the first column (by clicking on it), we get this :
Simply because tablesorter sorts the parent rows (TITLE 1 and TITLE 2), and keeps the children rows in the same order as at the beggining.
But I would like tablesorter to also sorts the children rows, and so to get my table like this:
How can I do that ?
Thanks for your help.

Toggle row color red and table color white on click with pure javascript (no jquery)

I'm trying to duplicate the following JSFiddle in pure javascript without relying on jquery or other methods.
$('table tr').each(function(a,b){
$(b).click(function(){
$('table tr').css('background','#ffffff');
$(this).css('background','#ff0000');
});
});
<table>
<tr>
<td>data</td>
<td>data</td>
</tr>
<tr>
<td>data</td>
<td>data</td>
</tr>
</table>
The first click highlights a row, the second click highlights the next selected row and removes the highlight from the previous row. Also, I've tried implementing this code in my work but it wouldn't work at all and provides 0 error messages to give me a clue as to what is going on. Copy/pasting this fiddle into a new one does not reproduce the results and this seems to be a common theme while trying to track down an answer to this problem. I've searched all over stackoverflow and haven't been able to find a working solution that relies only on css, javascript, and/or html.
Use [].forEach.call to iterate tr elements. Use of Function#call is needed as document.querySelectorAll does not return Array.
[].forEach.call(document.querySelectorAll('table tr'),
function(el) {
el.addEventListener('click', function() {
[].forEach.call(document.querySelectorAll('table tr'), function(el) {
el.style.background = '#fff';
});
this.style.background = '#f00'
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<table border="1" cellspacing="1" width="100%" id="table1">
<tr>
<th>Column1</th>
<th>Column2</th>
<th>Column3</th>
<th>Column4</th>
<th>Column5</th>
</tr>
<tr>
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>
</tr>
<tr>
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>
</tr>
<tr>
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>
</tr>
<tr>
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>
</tr>
</table>
https://jsfiddle.net/M4V3R1C8/7L2typ5t/1/
This script allows you to do exactly what I was looking for. The only downside is that you cannot activate the top row. Also, I can't seem to change the .selected name as it will stop working. Good enough for now, onto the next problem.
function selected(){
var index,
table = document.getElementById("dps");
for(var i = 1; i < table.rows.length; i++) {
table.rows[i].onclick = function() {
if(typeof index !== "undefined"){
table.rows[index].classList.toggle("selected");
}
console.log(typeof index);
index = this.rowIndex;
this.classList.toggle("selected");
console.log(typeof index);
};
}
}
selected();

Apply css to tr with custom data attribute in JQuery

I have a table, each tr element has a custom data attribute and I want to apply style to certain values.
In HTML:
<table id="notify" class="t_notify">
<tr data-notify="101">
<td>data</td>
<td>data</td>
</tr>
<tr data-notify="102">
<td>data</td>
<td>data</td>
</tr>
<!-- and goes -->
</table>
With CSS:
.t_notify>tbody>tr{background:#BBB;}
.t_notify>tbody>tr:hover{background:transparent;}
I tried in Jquery to make this when I click in a certain tr element, for example:
$("#notify > tbody > tr").attr("[data-notify='101']").css({"background":"#CCC"});
But this doesn't work. I would like some help.
Good Approach
Your query must be in the selector, like so :
$("#notify > tbody > tr[data-notify='101']").css({"background":"#CCC"});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="notify" class="t_notify">
<tr data-notify="101">
<td>data</td>
<td>data</td>
</tr>
<tr data-notify="102">
<td>data</td>
<td>data</td>
</tr>
<!-- and goes -->
</table>
attr()
The attr() function returns the value of the attribute or sets it. In your case, you want neither. Hope it helps.
Your issue is that attr() is intended to be used to get/set an attribute. It doesn't filter the elements in a collection. Instead you should use the attribute selector in the primary jQuery object.
Also, just to note that in the example below I changed the highlight colour as #BBB is very hard to spot against #CCC. I also amended the code to use addClass(), as you should avoid the use of css() where possible, as it ties the JS code too closely to the UI. Finally, I amended the CSS rules so that operator precedence works for all scenarios.
$("#notify > tbody > tr[data-notify='101']").addClass('foo');
.t_notify tr {
background: #BBB;
}
.t_notify > tbody > tr:hover {
background: transparent;
}
.t_notify tr.foo {
background-color: #C00;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="notify" class="t_notify">
<tr data-notify="101">
<td>data</td>
<td>data</td>
</tr>
<tr data-notify="102">
<td>data</td>
<td>data</td>
</tr>
<!-- and goes on... -->
</table>
Put the data in the selector: Demon on JsFiddle
$("#notify > tbody > tr[data-notify='101']").css({"background":"#CCC"});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="notify" class="t_notify">
<tr data-notify="101">
<td>data</td>
<td>data</td>
</tr>
<tr data-notify="102">
<td>data</td>
<td>data</td>
</tr>
<!-- and goes -->
</table>
The CSS attribute selector matches elements based on the presence or value of a given attribute.
/* <a> elements with a title attribute */
a[title] {
color: purple;
}
/* <a> elements with an href matching "https://example.org" */
a[href="https://example.org"] {
color: green;
}
/* <a> elements with an href containing "example" */
a[href*="example"] {
font-size: 2em;
}
/* <a> elements with an href ending ".org" */
a[href$=".org"] {
font-style: italic;
}
source
$("#notify > tbody > tr").attr("[data-notify='101']")
should be:
$("#notify > tbody > tr[data-notify='101']")

Save the state of the Sort before leaving Page

I use a jquery plugin to sort my html table. It works well but I want to be able to "save my sort" after leaving the page and returning. if I leave the page and return - the sort starts over again.
I want to maintain the state of the sort - so when I return - it is entact how I left it...
Here is a working example...
https://rawgit.com/joequery/Stupid-Table-Plugin/master/examples/basic.html
here is the code...
<!DOCTYPE html>
<html>
<head>
<title>Stupid jQuery table sort</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="../stupidtable.js?dev"></script>
<script>
$(function(){
$("table").stupidtable();
});
</script>
<style type="text/css">
table {
border-collapse: collapse;
}
th, td {
padding: 5px 10px;
border: 1px solid #999;
}
th {
background-color: #eee;
}
th[data-sort]{
cursor:pointer;
}
tr.awesome{
color: red;
}
</style>
</style>
</head>
<body>
<h1>Stupid jQuery table sort!</h1>
<p>This example shows how a sortable table can be implemented with very little configuration. Simply specify the data type on a <code><th></code> element using the <code>data-sort</code> attribute, and the plugin handles the rest.</p>
<table>
<thead>
<tr>
<th data-sort="int">int</th>
<th data-sort="float">float</th>
<th data-sort="string">string</th>
</tr>
</thead>
<tbody>
<tr>
<td>15</td>
<td>-.18</td>
<td>banana</td>
</tr>
<tr class="awesome">
<td>95</td>
<td>36</td>
<td>coke</td>
</tr>
<tr>
<td>2</td>
<td>-152.5</td>
<td>apple</td>
</tr>
<tr>
<td>-53</td>
<td>88.5</td>
<td>zebra</td>
</tr>
<tr>
<td>195</td>
<td>-858</td>
<td>orange</td>
</tr>
</tbody>
</table>
</body>
</html>
The localStorage API is easy to use and can persist data between user sessions.
To store an item: localStorage.setItem('myCat', 'Tom');
And, to retreive an item: localStorage.getItem('myCat');
Keep in mind that all data is stored as strings.

Use 'view more' button to enhance information on each table row

I have a pretty simple html table, there are lots of information i want to add for each row but i cant display everything when the page is loaded because it is going to make everything very clumsy. So i want to add a view more button in another column for each of the row.
I have already tried writing a JavaScript code but its not working as i want. What i want is:
The row should be completely invisible until i click the view more (i tried putting the tags inside the div but it messed everything up by putting the row outside the table entirely).
I want the code to work for all the rows so i don't have to write separate codes for each row.
I want the extended information for a row to be invisible whenever i try to view more for another row.
If possible, i would like a simple animation for showing the extended animation.
Below is my HTML code:
<table>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Action</th>
</tr>
<tr>
<td>John</td>
<td>Doe</td>
<td>View More</td>
</tr>
<tr>
<td colspan="3">
<div id="example" class="more">
<p>John Doe is a man</p>
<p style="text-align:right;">Hide this content.</p>
</div>
</td>
</tr>
<tr>
<td>Jane</td>
<td>Doe</td>
<td>View More</td>
</tr>
<tr>
<td colspan="3">
<div id="example" class="more">
<p>Jane Doe is a woman</p>
<p style="text-align:right;">Hide this content.</p>
</div>
</td>
</tr>
</table>
Below is my CSS:
<style type="text/css">
.more {
display: none;
}
a.showLink, a.hideLink {
text-decoration: none;
color: #36f;
padding-left: 8px;
background: transparent url(down.gif) no-repeat left;
}
a.hideLink {
background: transparent url(up.gif) no-repeat left;
}
a.showLink:hover, a.hideLink:hover {
border-bottom: 1px dotted #36f;
}
</style>
Below is my Javascript:
<script language="javascript" type="text/javascript">
function showHide(shID) {
if (document.getElementById(shID)) {
if (document.getElementById(shID+'-show').style.display != 'none') {
document.getElementById(shID+'-show').style.display = 'none';
document.getElementById(shID).style.display = 'block';
}
else {
document.getElementById(shID+'-show').style.display = 'inline';
document.getElementById(shID).style.display = 'none';
}
}
}
</script>
Since you tagged jQuery, I'm assuming you're willing to use it, so here's an example of a fix with jQuery:
EDIT: The html has changed, the second row failed to work due to the ID selector
HTML
<table>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Action</th>
</tr>
<tr>
<td>John</td>
<td>Doe</td>
<td>View More</td>
</tr>
<tr>
<td colspan="3">
<div id="example" class="more">
<p>John Doe is a man</p>
<p style="text-align:right;">Hide this content.</p>
</div>
</td>
</tr>
<tr>
<td>Jane</td>
<td>Doe</td>
<td>View More</td><!-- Note the change in the showHide() function -->
</tr>
<tr>
<td colspan="3">
<div id="exampleFemale" class="more"><!-- Note the change in the ID -->
<p>Jane Doe is a woman</p>
<p style="text-align:right;">Hide this content.</p><!-- Note the change in the showHide() function -->
</div>
</td>
</tr>
</table>
Javascript
function showHide(shID) {
if ($('#' + shID)) {
if ($('#' + shID+'-show').css('display') != 'none') {
$('#' + shID+'-show').css({'display':'none'});
$('#' + shID).css({'display':'block'});
}
}
else {
$('#' + shID+'-show').css({'display':'inline'});
$('#' + shID).css({'display':'none'});
}
}
Note the changes inthe Javascript -> jQuery where there used to be document.getElementById(shID+'-show') is now $('#' + shID+'-show') and where there used to be .style.display = 'none'; is now .css({'display':'none'});
Don't forget to include jQuery
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
Hope this helps!

Categories