I have a situation where I need to add a class to a table, but only if the table is inside a div with id 'mydiv' AND there is a row in table containing an <a href=...> element where the href contains the term 'myref', including the quotes. Is this easy in jQuery and if so, how do I do this? I just can't work out how to change an element while referring forward and backwards to others.
I tried the following, but it doesn't seem to work (I am relatively new to jQuery, as you can probably see from the below):
$('.mydiv').find('td').find('a[href]').contains('myref').parent.parent.addClass('myclass')
The following html snippet simulates my situation (I cannot change the html, just add some javascript and css):
<div id='mydiv'>
<a href='blahblah'>Some text</a>
<table>
<tbody>
<tr>
<td>Some text</td>
<td>Some text</td>
</tr>
</tbody>
</table>
<table>
<tbody>
<tr>
<td>Some text</td>
<td>Some text</td>
</tr>
</tbody>
</table>
</div>
<div id='otherdiv'>
<table>
<tbody>
<tr>
<td>Some text</td>
<td>Some text</td>
</tr>
</tbody>
</table>
</div>
The first table needs to get the new class, the second and third don't.
To achieve this you can use the has() method to find the table elements which contain the a required along with the 'attribute contains' selector to get the href with myref. Try this:
$('#mydiv table').has('a[href*="myref"]').addClass('myclass');
Working example
Your searching for a class with the name mydiv - $(".mydiv") instead of searching for an ID
Change your code like this :)
$("#mydiv").find("td").find("a[href*='myref']").parents("table").addClass("myClass");
.myClass {
background-color: lightblue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id='mydiv'>
<a href='blahblah'>Some text</a>
<table>
<tbody>
<tr>
<td>Some text</td>
<td>Some text</td>
</tr>
</tbody>
</table>
<table>
<tbody>
<tr>
<td>Some text</td>
<td>Some text</td>
</tr>
</tbody>
</table>
</div>
<div id='otherdiv'>
<table>
<tbody>
<tr>
<td>Some text</td>
<td>Some text</td>
</tr>
</tbody>
</table>
</div>
You can use closest() on the target td to find it's parent (table). And then $.each() for checking every td in the first table and indexOf() to find the specific text of href.
DEMO
Code snippets:
$(function() {
$('#mydiv table:first td').each(function() {
if ($(this).find('a').attr('href').indexOf('myref') != -1)
$(this).closest("table").addClass('myclass');
});
})
.myclass {
background-color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<div id='mydiv'>
<a href='blahblah'>Some text</a>
<table>
<tbody>
<tr>
<td>Some text
</td>
<td>Some text
</td>
</tr>
</tbody>
</table>
<table>
<tbody>
<tr>
<td>Some text
</td>
<td>Some text
</td>
</tr>
</tbody>
</table>
</div>
<div id='otherdiv'>
<table>
<tbody>
<tr>
<td>Some text
</td>
<td>Some text
</td>
</tr>
</tbody>
</table>
</div>
Related
I have a table with several rows, I have row that has anchor element when clicking this anchor some rows that have display none should be shown.
I need when clicking the anchor with class .pending-wide-col-name to toggle the class .dis-none on the table rows with class .results-secondary-hidden-row
Here is my HTML code:
<table>
<tbody>
<tr class="results-main-row has-hidden-row">
<td>
<a class="pending-wide-col-name">some text</a>
</td>
</tr>
<tr class="results-secondary-hidden-row dis-none">
<td>some text</td>
</tr>
<tr class="results-secondary-hidden-row dis-none">
<td>some text</td>
</tr>
<tr class="results-secondary-hidden-row dis-none">
<td>some text</td>
</tr>
</tbody>
</table>
Here is my CSS code:
.dis-none {
display: none;
}
Here is my javaScript code:
var mainRowWithHiddenChild = document.querySelector('.has-hidden-row .pending-wide-col-name');
var secondaryHiddenRow = document.querySelectorAll('.results-secondary-hidden-row');
mainRowWithHiddenChild.addEventListener('click', function () {
for (let i = 0; i < mainRowWithHiddenChild.length; i++) {
secondaryHiddenRow[i].classList.toggle('dis-none');
}
});
I tried this JS code but it is not working.
You need to use secondaryHiddenRow.length in iteration instead of mainRowWithHiddenChild.length
var mainRowWithHiddenChild = document.querySelector('.has-hidden-row .pending-wide-col-name');
var secondaryHiddenRow = document.querySelectorAll('.results-secondary-hidden-row');
mainRowWithHiddenChild.addEventListener('click', function () {
for (let i = 0; i < secondaryHiddenRow.length; i++) {
secondaryHiddenRow[i].classList.toggle('dis-none');
}
});
.dis-none {
display: none;
}
<table>
<tbody>
<tr class="results-main-row has-hidden-row">
<td>
<a class="pending-wide-col-name">some text</a>
</td>
</tr>
<tr class="results-secondary-hidden-row dis-none">
<td>some text</td>
</tr>
<tr class="results-secondary-hidden-row dis-none">
<td>some text</td>
</tr>
<tr class="results-secondary-hidden-row dis-none">
<td>some text</td>
</tr>
</tbody>
</table>
I'm trying find and Delete the rows <tr> as you see in code below, but for some reason it can't find elements.
$('#ResultProduct').on('click', '.deletebtn', function(e) {
var targetElement = $(e.target);
$(targetElement).closest("tr").find('.RMAJS').remove();
$(targetElement).closest("tr").find('.section').remove();
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<tbody id="ResultProduct">
<tr>
<td><a class="deletebtn">Delete</a></td>
</tr>
<tr class="RMAJS">
<td>some text 1</td>
<td>some text 1</td>
</tr>
<tr class="section">
<td>some text 1</td>
<td>some text 1</td>
</tr>
<tr>
<td><a class="deletebtn">Delete</a></td>
</tr>
<tr class="RMAJS">
<td>some text 2</td>
<td>some text 2</td>
</tr>
<tr class="section">
<td>some text 2</td>
<td>some text 2</td>
</tr>
</tbody>
</table>
Can anyone please help me!
Using closest() then find() will go up to the tr then back down into the element using find(). You would need to find('tbody') then look inside that element to find('.RMAJS').
This wouldn't solve your issue, because you would end up removing all .RMAJS elements from the tbody when it looks like all you want to do is remove the next elements.
In your case, you're going to want to use next() rather than find().
$('#ResultProduct').on('click', '.deletebtn', function(e) {
var targetElement = $(e.target);
$(targetElement).closest("tr").next('.RMAJS').remove();
$(targetElement).closest("tr").next('.section').remove();
})
<table>
<tbody id="ResultProduct">
<tr>
<td><a class="deletebtn">Delete</a></td>
</tr>
<tr class="RMAJS">
<td>some text 1</td>
<td>some text 1</td>
</tr>
<tr class="section">
<td>some text 1</td>
<td>some text 1</td>
</tr>
<tr>
<td><a class="deletebtn">Delete</a></td>
</tr>
<tr class="RMAJS">
<td>some text 2</td>
<td>some text 2</td>
</tr>
<tr class="section">
<td>some text 2</td>
<td>some text 2</td>
</tr>
</tbody>
</table>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
function removeRow(row) {
$(row).closest("tr").remove();
}
<script src="https://code.jquery.com/jquery-3.1.0.js"></script><table>
<tbody id="ResultProduct">
<tr>
</tr>
<tr class="RMAJS">
<td>some text 1</td>
<td>some text 1</td>
<td><a onclick="removeRow(this)" class="deletebtn" href="#">Delete</a></td>
</tr>
<tr class="section">
<td>some text 1</td>
<td>some text 1</td>
<td><a onclick="removeRow(this)" class="deletebtn" href="#">Delete</a></td>
</tr>
<tr class="RMAJS">
<td>some text 2</td>
<td>some text 2</td>
<td><a onclick="removeRow(this)" class="deletebtn" href="#">Delete</a></td>
</tr>
<tr class="section">
<td>some text 2</td>
<td>some text 2</td>
<td><a onclick="removeRow(this)" class="deletebtn" href="#">Delete</a></td>
</tr>
</tbody>
</table>
I am unable to edit the HTML directly in a form and would like to move some things around. I created a very simplified version of what is going on below. So for example, if I would like to move the row with class "comments" to just below the row with class "matching" how could I do this on page load?
I tried doing something like:
$('tr.comments').closest('tr').after($('tr.matching').closest('tr'));
Here is the basic code, thank you for your help!! :)
<table>
<tbody>
<tr class="designation">
<td>Some text</td>
</tr>
<tr class="comments">
<td>More text</td>
</tr>
</tbody>
<tbody>
<tr class="levels">
<td>level 1</td>
</tr>
<tr class="amount">
<td>$500</td>
</tr>
</tbody>
<tbody>
<tr class="matching">
<td>donor</td>
</tr>
<tr class="mailing">
<td>yes</td>
</tr>
</tbody>
Try with this $('tr.matching').after($('tr.comments'));.
$('tr.matching').after($('tr.comments'));
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tbody>
<tr class="designation">
<td>Some text</td>
</tr>
<tr class="comments">
<td>More text</td>
</tr>
</tbody>
<tbody>
<tr class="levels">
<td>level 1</td>
</tr>
<tr class="amount">
<td>$500</td>
</tr>
</tbody>
<tbody>
<tr class="matching">
<td>donor</td>
</tr>
<tr class="mailing">
<td>yes</td>
</tr>
</tbody>
</table>
$(".matching").after($(".comments"));
This is my first post here. I have been searching through questions previously posted that sound similar to what I am encountering I've tried those answers and still haven't made it work yet.
I got the following code. Somewhat similar to what I'm working on.
CSS:
.ContentTable {
width:100%;
heigth:100%;
empty-cells:show;
}
.WidthLimited{
overflow:scroll;
overflow-x:auto;
overflow-y:hidden;
}
.ResultListContainer{
width:95%;
color:black;
}
HTML:
<div id="Wrapper">
<div id="Content1"><div/>
<span id"SearchControl">
<table class="ContentTable">
<tbody>
<tr id="Title">Title here</tr>
<tr id="Body">
<td>Some text 1</td>
<td>Some text 2</td>
<td>Some text 3</td>
</tr>
<tr id="Body">
<td>Some text 1</td>
<td>Some text 2</td>
<td>Some text 3</td>
</tr>
<tr id="Body">
<td>Some text 1</td>
<td>Some text 2</td>
<td>Some text 3</td>
</tr>
<tr id="Footer">
<td>Some text</td>
</tr>
</tbody>
</table>
</span>
<div id="ResultListWrapper" class="WidthLimited">
<table class="ResultListContainer">
<tbody>
<tr id="Title">Title here</tr>
<tr id="Body">
<td>Some text 1</td>
<td>Some text 2</td>
<td>Some text 3</td>
</tr>
<tr id="Body">
<td>Some text 1</td>
<td>Some text 2</td>
<td>Some text 3</td>
</tr>
<tr id="Body">
<td>Some text 1</td>
<td>Some text 2</td>
<td>Some text 3</td>
</tr>
<tr id="Body">
<td>Some text 1</td>
<td>Some text 2</td>
<td>Some text 3</td>
</tr>
<tr id="Body">
<td>Some text 1</td>
<td>Some text 2</td>
<td>Some text 3</td>
</tr>
<tr id="Footer">
<td>Some text</td>
</tr>
</tbody>
</table>
</div>
</div>
Also got the following JavaScript to be able to adjust the width:
function fn_wrapperResultList()
{
var wObj = document.getElementById("ResultListWrapper");
var pObj = document.getElementById("SearchControl");
if(window.attachEvent)
{
if(pObj.offsetWidth>wObj.offsetWidth)
{
wObj.style.width=pObj.offsetWidth;
}
}
else
{
wObj.style.width='100%';
}
}
In essence what I am trying to accomplish is to adjust the width of my ResultList (which in this case is wider than my SearchControl) and match the width of the SearchControl when the former's width is higher than the latter's width (ResultList.width > SearchControl.width then adjust it).
If I assign a fixed width to my WidthLimited class, my control does change and scroll-x is displayed with no problem and works as expected but I am trying to make it change according to SearchControl.
I've tried lots of things: calculating the width using the getComputedStyle and assigning it to wObj.style.width in that JavaScript code which it does change when but still does not resizes. I added the display:inline-block; to the .WidthLimited class and nothing. I read that span does not really have a specific width but changing that piece is not really an option at this point.
Is there a way to accomplish what I intend?
Have a look at this jsFiddle. Is that what you are after?
var searchControl = $('#SearchControl');
var resultList = $('#ResultListContainer');
if (searchControl.width() > resultList.width())
resultList.width(searchControl.width());
If you're not familiar with jQuery, have a look here. Ideally you should do your layout in CSS and only resort to javascript when really necessary. If you could be a bit more specific about what exactly you are trying to do we could help you find a CSS-based solution. Also you should pay attention to the difference between id and classattributes. See here for an overview. I hope that helps.
#Chopper I made changes to your initial [jsFiddle] (http://jsfiddle.net/CsYVE/35/) and luckily it is working now! The resulting script looks like this:
var searchControl = $('#SearchControl');
var resultList = $('#ResultListWrapper');
if (resultList.width() > searchControl.width())
resultList.width(searchControl.width());
This works in IE9, Chrome, FF and Opera with no issues
I have a table that looks something like this:
<asp:Repeater ID="myRepeater" runat="server">
<div id="divTable" class="divTable">
<table id="myTable">
<thead>
<tr>
<td>A</td>
</tr>
<tr>
<td>B</td>
</tr>
<tr>
<td>C</td>
</tr>
<tr>
<td>D</td>
</tr>
</thead>
<tbody id="myContent">
<tr>
<td>Some Text</td>
</tr>
<tr>
<td>Some Text</td>
</tr>
<tr>
<td>Some Text</td>
</tr>
<tr>
<td id="findMe">
<%#Eval("IsFlagged")%>
</td>
</tr>
</tbody>
</asp:Repeater>
</table>
</div>
Now, here's what I'm trying to do. If <%#Eval("IsFlagged")%> returns anything at all, i'd like to make all the cells in the table row a certain color.
I've been reading about .contains(), but I haven't found an example that simply asks "if not null, apply a .css style to the rest of the cells of the table row".
I put together an example in jsfiddle: http://jsfiddle.net/aMR5r/
Edit: Your edit makes the code a little simpler, but it's the same principle.
$(function(){
var isFlagged = $('#findMe').text();
if(isFlagged.length > 0)
{
$('#findMe').parent().addClass('yellow');
}
});
http://jsfiddle.net/aMR5r/1/
First, try to give that specific td a class or someting so you can target it. Then you can check the length of $('td.yourclassname').html();
If you are using VB.Net then you can use this code..
<tr style="background-color:<%# IIF(IsDBNull(Eval("IsFlagged"),"none","yellow") %>">
you can apply this logic to TD also.