Cant find table-rows

Cant find table-rows - javascript

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>

Related

Get table header (th) on tooltip of table cell (td) when hovering over cell

I have Table of 3 columns - when I hover on column 3 the tooltip should show me its table header th value .
Here's what I have so far (not working):
Javascript:
$('#waypointsTable td').hover(function() {
var $td='td';
var $th = $td.closest('tbody').prev('thead').find('> tr > th:eq(' + $td.index() + ')');
});
html:
<table id="waypointsTable" border="1">
<tbody>
<tr>
<th>1</th>
<th>2</th>
<th>3</th>
</tr>
<tr>
<td>some text 1</td>
<td>some text 1</td>
<td>some text 1</td>
</tr>
<tr>
<td>some text 2</td>
<td>some text 2</td>
<td>some text 2</td>
</tr>
<tr>
<td>some text 3</td>
<td>some text 3</td>
<td>some text 3</td>
</tr>
</tbody>
</table>

Based on the javascript provided:
First, if you're using .prev("thead") then you need to change your html so that it has a <thead>.
Next, use mouseover rather than hover - not much difference, but you don't need to do anything on 'hover-out' so no need for that.
Use var td = $(this) to get the current cell
Use your existing code (mostly) to get the related th
Then, use td.attr("title", th.text()) to set the tooltip on the cell.
Put together:
$('#waypointsTable tbody td').on("mouseover", function() {
var td = $(this);
var th = td.closest('tbody').prev('thead').find('> tr > th:eq(' + td.index() + ')');
td.attr("title", th.text());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="waypointsTable" border="1">
<thead>
<tr>
<th>1</th>
<th>2</th>
<th>3</th>
</tr>
</thead>
<tbody>
<tr>
<td>some text 1</td>
<td>some text 1</td>
<td>some text 1</td>
</tr>
<tr>
<td>some text 2</td>
<td>some text 2</td>
<td>some text 2</td>
</tr>
<tr>
<td>some text 3</td>
<td>some text 3</td>
<td>some text 3</td>
</tr>
</tbody>
</table>
You could do this on startup instead as the tooltip won't change once set.

Rearrange table rows in hardcoded 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"));

Add class to table in div containing <a> with specified href

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>

MultiPage print with Javascript and CSS

I am facing issues showing page nos while printing multiple multipage reports
below is the sample HTML Format :
<style type="text/css"> body {
counter-reset: report 1 page 0;
}
td.footer:after {
counter-increment: page;
content: "Page " counter(page)" of Report " counter(report);
}
.rowLabel3 {
counter-reset: page 0;
counter-increment: report
}
</style>
<table>
<thead style="display: table-header-group;">
<tr>
<th>Report Specific Header Contents which needs to come on every page we are displaying report</th>
</tr>
</thead>
<tbody style="display: table-row-group;">
<tr>
<td>Some Data</td>
</tr>
<tr>
<td>Some Data</td>
</tr>
<tr>
<td>Some Data</td>
</tr>
<tr>
<td>Some Data</td>
</tr>
<tr>
<td>Some Data</td>
</tr>
<tr>
<td>Some Data</td>
</tr>
<tr>
<td>Some Data</td>
</tr>
<tr>
<td>Some Data</td>
</tr>
<tr>
<td>Some Data</td>
</tr>
<tr>
<td>Some Data</td>
</tr>
<tr>
<td>Some Data</td>
</tr>
<tr>
<td>Some Data</td>
</tr>
<tr>
<td>Some Data</td>
</tr>
<tr>
<td>Some Data</td>
</tr>
<tr>
<td>Some Data</td>
</tr>
<tr>
<td>Some Data</td>
</tr>
<tr>
<td>Some Data</td>
</tr>
<tr>
<td>Some Data</td>
</tr>
<tr>
<td>Some Data</td>
</tr>
<tr>
<td>Some Data</td>
</tr>
<tr>
<td>Some Data</td>
</tr>
<tr>
<td>Some Data</td>
</tr>
<tr>
<td>Some Data</td>
</tr>
<tr>
<td>Some Data</td>
</tr>
<tr>
<td>Some Data</td>
</tr>
<tr>
<td>Some Data</td>
</tr>
<tr>
<td>Some Data</td>
</tr>
<tr>
<td>Some Data</td>
</tr>
<tr>
<td>Some Data</td>
</tr>
<tr>
<td>Some Data</td>
</tr>
<tr>
<td>Some Data</td>
</tr>
<tr>
<td>Some Data</td>
</tr>
<tr>
<td>Some Data</td>
</tr>
<tr>
<td>Some Data</td>
</tr>
<tr>
<td>Some Data</td>
</tr>
<tr>
<td>Some Data</td>
</tr>
<tr>
<td>Some Data</td>
</tr>
<tr>
<td>Some Data</td>
</tr>
<tr>
<td>Some Data</td>
</tr>
<tr>
<td>Some Data</td>
</tr>
<tr>
<td>Some Data</td>
</tr>
<tr>
<td>Some Data</td>
</tr>
<tr>
<td>Some Data</td>
</tr>
<tr>
<td>Some Data</td>
</tr>
<tr>
<td>Some Data</td>
</tr>
<tr>
<td>Some Data</td>
</tr>
<tr>
<td>Some Data</td>
</tr>
<tr>
<td>Some Data</td>
</tr>
<tr>
<td>Some Data</td>
</tr>
<tr>
<td>Some Data</td>
</tr>
<tr>
<td>Some Data</td>
</tr>
<tr>
<td>Some Data</td>
</tr>
<tr>
<td>Some Data</td>
</tr>
<tr>
<td>Some Data</td>
</tr>
</tbody>
<tfoot style="display: table-footer-group;">
<tr>
<td class="footer">
</td>
</tr>
</tfoot>
</table>
<div class="rowLabel3" style="page-break-after:always;">*** END OF REPORT ***</div>
<table>
<thead style="display: table-header-group;">
<tr>
<th>Report Specific Header Contents which needs to come on every page we are displaying report</th>
</tr>
</thead>
<tbody style="display: table-row-group;">
<tr>
<td>Some Data1</td>
</tr>
<tr>
<td>Some Data1</td>
</tr>
<tr>
<td>Some Data1</td>
</tr>
<tr>
<td>Some Data1</td>
</tr>
<tr>
<td>Some Data1</td>
</tr>
<tr>
<td>Some Data1</td>
</tr>
<tr>
<td>Some Data1</td>
</tr>
<tr>
<td>Some Data1</td>
</tr>
<tr>
<td>Some Data1</td>
</tr>
<tr>
<td>Some Data1</td>
</tr>
<tr>
<td>Some Data1</td>
</tr>
<tr>
<td>Some Data1</td>
</tr>
<tr>
<td>Some Data1</td>
</tr>
<tr>
<td>Some Data1</td>
</tr>
<tr>
<td>Some Data1</td>
</tr>
<tr>
<td>Some Data1</td>
</tr>
<tr>
<td>Some Data1</td>
</tr>
<tr>
<td>Some Data1</td>
</tr>
<tr>
<td>Some Data1</td>
</tr>
<tr>
<td>Some Data1</td>
</tr>
<tr>
<td>Some Data1</td>
</tr>
<tr>
<td>Some Data1</td>
</tr>
<tr>
<td>Some Data1</td>
</tr>
<tr>
<td>Some Data1</td>
</tr>
<tr>
<td>Some Data1</td>
</tr>
<tr>
<td>Some Data1</td>
</tr>
<tr>
<td>Some Data1</td>
</tr>
<tr>
<td>Some Data1</td>
</tr>
<tr>
<td>Some Data1</td>
</tr>
<tr>
<td>Some Data1</td>
</tr>
<tr>
<td>Some Data1</td>
</tr>
<tr>
<td>Some Data1</td>
</tr>
<tr>
<td>Some Data1</td>
</tr>
<tr>
<td>Some Data1</td>
</tr>
<tr>
<td>Some Data1</td>
</tr>
<tr>
<td>Some Data1</td>
</tr>
<tr>
<td>Some Data1</td>
</tr>
<tr>
<td>Some Data1</td>
</tr>
<tr>
<td>Some Data1</td>
</tr>
<tr>
<td>Some Data1</td>
</tr>
<tr>
<td>Some Data1</td>
</tr>
<tr>
<td>Some Data1</td>
</tr>
<tr>
<td>Some Data1</td>
</tr>
<tr>
<td>Some Data1</td>
</tr>
<tr>
<td>Some Data1</td>
</tr>
<tr>
<td>Some Data1</td>
</tr>
<tr>
<td>Some Data1</td>
</tr>
<tr>
<td>Some Data1</td>
</tr>
<tr>
<td>Some Data1</td>
</tr>
<tr>
<td>Some Data1</td>
</tr>
<tr>
<td>Some Data1</td>
</tr>
<tr>
<td>Some Data1</td>
</tr>
<tr>
<td>Some Data1</td>
</tr>
<tr>
<td>Some Data1</td>
</tr>
<tr>
<td>Some Data1</td>
</tr>
<tr>
<td>Some Data1</td>
</tr>
<tr>
<td>Some Data1</td>
</tr>
<tr>
<td>Some Data1</td>
</tr>
</tbody>
<tfoot style="display: table-footer-group;">
<tr>
<td class="footer">
</td>
</tr>
</tfoot>
</table>
<div class="rowLabel3" style="page-break-after:always;">*** END OF REPORT ***</div>
Here , when Tfoot appear on each page It does not actually increment the section.
If this approach is correct what I have tried is also count the no of rows and then added extra row after 40 rows and add a page break with Page nos. But that is not consistent across different reports.

It's work like this :
body {
counter-reset: report 1 page 0 ;
}
td.footer:after {
counter-increment: page;
content: "Page " counter(page) " of Report " counter(report);
}
.rowLabel3{
counter-reset: page 1;
counter-increment: report
}
i just change #page and rename

changing width of div to match width of span tag

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

Develop Reference

JavaScript is the programming language of the Web.

Cant find table-rows - javascript

Related

Get table header (th) on tooltip of table cell (td) when hovering over cell

Rearrange table rows in hardcoded table

Add class to table in div containing <a> with specified href

MultiPage print with Javascript and CSS

changing width of div to match width of span tag

Categories

Resources