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>
Related
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 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>
How to pull a string from a table (see screenshot) with a custom Js for google tag manager dataLayer.See here :http://i.stack.imgur.com/RtpbO.jpg 1
I tried this
function () {
document.getElementsByClassName('shop_table order_details');
return;
}
But no way, i always get : undefined
Tks for the help
your function
function () {
document.getElementsByClassName('shop_table order_details');
return;
}
returns undefined always as you made it so. return; will always return undefined.
and to get value from table cell
html
<table>
<thead>
<tr>
<td>some text</td>
</tr>
</thead>
<tbody>
<tr>
<td>some text</td>
</tr>
</tbody>
<tfoot>
<tr>
<th>some text</th>
<td>some text</td>
</tr>
<tr>
<th>some text</th>
<td>your text</td>
</tr>
<tr>
<th>some text</th>
<td>some text</td>
</tr>
</tfoot>
</table>
js
var tfoot = document.getElementsByTagName("tfoot");
var tr = tfoot[0].getElementsByTagName("tr");
console.log(tr[1].getElementsByTagName("td")[0].innerText);
im trying to set background color of fields with td id = "red" but It set only the first, whats the problem?I think that I will have to set diferent names maybe?
Here is my code:
<table id="theTable">
<tr>
<td id= "red">0 - some txt</td>
<td>1 - some txt</td>
<td>2 - some txt</td>
</tr>
<tr>
<td id = "red">3 - some txt</td>
<td>4 - some txt</td>
<td>5 - some txt</td>
</tr>
<tr>
<td><button type="button" onclick="funcion('red')">Try it</button></td>
</tr>
</table>
<script>
function funcion (id) {
document.getElementById('red').style.backgroundColor = "red";
}
</script>
</html>
Thank you in advance!
Since IDs must be unique you should use classes and this JavaScript:
function funcion(id) {
var tds = document.getElementsByClassName(id);
for (var i = 0; i < tds.length; i++) {
tds[i].style.backgroundColor = "red";
}
}
jsFiddle example
HTML
<table id="theTable">
<tr>
<td class="red">0 - some txt</td>
<td>1 - some txt</td>
<td>2 - some txt</td>
</tr>
<tr>
<td class="red">3 - some txt</td>
<td>4 - some txt</td>
<td>5 - some txt</td>
</tr>
<tr>
<td>
<button type="button" onclick="funcion('red')">Try it</button>
</td>
</tr>
</table>
I would suggest using classes, as ID's are meant to be unique, thus the function only returns the first occurrence.
The code would look something like this:
<table id="theTable">
<tr>
<td class="red">some text</td>
<td>some text</td>
<td>some text</td>
</tr>
<tr>
<td class="red">some text</td>
<td>some text</td>
<td>some text</td>
</tr>
<tr>
<td class="red">some text</td>
<td>some text</td>
<td>some text</td>
</tr>
</table>
and the function:
function makeThemRed()
{
var redElements = document.getElementsByClassName("red");
for(var i = 0; i < redElements.length; i++)
{
redElements[i].style.backgroundColor = "red";
}
}
because you need to iterate through the results, which is best done by a for loop.
I need to drag and drop table rows by selecting desired rows from on table to another table. First provide option to select needed rows from one table and then all the selected rows need to be drag and drop into some other table.
I have done the sample to drag and drop single row from on table to another. Find the below code:
html:
<div id="table1" class="bitacoratable">
<table>
<thead>
<tr>
<th>ID</th>
<th>ClassName</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Class 1</td>
</tr>
<tr class="childrow">
<td collspan = "2" >
<table class="childgrid">
<tr class="draggable_tr">
<td>1</td>
<td>Student 1</td>
</tr>
<tr class="draggable_tr">
<td>2</td>
<td>Student 2</td>
</tr>
<tr class="draggable_tr">
<td>3</td>
<td>Student 3</td>
</tr>
<tr class="draggable_tr">
<td>4</td>
<td>Student 4</td>
</tr>
<tr class="draggable_tr">
<td>5</td>
<td>Student 5</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>2</td>
<td>Class 2</td>
</tr>
<tr class="childrow">
<td collspan = "2">
<table class="childgrid">
<tr class="draggable_tr">
<td>6</td>
<td>Student 6</td>
</tr>
<tr class="draggable_tr">
<td>7</td>
<td>Student 7</td>
</tr>
<tr class="draggable_tr">
<td>8</td>
<td>Student 8</td>
</tr>
<tr class="draggable_tr">
<td>9</td>
<td>Student 9</td>
</tr>
<tr class="draggable_tr">
<td>10</td>
<td>Student 10</td>
</tr>
</table>
</td>
</tr>
</tbody>
</table>
</div>
<div id="table2" class="bitacoratable">
<table>
<thead>
<tr>
<th>ID</th>
<th>ClassName</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Class 1</td>
</tr>
<tr class="childrow">
<td>
<table class="childgrid">
<tr class="draggable_tr">
<td>1</td>
<td>Student 1</td>
</tr>
<tr class="draggable_tr">
<td>2</td>
<td>Student 2</td>
</tr>
<tr class="draggable_tr">
<td>3</td>
<td>Student 3</td>
</tr>
<tr class="draggable_tr">
<td>4</td>
<td>Student 4</td>
</tr>
<tr class="draggable_tr">
<td>5</td>
<td>Student 5</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>2</td>
<td>Class 2</td>
</tr>
<tr class="childrow">
<td>
<table class="childgrid">
<tr class="draggable_tr">
<td>6</td>
<td>Student 6</td>
</tr>
<tr class="draggable_tr">
<td>7</td>
<td>Student 7</td>
</tr>
<tr class="draggable_tr">
<td>8</td>
<td>Student 8</td>
</tr>
<tr class="draggable_tr">
<td>9</td>
<td>Student 9</td>
</tr>
<tr class="draggable_tr">
<td>10</td>
<td>Student 10</td>
</tr>
</table>
</td>
</tr>
</tbody>
</table>
</div>
Script:
$("#table1 .childgrid tr, #table2 .childgrid tr").draggable({
helper: 'clone',
revert: 'invalid',
start: function (event, ui) {
$(this).css('opacity', '.5');
},
stop: function (event, ui) {
$(this).css('opacity', '1');
}
});
$("#table1 .childgrid, #table2 .childgrid").droppable({
drop: function (event, ui) {
$(ui.draggable).appendTo(this);
}
});
$(document).on("click", ".childgrid tr", function () {
$(this).addClass("selectedRow");
});
CSS:
table
{
border-collapse:collapse;
}
table, td, th
{
border:1px solid black;
}
.bitacoratable {
height: 400px;
overflow-y: auto;
width: 220px;
float:left;
}
#table1 {
margin-right: 100px;
}
.selectedRow {
background-color: #E7E7E7;
cursor: move;
}
How to do it for mutilple rows?
Regards,
Karthik.
You could use draggable's helper function. There's a nice implementation here.
Here's how it looks using the above as a guideline for your particular code:
JsFiddle Demonstration:
Explanation of what's going on:
(1) If there's only one selected, then we'll just treat this as a single drag and drop. Because it was not clicked yet (mouse holding down and dragging right away), we'll manually add the selectedRow class to ensure it gets properly removed from its original location.
(selected.length === 0) {
selected = $(this).addClass('selectedRow');
}
(2) Make a temporary container to store all the rows as one unit, as if we were dragging one item.
var container = $('<div/>').attr('id', 'draggingContainer');
container.append(selected.clone().removeClass("selectedRow"));
return container;
(3) You can modify the CSS so that we're always clicking on the items before it shows the move cursor. I already did, but feel free to change it as you like.
(4) Now we append all the table rows in our temporary divider into the .childgrid we chose to drop into and remove all elements that originally were selected.
$("#table1 .childgrid, #table2 .childgrid").droppable({
drop: function (event, ui) {
$(this).append(ui.helper.children());
$(this) is what we chose, and we're appending the elements inside our temporary divider that the helper returns, which are the table rows.
$('.selectedRow').remove();
}
Now to get rid of those table rows that we selected earlier.
});
Let me know if there are any bugs and I'll try my best to sort them out. It works on my end. Since you can highlight the text in the table rows, there could possibly be some issues if you drag and drop too fast and you're highlighting text rather than selecting the row itself.