I'm trying to display an alert when the use put the mouse over a tr of .scrollable class, this is the html:
<table class="results" id="resource-container" style="height: 769px;">
<tbody><tr>
<td>
<div class="scrollable">
<tr><td> </td>
<td style="padding-left: 10px"><div></tr>
</tbody></table>
and this is the code:
$(document).ready(function() {
$('.scrollable > tr').mouseover(function()
{
alert("hello");
});
});
A complete example is available on jsfiddle.
What am I doing wrong?
A tr element works only if it is in a table wrapper - also note that you would need to drop the > in the selector and use this - .scrollable > tbody > tr or .scrollable tr.
See demo below:
$(document).ready(function() {
$('.scrollable tr').mouseover(function() {
console.log("hello");
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="scrollable">
<tr>
<td style="padding-left: 10px">
<div>
<strong>foo</strong>
<br>test
</div>
</td>
</tr>
</table>
Related
I want to append the class red-border to a tr element which contains a span with class warning. My code is not working. Please help.
$(document).ready(function() {
$("body").css("width", "2000px");
$(".jsgrid-table").find(".warning").parents().addClass("red-border");
});
.red-border {
color: red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="jsgrid-table">
<tbody>
<tr class="jsgrid-row">
<td class="jsgrid-cell jsgrid-align-left" style="width: 100%;">2018</td>
<td class="jsgrid-cell jsgrid-align-left" style="width: 100%;"><span class="warning"></span></td>
</tr>
</tbody>
</table>
adding border in the tr element is not allowed.
Also, use .closest() selector to find the parent that matches the conditions
$(document).ready(function() {
$("body").css("width", "2000px");
$(".jsgrid-table .warning").closest("tr").addClass("red-border");
});
.red-border{
color:red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="jsgrid-table">
<tbody>
<tr class="jsgrid-row">
<td class="jsgrid-cell jsgrid-align-left" style="width: 100%;">2018</td>
<td class="jsgrid-cell jsgrid-align-left" style="width: 100%;">
<span class="warning"></span>
</td>
</tr>
<tr class="jsgrid-row">
<td class="jsgrid-cell jsgrid-align-left" style="width: 100%;">2018</td>
</td>
</tr>
</tbody>
</table>
As in this snippet first tr has class warning and so class red-border and in the next tr children element of this tr doesn't have warning class and no red-border is present in this tr element.
As said by #Thomas, .closest() is working fine. Check below the fiddle. As the borders are not supported for tr, I just have updated the color.
$(document).ready(function () {
$("body").css("width", "2000px");
$(".jsgrid-table .warning").closest("tr").addClass("red-border");
});
.red-border{
color:red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="jsgrid-table">
<tbody>
<tr class="jsgrid-row ">
<td class="jsgrid-cell jsgrid-align-left" style="width: 100%;">2018</td>
...
<td class="jsgrid-cell jsgrid-align-left" style="width: 100%;"><span class="warning"></span></td>
</tr>
</tbody>
</table>
<tr> does not have a border itself, but you can make it work:
$("body").css("width", "2000px");
$(".jsgrid-table .warning").closest("tr").addClass("red-border");
tr.red-border {
background: yellow;
}
tr.red-border > td {
border-top: 2px dotted red;
border-bottom: 2px dotted red;
}
tr.red-border > td:first-child {
border-left: 2px dotted red;
}
tr.red-border > td:last-child {
border-right: 2px dotted red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="jsgrid-table">
<tbody>
<tr class="jsgrid-row">
<td class="jsgrid-cell jsgrid-align-left" style="width: 100%;">2018</td>
<!--...-->
<td class="jsgrid-cell jsgrid-align-left" style="width: 100%;"><span class="warning"></span></td>
</tr>
</tbody>
</table>
$(document).ready(function() {
$("body").css("width", "2000px");
$(".jsgrid-table").find(".warning").parents('tr').addClass("red-border");
});
You code is working fine except it adds the red-border on all parent elements. So, to add the class only on the tr tag, then pass the tr in the .parents() function.
$(".jsgrid-table").find(".warning").parents() --- this selects all the parent elements of the element having class warning
$(".jsgrid-table").find(".warning").parents('tr') --- this selects only tr element out of the all parent elements having class warning
$(document).ready(function() {
$("body").css("width", "2000px");
$(".jsgrid-table").find(".warning").parents('tr').addClass("red-border");
});
.red-border td{
color: red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="jsgrid-table">
<tbody>
<tr class="jsgrid-row">
<td class="jsgrid-cell jsgrid-align-left" style="width: 100%;">2018</td>
<td class="jsgrid-cell jsgrid-align-left" style="width: 100%;"><span class="warning"></span></td>
</tr>
</tbody>
</table>
You can also check the below link for more details on parent, parents & colsest
Difference between jQuery parent(), parents() and closest() functions
I am trying to do multiple selections of rows and drag them into another container.
$(".draggable_tr").click(function()
...
function is called and append selected Row class in tr. But ui-draggable ui-draggable-handle is not appended in tr.This version is uploaded on jsFiddle
Html Code
<div class="new-drag">
<div class="myHeight" style="width: auto;" ng-scrollbars>
<div id="table1" class="bitacoratable">
<table id="table1" class="table table-hover table-striped childgrid border-zero">
<tr class="draggable_tr " ng-repeat="t in tabledata">
<td width="30" class="table-hover-dots">
<i class="table-dots dots"></i>
<div class="w-15 custom-inputs checkbox">
<input type="checkbox" name="check" id="check-1">
<label for="check-1"></label>
</div>
</td>
<td width="60" >{{t.id}}</td>
<td width="200">
{{t.name}}
</a>
</td>
<td width="60">{{t.dep_no}}</td>
<td width="80">{{t.status}}</td>
<td width="80">{{t.city}}</td>
</tr>
</table>
</div>
</div>
</div>
JS Code:
$("#table1 .childgrid tr, #table2 .childgrid tr").draggable({
helper: function(){
var selected = $('.childgrid tr.selectedRow');
if (selected.length === 0) {
selected = $(this).addClass('selectedRow');
}
var container = $('<div/>').attr('id', 'draggingContainer');
container.append(selected.clone().removeClass("selectedRow"));
return container;
}
});
$("#table2 .childgrid").droppable({
drop: function (event, ui) {
console.log(angular.toJson(event));
$(this).append(ui.helper.children());
//$('.selectedRow').remove();
}
});
$scope.tabledata=[{"name":"domas","id":2,"dep_no":"de_09","status":"Active","city":"Newyork"},{"name":"domas","id":2,"dep_no":"de_09","status":"Active","city":"Newyork"},{"name":"domas","id":2,"dep_no":"de_09","status":"Active","city":"Newyork"},{"name":"domas","id":2,"dep_no":"de_09","status":"Active","city":"Newyork"},{"name":"domas","id":2,"dep_no":"de_09","status":"Active","city":"Newyork"}]
$(".draggable_tr").click(function(){
$(this).toggleClass("selectedRow");
});
I want to open a another <tr> tag when first <tr> is click.
The code is :
<tr class="msg_inner">
<td><label>some text</label></td>
<tr id="full_msg" style="display:none">
<td><label>Hey There.....</label></td>
</tr>
</tr>
script
$('.msg_inner').click(function(){
$('#full_msg_'+no+'').toggle("slow");
});
it display block but all is open at same time. I want to display that block after <tr> is click.
Don't use another <tr>.
Just add a <div> in your td and simply show him like that
HTML :
<table>
<tr class="line">
<td>
Hi there !!
<div class="detail">
More info here...
</div>
</td>
</tr>
<tr class="line">
<td>
Hi there !
<div class="detail">
More info here...
</div>
</td>
</tr>
<tr class="line">
<td>
Hi there !
<div class="detail">
More info here...
</div>
</td>
</tr>
</table>
CSS
.detail{
display:none;
}
JQuery
$(".line").click(function(){
$(this).find(".detail").toggle();
});
Working Fiddle here
you can try this one:
var x=0;
$(".line").click(function(){
if((x%2)==0)
{
$(this).find(".detail").show();
}
else
{
$(this).find(".detail").hide();
}
x++;
});
DEMO HERE
Or
Toogle Method
$(".line").click(function(){
$(this).find(".detail").toggle(1000);
});
DEMO HERE
I'm looking for a little jquery help to collapse/expand a table that I have on my site. I'd also like the table to start expanded.
Here is an example of a table I have:
<table class="table">
<caption>
<div class="video-header">Header</div>
</caption>
<tbody>
<tr class="video-row">
<td class="field-title"> Content </td>
</tr>
<tr class="video-row">
<td class="field-title"> More Content</td>
</tr>
</tbody>
</table>
I'd like it that when you click on the "Header" that it collapses the entire table, not just the row.
I've found the following example, but can't seem to translate it to my case.
Just write a click handler for the caption element
jQuery(function () {
$('table > caption').click(function () {
$(this).next().toggle();
})
})
Demo: Fiddle
because your table is generated dynamically, you should define a parent node in which the table is located. this parent node should always exist in the page and should NOT be generated dynamically.
<div id="table-container">
<table class="table">
<caption>
<div class="video-header">Header</div>
</caption>
<tbody>
<tr class="video-row">
<td class="field-title"> Content </td>
</tr>
<tr class="video-row">
<td class="field-title"> More Content</td>
</tr>
</tbody>
</table>
</div>
then bind click event on that parent node.
$("#table-container caption").on("click", function(){
$("#table-container table").css("display", "none");
});
I made a listbox by table because I needed two column to show list.
and, I am trying to edit the text in the table when I hit the listbox.
I mean the selected list is changed to something like edtitable box when I click a list, so I can edit the text directly without putting a text on the other box that comes up.
Is there a way to do this??
here is the code for the listbox:
$(document).ready(function () {
$('div#selReporterList table tr:has(td)').click(function() {
$('.selected').removeClass('selected');
$('.selected').addClass('deselected');
$(this).addClass('selected');
});
});
the table is here:
<div id="selReporterList" class="srList">
<div>
<table id="list" cellspacing="0" border="1" style="border-collapse:collapse;" ndblclick="edit()">
<tr>
<td id="a" class="1" value="apple">apple</td>
<td id="b" class="2" value="good">good</td>
</tr>
<tr>
<td id="a" class="1" value="banana">banana</td>
<td id="b"class="2" value="very good">very good</td>
</tr>
</tr>
</table>
</div>
</div>
<div id="selReporterList" class="srList">
<div>
<table id="list" cellspacing="0" border="1" onclick="changeTableModeToEdit(true)" ondblclick="changeTableModeToEdit(false)" style="border-collapse:collapse;" ndblclick="edit()">
<tr>
<td id="a" class="1" value="apple"><span>apple</span></td>
<td id="b" class="2" value="good"><span>good</span></td>
</tr>
<tr>
<td id="a" class="1" value="banana"><span>banana</span></td>
<td id="b"class="2" value="very good"><span>very good</span></td>
</tr>
</tr>
</table>
</div>
<script type="text/javascript">
function changeTableModeToEdit(toEditMode){
var value;
if(toEditMode)
{
$('#list span').each(function(){
value = $(this).text();
$(this).after('<input type="text"/>');
$(this).next().val(value).focus();
$(this).remove();
});
}
else
{
$('#list input').each(function(){
value = $(this).val();
$(this).after('<span> </span>');
$(this).next().text(value);
$(this).remove();
});
}
}
</script>
Yes, you could put the text inside of an <input type=text editable="false" /> and then when it is clicked set the editable attribute to true.
P.S. when you have multiple lines of code, right it all out, highlight it and press commend+k,
the ` is for inline code.