Javascript hide/show tabs using JQuery - javascript

I have a quick question of how I can use jQuery tabs (you click on link button to display/hide certain divs). The div id matches the href of the link:
HTML links:
<table class='layout tabs'>
<tr>
<td>Site</td>
<td>Number</td>
</tr>
<tr>
<td>Student</td>
<td>School</td>
</tr>
</table>
</div>
div that needs to display/hide:
<div id="site">
<table class='explore'>
<thead class='ui-widget-header'>
<tr>
<th class=' sortable'>
Site
</th>
<th class=' sortable'>
Number
</th>
</tr>
</thead>
</table>
</div>

$("table.tabs a").click( function() {
var id = $(this).attr( "href" );
var div = $(id);
div.toggle();
} );
This will get you exactly what you're asking. However, I suspect that you also want to hide all other divs when one div is shown. True?
Ok, now that you've responded that it's true, here's your new code.
You also should add a class (in my code - "tab-div") to all your DIVs, in order to have them easily selectable all together.
$("table.tabs a").click( function() {
var id = $(this).attr( "href" );
// Hide all the tab divs
$(".tab-div").hide();
// Then show the one that's been clicked
$(id).show();
} );

Related

Change title on Table

I want to change a certain text on the table with a click of a button. In the table there's a header with the text a/d. With a click on a button I would want to have the user click on it to change the text a/d to say b/c.
$(document).ready(function(){
$("#testTable").prepend("<div><button class='clickButton'>Click Me</button></div>");
$('.clickButton').on("click", function(e){
e.stopPropagation();
$("#testTable").find('table').find('tbody').find('tr:eq(0)').find('th').html().replace("a/d","b/c");
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="testTable">
<tbody>
<tr>
<th colspan="3">This is a test
<br>This is a test
<br>(This is a test, a/d)
</th>
</tr>
<tr>
<td>test</td>
<td>test</td>
<td>test</td>
</tr></tbody></table>
$(document).ready(function() {
$("#testTable").prepend("<div><button class='clickButton'>Click Me</button></div>");
$('.clickButton').on("click", function(e) {
e.stopPropagation();
// find the element you want
var title = $('#testTable th')
// get and modify the text
var new_title = title.html().replace("a/d", "b/c")
// replace old title with new text
title.html(new_title)
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="testTable">
<tbody>
<tr>
<th colspan="3">This is a test
<br>This is a test
<br>(This is a test, a/d)
</th>
</tr>
<tr>
<td>test</td>
<td>test</td>
<td>test</td>
</tr>
</tbody>
</table>
Not sure why you were using such wonky selectors. Maybe this is just a watered down version of your code. As it is, you just need to grab the only th inside of your table with an id of testTable (using $('#testTable th')). In addition, you have to grab the text, modify it, then put it back where you want it.
Modify the contents of your click function as below
e.stopPropagation();
// Find the element. Remember: This will return all the 'th' elements in '#testTable'
var title = $("#testTable").find('th');
// Replace string
title.html(title.html().replace("a/d", "b/c"));
That should do it.

Onclick hide div element

I have a link that shows/hides a content within a div upon click, what I'm trying to do is have a button that will hide a specific div(the content in sectiontohide1) within the div(sectiontohide)upon click. I've got the Javascript working for the first link(sectiontohide) and it works but I can't figure out how to get the second link to hide the div
<a id="trackAttendance1" onclick="loadtable('sectiontohide');" class="trackAttendance" href="#">Track Absences</a>
<div id="sectiontohide" style="display:none;">
<table>
<div id="sectiontohide1">
<tr>
<td>Web Programming Seminar</td>
<th id="absent" rowspan="2">Absent</th>
</tr>
<tr>
<td>TUESDAY 2:00-3:00 - 21/02/2017</td>
</tr>
</div>
<td>Management in IT</td>
<th id="absent" rowspan="2">Absent</th>
<tr>
<td>FRIDAY 9:00-11:00 - 24/02/2017</td>
</tr>
<tr>
<td>Web Programming Lecture</td>
<th id="absent" rowspan="2">Absent</th>
</tr>
<tr>
<td>FRIDAY 12:00-1:00 - 24/02/2017</td>
</tr>
</table>
<a id="trackAttendance1" onclick="hidediv('sectiontohide1');" class="close" href="#">Hide Element</a>
My Javascript for showing/hiding the table
function loadtable(id){
var divelement = document.getElementById(id);
if(divelement.style.display =='none')
divelement.style.display = 'block';
else
divelement.style.display = 'none';
}
Your loadtable function actually toggles the visibility of the element by the given id.
So you can run it for showing / hiding for the other parts too. For this it should be sufficient to change the click handler of the close button to loadtable('sectiontohide1');
But there are some other issues too, for example :
A div can be placed in a table only if it is surrounded by a <td></td> or <th></th>
<th> tag is for header so use it only on top of the table, you can use css for styling the cells
<td> and <th> tags should always be surrounded by a <tr></tr>
Looks like you were on the right track. To just hide the div, try something like:
function hidediv(id) {
var divelement = document.getElementById(id);
divelement.style.display = 'none';
}

Delete table rows if table data does not contain a specific class

I got a question regarding removing table rows within a table. I got the following HTML:
<table>
<tr>
<td class="html5badge">autofocus</td>
<td>autofocus</td>
<td>Specifies that the drop-down list should automatically get focus when the page loads</td>
</tr>
<tr>
<td>disabled</td>
<td>disabled</td>
<td>Specifies that a drop-down list should be disabled</td>
</tr>
<tr>
<td class="html5badge">test</td>
<td>autofocus</td>
<td>Specifies that the drop-down list should automatically get focus when the page loads</td>
</tr>
</table>
I need a mechanism that looks whether the first <td> does not contain the html5badge class and delete the parent: <tr>.
To do this I created the following jQuery code:
$(document).ready(function() {
$(".onlyhtml5").click(function(event) {
event.preventDefault();
var classname = $('table tr td').not('.html5badge');
console.log(classname)
for (i = 0; i < classname.length; i++) {
$(classname[i].parentNode).remove();
}
});
});
This works but it does not exactly what I want. As you can see in my JSFIDDLE it will delete all the table rows. But what I want is the following desired output:
<table>
<tr>
<td class="html5badge">autofocus</td>
<td>autofocus</td>
<td>Specifies that the drop-down list should automatically get focus when the page loads</td>
</tr>
<tr>
<td class="html5badge">test</td>
<td>autofocus</td>
<td>Specifies that the drop-down list should automatically get focus when the page loads</td>
</tr>
</table>
The desired output is that the <tr> that contained the text: disabled is been removed! Based on the fact that the <td> within this <tr> does not contained the class: html5badge.
How can I achieve this?
You can use filter() to retrieve the tr elements which do not contain td.html5badge and remove them:
$(".onlyhtml5").click(function(e) {
e.preventDefault();
$('tr').filter(function() {
return $(this).find('td.html5badge').length == 0;
}).remove();
});
Updated fiddle
simply make it
$(document).ready(function() {
$(".onlyhtml5").click(function(event) {
event.preventDefault();
$('table tr td').not('.html5badge').each( funtion(){
$( this ).parent().remove();
} );
});
});

Using Javascript, how can I show a <tr> on top of another <tr> on hover, hiding the second <tr>?

JSFiddle: http://jsfiddle.net/9u8tnh97/
I'm using jQuery and Bootstrap. I have a table with 4 <tr> elements like this:
<table class="table table-bordered">
<thead>
<tr>
<th>First Name</th>
<th>Last Name</th>
</tr>
</thead>
<tbody>
<tr class="hover-data">
<td>Mark</td>
<td>Otto</td>
</tr>
<tr class="hover-link hide">
<td colspan="2">Some link1</td>
</tr>
<tr class="hover-data">
<td>Larry</td>
<td>the Bird</td>
</tr>
<tr class="hover-link hide">
<td colspan="2">Some link2</td>
</tr>
</tbody>
</table>
And this is my Javascript:
$('table tbody tr').hover(function() {
if($(this).hasClass('hover-data')){
$(this).next().show();
$(this).hide();
} else {
$(this).prev().show();
$(this).hide();
}
});
At first, I'm hiding the two rows with class table-hover by giving them a hide class and I'm only showing the ones with class table-data.
What I want to achieve: When I hover a tr with class table-data, I want the next and immediate tr with class table-hover to show and the "hovered tr" to hide.
When I move the mouse outside again I want everything to be restored and only see the tr with class hover-data
Not sure why my code won't work. Any ideas?
This one uses mouseenter on the original rows and mouseleave on the new rows.
$('table tbody').on('mouseenter', 'tr.hover-data', function () {
$(this).next().show();
$(this).hide();
}).on('mouseleave', 'tr.hover-link', function () {
$(this).prev().show();).hide();
});
JSFiddle: http://jsfiddle.net/TrueBlueAussie/9u8tnh97/15/
I noticed that the bootstrap hide class is a little too "strong" and overrides show() so I also changed those to style="display: none" for now. Instead use your own class e.g. hideme in the following example: http://jsfiddle.net/TrueBlueAussie/9u8tnh97/17/
I am using delegated events (out of habit, and so they can share a common selector), but two separate "normal" (static) selectors will likely work just fine too. e.g. http://jsfiddle.net/TrueBlueAussie/9u8tnh97/16/
Like this:
$('table tbody tr').hover(function() {
if($(this).hasClass('hover-data')){
$(this).next().toggleClass('hidden');
}
});
https://jsfiddle.net/gqyrpnes/

On button click, validate that atleast a row must be moved to a custom table with Jquery

I am using MVC3, EF Model first on my project.
I have a view with 4 tables and then I have a CustomPickedTable, whenever a user click on a row inside those 4 tables that row moves to CustomPickedTable Table this is the code for it:
<script type="text/javascript">
$(function () {
$('.questionsForSubjectType tbody tr').click(function () {
var origin = $(this).closest('table').attr('id');
$(this)
.appendTo('#CustomPickedTable tbody')
.click({ origin: origin }, function (evt) {
$(this).appendTo('#' + evt.data.origin);
});
});
});
</script>
What I am looking for is some kind of validation that when a user clicks on the submit button there should be a rule that make sures that atleast one row in each of those 4 tables must be moved to CustomPickedTable if not it should not post the form but give the user an errormessage.
This is one of my 4 tables, these get generated by a foreach loop with razor in MVC
<div class="questionsForSubjectType" id="questionsForSubjectType_1">
<table class="box-style2" id="RandomID_c5b9bc7a-2a51-4fe5-bd3a-75b4b3934ade">
<thead>
<tr>
<th>
Kompetens
</th>
</tr>
</thead>
<tbody>
<tr>
<td data-question-id="16">Har konsulten Förmåga att lära sig nytt?</td>
</tr>
</tbody>
<tbody>
<tr>
<td data-question-id="17">Har konsulten rätt kompetens?</td>
</tr>
</tbody>
</table>
</div>
My custom table:
<table id="CustomPickedTable" class="box-style2">
<thead><tr><th>Choosen Questions</th></tr></thead>
<tbody>
</tbody>
</table>
Thanks in advance!
There might be a better way.
But i would add a data-attribute or some class to each of the TD's you can move, and on submit check for each required value.
Created an example here: http://jsfiddle.net/y35Qf/1/
Basicly i added an attribute called data-row, and each table has its own value, on submit i require each of these values to be in the CustomPickedTable - if not i alert that something is missing - else alert success.
You could easily add so you alert which rows are misssing or any other validation you would want.
Is this what you wanted?

Categories