I need your help in collapsing the expanded rows which are coming by default when the page loads. Here is the javascript code:
<script src="http://code.jquery.com/jquery-1.5.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
$('.RowToClick').click(function() {
$(this).nextAll('tr').each(function() {
if ($(this).is('.RowToClick')) {
return false;
}
$(this).toggle(350);
});
});
});
</script>
And below is the tr code in the table tag which collapses and expands the tr tags:
<tr class="RowToClick">
<td><%=i%></td>
<td width="20%" style="padding: 1px; cursor: pointer" title="Click Here to Expand/Collapse Sub Folders">
<span style="text-decoration: underline"><%=sz_FolderName%></span>
</td>
</tr>
Add the below CSS:
.RowToClick {
display:none;
}
or add inline style
<tr class="RowToClick" style="display:none">
If you want that in load. Place your needed HTML elements in a DIV ( or take some existing TR or as u need) say eg divID
Start you script like this
$('#divID').toggle();
Try this script :
$(document).ready(function() {
$("table").each(function() {
$("tr").each(function() {
if ($(this).hasClass('RowToClick')) {
}
else {
$(this).toggle(50);
}
});
});
$('.RowToClick').click(function ()
{
$(this).nextAll('tr').each( function()
{
if ($(this).is('.RowToClick'))
{
return false;
}
$(this).toggle(350);
});
});
});
Update :
Can you try this fiddle :
http://jsfiddle.net/riginvp/xgeth4br/4/
Related
I have written code so that if the table row is clicked it will act as a link and bring you to a new page, however I also want to have it so they can select rows to do things with. The problem is when they click on the checkbox to select it, it detect that the "row" was clicked and activates the link.
Here is the code I have written
<script>
$(document).ready(function() {$('table[name=$tableName]').DataTable();
$('table[name=$tableName] tbody').on( 'click', 'tr', function () {
$(location).attr('href', 'http://stackoverflow.com/');
})
});
</script>
I have checkboxes in the first column
The problem is anytime the checkbox is clicked I need it to not redirect the page. Basically if anywhere else is then it will.
Anyone know how I can modify to implement this functionality?
So check what was clicked and if it it the label/checkbox then ignore it.
$("table tbody").on("click", "tr", function (e) {
if ($(e.target).is("label,input")) {
return
} else {
console.log("clicked")
}
})
input[type="checkbox"] {
display: none
}
input[type="checkbox"]:checked + label {
background-color: green;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<tr>
<td><input type="checkbox" id="cb1"><label for="cb1">CB</label></td>
<td>HMMMM 1</td>
</tr>
<tr>
<td><input type="checkbox" id="cb2"><label for="cb2">CB</label></td>
<td>HMMMM 2</td>
</tr>
<table>
Here's a fiddle of my problem, and a code snippet in case that doesn't work:
$(function() {
$('div').hover(
function() {
$(this).append("<div id='xxx'>ccc</div>")
},
function() {
$('#xxx').remove();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<table>
<tr>
<td>
<div>
<a href="xxx">
<img src="xxx">aaa
</a>
bbb
</div>
</td>
</tr>
</table>
When I hover out of div, Text part of the link aaa disappears. I becomes :hover{visibility:visible} for some reason.
It has nothing to do with elements ids or text or links.
It is Chrome problem, Firefox works as should.
Is it a bug or it is a js problem here? Why does Chrome do that?
Surrounding 'bbb' with span fixes the problem:
$(function() {
$('div').hover(
function() {
$(this).append("<div id='xxx'>ccc</div>")
},
function() {
$('#xxx').remove();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<table>
<tr>
<td>
<div>
<a href="xxx">
<img src="xxx">aaa
</a>
<span>bbb</span>
</div>
</td>
</tr>
</table>
user after method to solve this problem
<script>
$('div').hover(
function() {
$(this).after("<div id='xxx'>ccc</div>")
},
function() {
$('#xxx').remove();
}
);
</script>
Try using this:
$('div').hover(
function() {
$(this).parent().append("<div id='xxx'>ccc</div>");
},
function() {
$('#xxx').remove();
}
);
Interesting behaviour. I've tried to add this, and text part of aaa is showing.
function(){
$(this).clearfix:after {
/* visibility: hidden; */}}
Building on the answer to "add class to parent element if conditions are true", I set the following:
<head>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<style>
.zero {background:#900;color:white;}
</style>
</head>
<div>
<table>
<tr>
<td>1</p>0</p></td>
<td>2</p>10</p></td>
<td>3</p>0</p></td>
</tr>
</table>
</div>
<script>
$() {
$('p', 'table').each(function() {
if ($(this).text() ==='0') {
$(this).parents("td").addClass("zero");
}
});
});
</script>
I used this in the answers jsfiddle example and it worked fine. I've only added the $() { }); in place of the 'onload' offered in the jsfiddle. In my example the td containing a p with text exactly equalling '0' does not take the styling. Ideas welcome.
Your opening paragraph tags in the table are wrong, and you need to put your script in an event like an on ready or the like.
Table:
<td>1<p>0</p></td>
<td>2<p>10</p></td>
<td>3<p>0</p></td>
Script:
$(document).ready(function(){
$('p', 'table').each(function() {
if ($(this).text() ==='0') {
$(this).parents("td").addClass("zero");
}
});
});
Working fiddle:
https://jsfiddle.net/h7kyv9z6/
My requirement is to show tooltip on the image mouse over. I'm using jquery1.11 . But I'm not able to achieve it.
This is my fiddle
I want to show below table data on the tooltip on mouseover of the image:
<table class="statusRollup" style="position:absolute;">
<tr><td>tooltip Data1 </td></tr>
<tr><td>tooltip Data2</td></tr>
</table>
Sample code:
$.widget("ui.tooltip", $.ui.tooltip, {
options: {
content: function () {
return $(this).prop('title');
}
}
});
$(function () {
$('.one').attr('title', $('.statusRollup').remove().html())
$(document).tooltip();
});
Are they any suggestions?
Thanks.
You have it working, you just need to apply a title="" attribute to the items you want to have a tooltip.
<td class="sample-two">Row1
<img class="one" src="http://ssl.gstatic.com/gb/images/b_5dae6e31.png"
width="15" height="15" alt="" title="testing"/>
Working JSFiddle: http://jsfiddle.net/ubKtd/1132/
row1's img says testing.
Also I suggest visiting: http://jqueryui.com/tooltip/
If you want what you asked in the comments here:
JS:
$(function () {
$(document).tooltip({
content: function () {
return $(this).prop('title');
}
});
});
$(function () {
$('.one').attr('title', $('.statusRollup').remove().html())
$(document).tooltip();
});
Also added jQuery UI as it wasn't added from what I was seeing:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.1/themes/smoothness/jquery-ui.css" />
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.1/jquery-ui.min.js"></script>
Working JSFiddle: http://jsfiddle.net/0w9yo8x6/3/ * Using jQuery 1.11.1 *
http://jsfiddle.net/FsCHJ/2/
what now happens is, whenever I have another link example it will also use this link as the toggle button. I just want Toggle Edit Mode to be toggling hidden div's on/off. So I tried to change $("a").click(function () to $("toggle").click(function () and <a>Toggle Edit Mode</a> to Toggle Edit Mode`, but doesn't work. Any idea's?
HTML
<li><a>Toggle Edit Mode</a>
</li>
<div class="hidden rightButton">hello</div>
CSS
.hidden {
display: none;
}
.unhidden {
display: block;
}
JS
$(document).ready(function () {
$("a").click(function () {
$("div").toggleClass("hidden unhidden");
});
});
You want this.
<li><a class="toggle">Toggle Edit Mode</a>
$(".toggle").click(function () {
$("div").toggleClass("hidden unhidden");
}
You cannot use $("toggle"), because this looks for the html tag <toggle>. Instead add a class toggle to the link for which you want to toggle.
Use "ID" selector.
http://jsfiddle.net/FsCHJ/1/
There can be many classes (class=...) in one page but juste on id (id=...) per page. More informations here.
Javascript:
$(document).ready(function () {
$("#toggle").click(function () {
$("div").toggleClass("hidden unhidden");
});
});
Html:
<li><a id="toggle">Toggle Edit Mode</a></li>
<div class="hidden rightButton">hello</div>
$(document).ready(function () {
$("#toggle").click(function () {
$("div").toggleClass("hidden unhidden");
});
});
.hidden {
display: none;
}
.unhidden {
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<li><a id="toggle">Toggle Edit Mode</a></li>
<div class="hidden rightButton">hello</div>
Use .className selector:
$(".toggle").click(function () {});
You can also use jQuery's toggle function.
$(".toggle").click(function () {
$("div").toggle();
});
Created fiddle to demonstrate toggle.
This worked for me. Allowing me to show or hide text with the same link. I associate the link with the div i want to show. This works in lists with multiple records, each record having it's own ID.
<a class="showHideToggle div1">View Details</a>
<div id="div1" style="display:none;">Record 1 details goes here</div>
<a class="showHideToggle div2">View Details</a>
<div id="div2" style="display:none;">Record 2 details goes here</div>
<script>
$(document).ready(function () {
$(".showHideToggle").click(function (ctl) {
var linkedDivName = $(this).attr('class').replace('showHideToggle ', '');
var divToToggle = $("#" + linkedDivName);
//alert('current status: ' + divToToggle.css('display'));
if (divToToggle.css('display') == 'none') {
divToToggle.css("display", "block");
$(this).text("Hide Details");
} else {
divToToggle.css("display", "none");
$(this).text("Show Details");
}
});
});
</script>