jQuery find elements that match criteria

jQuery find elements that match criteria - javascript

Got a tricky one where I want to add a class to all the parent <tr>'s of <td>'s which have either a <span> or a <div> element within them. So I have a table with markup as below:
<table>
<tr>
<td>
</td>
<td>
</td>
<td>
<div>
</div>
</td>
<td>
</td>
</tr>
<tr>
<td>
<span></span>
</td>
<td>
</td>
<td>
<div>
</div>
</td>
<td>
</td>
</tr>
</table>
So I want the <td>'s that have either a <span> or <div> to have a class added to them by jQuery...
I can't seem to work out how to loop through all the <td>'s to check their descendant and then add the class to those that have either a <span> or <div> inside... Is this possible?
Thanks for any light you can shed on it! It's driving me mad!

You can check with .has() if tr has div or span as a descendant:
$('table tr').has('div,span').addClass('someClass');
Check the below snippet:
$('table tr').has('div,span').addClass('someClass');
.someClass {
background-color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
<td>td 1</td>
<td>td 2</td>
<td>
<div>div</div>
</td>
<td>td 3</td>
</tr>
<tr>
<td>td 1</td>
<td>td 2</td>
<td>td 3</td>
<td>td 4</td>
</tr>
<tr>
<td><span>span</span>
</td>
<td>td 1</td>
<td>
<div>div</div>
</td>
<td>td 2</td>
</tr>
<tr>
<td>td 1</td>
<td>td 2</td>
<td>td 3</td>
<td>td 4</td>
</tr>
</table>

Related

How to remove a pattern of table row elements from a table?

If I have the following table, which I can't manually touch, but can apply javascript to...
<table data="customTable">
<tr>
<td>item 1</td>
</tr>
<tr>
<td height="10"></td>
</tr>
<tr>
<td>item 2</td>
</tr>
<tr>
<td height="10"></td>
</tr>
</table>
...when the DOM loads fully, how can I remove every instance of <tr><td height="10"></td></tr> from the above table via jQuery or raw JavaScript? I don't need that row at all and its causing design issues for me. This is my first time trying to learn how to replace a full pattern of elements.
Hopefully, this is doable via JavaScript?

This should do the trick.
jQuery
$('td[height="10"]').parent().remove();
https://jsfiddle.net/uzv3fn2e/1/
Vanilla JS
Array.from(document.querySelectorAll('td[height="10"]')).forEach(td => td.parentNode.remove());
https://jsfiddle.net/t7y6aqc5/

You can use :has() selector to select tr that has td with specific attribute
$("tr:has(td[height='10'])").remove()
$("tr:has(td[height='10'])").remove()
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table data="customTable">
<tr>
<td>item 1</td>
</tr>
<tr>
<td height="10"></td>
</tr>
<tr>
<td>item 2</td>
</tr>
<tr>
<td height="10"></td>
</tr>
</table>

without using jquery javascript has also remove()
document.querySelectorAll("td").forEach(el => el.getAttribute("height") === "10" && el.parentNode.remove())
<table data="customTable">
<tr>
<td>item 1</td>
</tr>
<tr>
<td height="10"></td>
</tr>
<tr>
<td>item 2</td>
</tr>
<tr>
<td height="10"></td>
</tr>
</table>

How can i get the dynamic value of button on click with id or data attribute

HI in this code only the first button on click event is working but when i click on 2nd nothin happen i don't want to use input:button coz i have multiple button on page..
<table border="1">
<tr>
<td>Name</td>
<td>Email</td>
<td>phone</td>
<td>Btn</td>
</tr>
<tr>
<td>user 1</td>
<td>user1#mail.com</td>
<td>123456</td>
<td>
<button id="btnids" data-id="a1" value="a1">active</button>
</td>
</tr>
<tr>
<td>user 1</td>
<td>user1#mail.com</td>
<td>123456</td>
<td>
<button id="btnids" data-id="a2" value="a2">active</button>
</td>
</tr>
<tr>
<td>user 1</td>
<td>user1#mail.com</td>
<td>123456</td>
<td>
<button id="btnids" data-id="a3" value="a3">active</button>
</td>
</tr>
</table>
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#btnids").click(function(){
alert($(this).val());
});
});
</script>
thanks!

Attribute id should be unique. Change the attribute from id to class:
$(document).ready(function(){
$(".btnids").click(function(){
alert($(this).val());
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table border="1">
<tr>
<td>Name</td>
<td>Email</td>
<td>phone</td>
<td>Btn</td>
</tr>
<tr>
<td>user 1</td>
<td>user1#mail.com</td>
<td>123456</td>
<td>
<button class="btnids" data-id="a1" value="a1">active</button>
</td>
</tr>
<tr>
<td>user 1</td>
<td>user1#mail.com</td>
<td>123456</td>
<td>
<button class="btnids" data-id="a2" value="a2">active</button>
</td>
</tr>
<tr>
<td>user 1</td>
<td>user1#mail.com</td>
<td>123456</td>
<td>
<button class="btnids" data-id="a3" value="a3">active</button>
</td>
</tr>
</table>

Use class instead of ID because element IDs should be unique within the entire document.
<table border="1">
<tr>
<td>Name</td>
<td>Email</td>
<td>phone</td>
<td>Btn</td>
</tr>
<tr>
<td>user 1</td>
<td>user1#mail.com</td>
<td>123456</td>
<td>
<button class="btnids" data-id="a1" value="a1">active</button>
</td>
</tr>
<tr>
<td>user 1</td>
<td>user1#mail.com</td>
<td>123456</td>
<td>
<button class="btnids" data-id="a2" value="a2">active</button>
</td>
</tr>
<tr>
<td>user 1</td>
<td>user1#mail.com</td>
<td>123456</td>
<td>
<button class="btnids" data-id="a3" value="a3">active</button>
</td>
</tr>
</table>
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".btnids").on('click',function(){
alert($(this).val());
});
});
</script>

How can remove next cell in table using JavaScript?

I have the code below:
function colspan(){
var x = document.getElementById("Cell2");
x.setAttribute("colspan", 2);
x.next().remove();
}
<table border="1">
<tr>
<td id="Cell1">Cell 1</td>
<td id="Cell2">Cell 2</td>
<td id="Cell3">Cell 3</td>
</tr>
<tr>
<td id="Cell4">Cell 4</td>
<td id="Cell5">Cell 5</td>
<td id="Cell6">Cell 6</td>
</tr>
<tr>
<td id="Cell7">Cell 7</td>
<td id="Cell8">Cell 8</td>
<td id="Cell9">Cell 9</td>
</tr>
</table>
<input type="button" onclick="colspan();" value="Change"/>
I would like to delete the next cell of the current cell I have called. When the Cell 2 is colspan, the Cell 3 should be removed, but I use .next().remove() is not working. Anyone can help?

This is something you could do.
function colspan() {
var ele = document.getElementById("Cell2");
ele.setAttribute("colspan", 2);
if (ele.nextElementSibling) {
ele.nextElementSibling.remove();
}
}
<table border="1">
<tr>
<td id="Cell1">Cell 1</td>
<td id="Cell2">Cell 2</td>
<td id="Cell3">Cell 3</td>
</tr>
<tr>
<td id="Cell4">Cell 4</td>
<td id="Cell5">Cell 5</td>
<td id="Cell6">Cell 6</td>
</tr>
<tr>
<td id="Cell7">Cell 7</td>
<td id="Cell8">Cell 8</td>
<td id="Cell9">Cell 9</td>
</tr>
</table>
<input type="button" onclick="colspan();" value="Change" />

I think you are mixing jQuery and pure JS..
You should use nextSibling() & removeChild(element) on parent.
have a look here: Remove element by id

The last remove() function was on jquery function. so use jquery library link and call the id with jquery type.
function colspan(){
var x = document.getElementById("Cell2");
x.setAttribute("colspan", 2);
$('#Cell2').next().remove();
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table border="1">
<tr>
<td id="Cell1">Cell 1</td>
<td id="Cell2">Cell 2</td>
<td id="Cell3">Cell 3</td>
</tr>
<tr>
<td id="Cell4">Cell 4</td>
<td id="Cell5">Cell 5</td>
<td id="Cell6">Cell 6</td>
</tr>
<tr>
<td id="Cell7">Cell 7</td>
<td id="Cell8">Cell 8</td>
<td id="Cell9">Cell 9</td>
</tr>
</table>
<input type="button" onclick="colspan();" value="Change"/>

JavaScript & Checkboxes - Filtering

I have 4 tables with about a hundred rows in each table. Each table has its own unique ID (ABC1, ABC2, etc) and each row of each table row has its own unique ID (ABC1-Val1, ABC1-Val2, etc). Each of the rows has its own checkbox (with its own unique name).
I am looking for a piece of JavaScript (possibly working with jQuery) that will work from a button click which, when clicked, the will display only the rows of the tables that have been selected. [Possibly include a remove filtering too].
Thinking out loud - I could use a span with a hidden element toggled between 0 and 1 if the checkbox is unchecked/checked.
Can anyone shed some slight on how to achieve this please?

Possibly something like this?
http://jsfiddle.net/HegPJ/2/
html:
<table border="1" id="tableId1">
<thead>
<tr>
<td>Header 1</td>
<td>Header 2</td>
<td>Header 3</td>
</tr>
</thead>
<tbody>
<tr>
<td><input type="checkbox"/></td>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td><input type="checkbox"/></td>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
</tbody>
</table>
<hr/>
<input type="button" value="Filter" id="filterButt"/>
<input type="button" value="Reset" id="resetButt"/>
JS:
$('#filterButt').click(function(){
$('#tableId1 tbody').find('tr:not(:has(:checkbox:checked))').hide();
});
$('#resetButt').click(function(){
$('#tableId1').find('tr').show();
$('#tableId1 input:checkbox').removeAttr('checked');
});

This should work fine:
<div>
<button type="button" id="filterTablesbtn">Filter</button>
<button type="button" id="clearFilterbtn">Clear Filter</button>
</div>
ABC1
<table id="ABC1">
<tr>
<td>Test</td><td><input type="checkbox"/></td>
</tr>
<tr>
<td>Test 2</td><td><input type="checkbox" /></td>
</tr>
</table>
ABC2
<table id="ABC2">
<tr>
<td>Test</td><td><input type="checkbox"/></td>
</tr>
<tr>
<td>Test 2</td><td><input type="checkbox" /></td>
</tr>
</table>
ABC3
<table id="ABC3">
<tr>
<td>Test</td><td><input type="checkbox"/></td>
</tr>
<tr>
<td>Test 2</td><td><input type="checkbox"/></td>
</tr>
</table>
window.onload = function()
{
$('#filterTablesbtn').click(function(){
filterTable('ABC1');
filterTable('ABC2');
});
$('#clearFilterbtn').click(function(){
clearFilter('ABC1');
clearFilter('ABC2');
});
}
function filterTable(id)
{
$('#' + id + ' tr').each(function(){
if($(this).find('input[type=checkbox]').is(":checked"))
$(this).hide();
});
}
function clearFilter(id)
{
$('#' + id + ' tr').show();
}
See the fiddle here:
http://jsfiddle.net/SpAm/pSzk7/

Toggle the <TR>

I am trying to do hide the belonging rows. For example if you click on 'Sub Title 1' which will then hide Item 1, Item 2 and Item 3 rows only.
Example:
<table border="1">
<tbody>
<tr class="head">
<td> title </td>
</tr>
<tr class="sub-title">
<td>Sub Title 1</td>
</tr>
<tr> <td>Item 1</td> </tr>
<tr> <td>Item 2</td> </tr>
<tr> <td>Item 3</td> </tr>
<tr class="sub-title">
<td>Sub Title 2</td>
</tr>
<tr> <td>Item 4</td> </tr>
<tr> <td>Item 5</td> </tr>
<tr> <td>Item 6</td> </tr>
</tbody>
</table>
-
$('.sub-title').click( function() {
$(this).parent().nextUntil('.sub-title').toggle();
})
It doesn't seem to work...

nextUntil selects for siblings, not children. Remove the "parent" from your call.
Edited to respond to further question about excluding some rows based on class. Obviously you can also accommodate Kolink's response about preventing toggle's "display: block" overwriting the default "display: table-row", but as long as you test in all supported browsers, I don't see any problem with using toggle.
$('.sub-title').click( function() {
$(this).nextUntil('.sub-title').each(function() {
if (!$(this).hasClass('order'))
$(this).toggle();
});
});

You have to toggle manually:
$(".sub-title").on("click",function() {
$(this).nextUntil(".sub-title").each(function() {
this.style.display = this.style.display == "none" ? "" : "none";
});
});

Develop Reference

JavaScript is the programming language of the Web.

jQuery find elements that match criteria - javascript

Related

How to remove a pattern of table row elements from a table?

How can i get the dynamic value of button on click with id or data attribute

How can remove next cell in table using JavaScript?

JavaScript & Checkboxes - Filtering

Toggle the <TR>

Categories

Resources