We Keep Coding

How to get the td that contains tr with a button that has a specific attribute?

I'm trying to get all the tds in a table that contain a tr with a button to which I have specified an attribute ("boolean") with a true or false value. I need to get each td that have that attribute with value true but I can't figure out how to get it using jquery.
The structure would be the following:
<table id="table">
<thead>
</thead>
<tbody>
<tr row-id="1">
<td class="text-left">
<div />
</td>
<td class="text-left td-button">
<button boolean="true">Button</button>
</td>
</tr>
<tr row-id="2">
<td class="text-left">
<div />
</td>
<td class="text-left td-button">
<button boolean="false">Button</button>
</td>
</tr>
<tr row-id="3">
<td class="text-left">
<div />
</td>
<td class="text-left td-button">
<button boolean="true">Button</button>
</td>
</tr>
</tbody>
</table>
I have tried to do something like this:
function colour() {
$("#table tbody tr").each(function() {
let colour = $(this).children("td")[1];
}
}
But I can't go from there to get those td since I have no experience with jquery
How could I get the td with row-id 1 and 3 with Jquery and then apply a style to those td?
Thanks in advance

Use a has selector with attribute selector
var trs = $('tr:has(button[boolean="true"])');
console.log(trs);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="table">
<thead>
</thead>
<tbody>
<tr row-id="1">
<td class="text-left">
<div />
</td>
<td class="text-left td-button">
<button boolean="true">Button</button>
</td>
</tr>
<tr row-id="2">
<td class="text-left">
<div />
</td>
<td class="text-left td-button">
<button boolean="false">Button</button>
</td>
</tr>
<tr row-id="3">
<td class="text-left">
<div />
</td>
<td class="text-left td-button">
<button boolean="true">Button</button>
</td>
</tr>
</tbody>
</table>

$("#table tbody tr").each(function() {
//Filter to iterate those td's which contain Boolean true
if($(this).find('button').attr('boolean')=="true"){
let colour = $(this).children("td")[1];
colour.style.backgroundColor="red";
console.log(colour);
}
})

How to filter out divs containing numbers up to another number?

I've been working on a project where I can use a search term to filter out some div boxes. For example each div contains a number like 100, 200 or 300. When I 250 into the search input, I need it to hide the divs that contain 100 and 200, as they are less than 250. Does this make sense?
This is what I have done so far:
<input type="text" id="search_value" onkeyup="search_filter()">
<div id="container">
<table class="information">
<tr>
<td class="key">Info</td>
<td class="div_value">300</td>
</tr>
</table>
</div>
<div id="container">
<table class="information">
<tr>
<td class="key">Info</td>
<td class="div_value">250</td>
</tr>
</table>
</div>
<div id="container">
<table class="information">
<tr>
<td class="key">Info</td>
<td class="div_value">200</td>
</tr>
</table>
</div>
function search_filter() {
//Get Value of input & convert to Int
var s_value = document.getElementById("search_value").value;
s_value = parseInt(s_value);
//Get Value of in div and convert to Int
var d_value = document.getElementById("div_value").innerHTML;
d_value = parseInt(d_value);
//Hide Divs
if(s_value > d_value){
$(function(){
$(".container").hide();
document.getElementsByTagName(".container")[0].setAttribute("class", "hide_container");
});
}
else {
$(function(){
document.getElementsByTagName(".container")[0].setAttribute("class", "show_container");
});
};
}
I feel like I need to make each div unique but I'm not sure on how to go about creating a long list of div containers with numbers on a table that will hide.
Thanks

You can loop through all the td with class div_value to compare the the text with the value of input element so that you can hide/show based on the condition.
Try with jQuery's .each() the following way:
function search_filter(input) {
$('table tr td.div_value').each(function(){
if(Number($(this).text()) >= Number(input.value))
$(this).closest('.container').css({display: 'block'});
else
$(this).closest('.container').css({display: 'none'});
});
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" id="search_value" onkeyup="search_filter(this)">
<div class="container">
<table class="information">
<tr>
<td class="key">Info</td>
<td class="div_value">300</td>
</tr>
</table>
</div>
<div class="container">
<table class="information">
<tr>
<td class="key">Info</td>
<td class="div_value">250</td>
</tr>
</table>
</div>
<div class="container">
<table class="information">
<tr>
<td class="key">Info</td>
<td class="div_value">200</td>
</tr>
</table>
</div>
Please Note: I will suggest you to ignore inline event listeners.
$('#search_value').on('keyup', function(){
var input = this;
$('table tr td.div_value').each(function(){
if(Number($(this).text()) >= Number(input.value))
$(this).closest('.container').css({display: 'block'});
else
$(this).closest('.container').css({display: 'none'});
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" id="search_value">
<div class="container">
<table class="information">
<tr>
<td class="key">Info</td>
<td class="div_value">300</td>
</tr>
</table>
</div>
<div class="container">
<table class="information">
<tr>
<td class="key">Info</td>
<td class="div_value">250</td>
</tr>
</table>
</div>
<div class="container">
<table class="information">
<tr>
<td class="key">Info</td>
<td class="div_value">200</td>
</tr>
</table>
</div>

First, most of your selectors are incorrect.
Do not use multiple ids with the same value (container). Change to a class if you need the same name.
Also if you can use jQuery then use it everywhere, or dont use it at all.
function search_filter() {
//Get Value of input & convert to Int
var s_value = parseInt($("#search_value").val());
$('.container').each((i, element) => {
if (s_value > parseInt($(element).find('.div_value').text())) {
$(element).hide();
$(element).addClass('hide_container')
} else {
$(element).show();
$(element).addClass('show_container')
}
});
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" id="search_value" onkeyup="search_filter()">
<div class="container">
<table class="information">
<tr>
<td class="key">Info</td>
<td class="div_value">300</td>
</tr>
</table>
</div>
<div class="container">
<table class="information">
<tr>
<td class="key">Info</td>
<td class="div_value">250</td>
</tr>
</table>
</div>
<div class="container">
<table class="information">
<tr>
<td class="key">Info</td>
<td class="div_value">200</td>
</tr>
</table>
</div>

Using vanilla Javascript, I would solve it this way.
On every input event on the <input />, walk through the list of .div_value, and set their closest('container')'s display property accordingly.
const valueDivs = [...document.querySelectorAll('.div_value')]
search_value.addEventListener('input', () => {
for (const valueDiv of valueDivs) {
valueDiv.closest('.container').style.display =
Number(valueDiv.textContent) >= Number(search_value.value)
? 'block'
: 'none'
}
})
<label> Filter by number: <input type="number" min="0" id="search_value" /></label>
<div class="container">
<table class="information">
<tr>
<td class="key">Info</td>
<td class="div_value">150</td>
</tr>
</table>
</div>
<div class="container">
<table class="information">
<tr>
<td class="key">Info</td>
<td class="div_value">200</td>
</tr>
</table>
</div>
<div class="container">
<table class="information">
<tr>
<td class="key">Info</td>
<td class="div_value">250</td>
</tr>
</table>
</div>

Here's an example of using a forEach loop to show/hide the divs when you run your function. This uses vanilla javascript.
<input type="text" id="search_value" onkeyup="search_filter()">
<div class="container">
<table class="information">
<tr>
<td class="key">Info</td>
<td class="div_value">300</td>
</tr>
</table>
</div>
<div class="container">
<table class="information">
<tr>
<td class="key">Info</td>
<td class="div_value">250</td>
</tr>
</table>
</div>
<div class="container">
<table class="information">
<tr>
<td class="key">Info</td>
<td class="div_value">200</td>
</tr>
</table>
</div>
function search_filter() {
//Get Value of input & convert to Int
var s_value = document.getElementById("search_value").value;
s_value = parseInt(s_value);
//Get Value of in div and convert to Int
var d_value_containers = document.querySelectorAll(".container");
// Loop through divs and hide divs that have a lower value than the search term
d_value_containers.forEach(function(container){
var d_value = container.querySelector(".div_value");
var d_value_interger = parseInt(d_value.innerHTML);
if(s_value > d_value_interger) {
container.style.display = 'none';
} else {
container.style.display = 'block';
}
});
}

index class in different rows in jquery

I have a table with buttons on each row. I am trying to click on a button on a particular and it picks the value .claim_value field of the same row and put the value in the td opposite it .vet_value.
Here's my code
<table id="tasks" class="col-md-12 table">
<thead>
<tr>
<td>Service</td>
<td>Key notes</td>
<td>Claim Amount</td>
<td>Vetted Amount</td>
</tr>
</thead>
<tbody>
<tr class="therow">
<td class="claim_value">hey</td>
<td class="vet_value"></td>
<button class="button">button</button>
</tr>
<tr class="therow">
<td class="claim_value">you</td>
<td class="vet_value"></td>
<button class="button">button</button>
</tr>
<tr class="therow">
<td class="claim_value">me</td>
<td class="vet_value"></td>
<button class="button">button</button>
</tr>
<tr class="therow">
<td class="claim_value">them</td>
<td class="vet_value"></td>
<button class="button">button</button>
</tr>
</tbody>
</table>
so i want to be able to click on class="button"
$(".button").click(function(){
(".claim_value").val() of this same row goes into (".vet_value").val()
});

Just call parent() to access the parent <tr> element and modify <td> from there
$(".button").click(function(){
var $parent=$(this).parent();
var claimValue=$parent.find(".claim_value").text();
$parent.find(".vet_value").text(claimValue);
});

you don't need to use .val() unless the element is input or textarea
with td use .text() also you need to use $(this) to refer to the button you clicked and closest('tr') to select the closest row then .find() to find the element with class you want
$(".button").click(function(){
var claim_value = $(this).closest('tr').find(".claim_value").text();
$(this).closest('tr').find(".vet_value").text(claim_value);
});

Use html() that is not val(). Insert td inside which has to be the direct child of tr. As val() only comes for input and textarea.
$(".button").click(function(){
alert($(this).closest('tr').find(".claim_value").html());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="tasks" class="col-md-12 table">
<thead>
<tr>
<td>Service</td>
<td>Key notes</td>
<td>Claim Amount</td>
<td>Vetted Amount</td>
</tr>
</thead>
<tbody>
<tr class="therow">
<td class="claim_value">hey</td>
<td class="vet_value"></td>
<td>
<button class="button">button</button>
</td>
</tr>
<tr class="therow">
<td class="claim_value">you</td>
<td class="vet_value"></td>
<td>
<button class="button">button</button>
</td>
</tr>
<tr class="therow">
<td class="claim_value">me</td>
<td class="vet_value"></td>
<td>
<button class="button">button</button>
</td>
</tr>
<tr class="therow">
<td class="claim_value">them</td>
<td class="vet_value"></td>
<td>
<button class="button">button</button>
</td>
</tr>
</tbody>
</table>

jquery selector inside a table td

here is my html code wordpress that makes a table in my plugin dash page:
<table class="wp-list-table widefat fixed exams">
<thead></thead>
<tfoot></tfoot>
<tbody id="the-list" data-wp-lists="list:exam">
<tr class="alternate">
<th class="check-column" scope="row">
<input class="exam_cb" type="checkbox" value="22" name="exam[]"></input>
</th>
<td class="ID column-ID"></td>
<td class="exam_name column-exam_name">
this text is to be selected
<span style="color:red"></span>
<div class="row-actions">
<span class="subjects"></span>
<span class="settings"></span>
<span class="clone"></span>
<span class="users"></span>
<span class="uploads"></span>
</div>
</td>
<td class="total_user column-total_user"></td>
<td class="date_create column-date_create"></td>
<td class="short_code column-short_code"></td>
</tr>
<tr></tr>
<tr class="alternate"></tr>
<tr></tr>
<tr class="alternate"></tr>
<tr></tr>
<tr class="alternate"></tr>
</tbody>
</table>
with my jquery code i want to select this text is to be selected only inside td:
$(".exam_cb").click(function() {
$(this).parent("th").next("td").next("td").hide(); // hides td class exam_name
$(this).parent("th").next("td").next("td").text().hide(); // not working
$(this).parent("th").next("td").next("td").html().hide(); // not working
$(this).parent("th").next("td").next("td").val().hide(); // not working
});
what is wrong with me?

You need to select text node by filtering them by nodeType. and then wrap the content in dom element with css display none:
$(this).parent().siblings('.exam_name').contents().filter(function() {
return this.nodeType == 3;
}).wrap('<span style="display:none"></style>');//wrap in span and hide the,
Working Demo

You cannot apply hide on text() - you apply it on an HTML Element
$(this).parent("th").next("td").next("td").hide();
Thats causing a JS Error and hence none of your other statements after that is working
and the same is true for val().hide() - A JS Error will be thrown
$(".exam_cb").click(function() {
var columnmTo=$(this).parent("th").next("td").next("td");
columnmTo.find('.selectedTest').addClass('highlight');
columnmTo.find('.error').hide();
columnmTo.find('.row-actions').hide();
});
span.highlight
{
font-weight:bold;
}
span.error
{
font-weight:bold;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table class="wp-list-table widefat fixed exams">
<thead></thead>
<tfoot></tfoot>
<tbody id="the-list" data-wp-lists="list:exam">
<tr class="alternate">
<th class="check-column" scope="row">
<input class="exam_cb" type="checkbox" value="22" name="exam[]"></input>
</th>
<td class="ID column-ID"></td>
<td class="exam_name column-exam_name">
<span class="selectedTest">this text is to be selected</span>
<span class="error">Hello</span>
<div class="row-actions">
<span class="subjects">a</span>
<span class="settings">b</span>
<span class="clone">c</span>
<span class="users">c</span>
<span class="uploads">d</span>
</div>
</td>
<td class="total_user column-total_user"></td>
<td class="date_create column-date_create"></td>
<td class="short_code column-short_code"></td>
</tr>
<tr></tr>
<tr class="alternate"></tr>
<tr></tr>
<tr class="alternate"></tr>
<tr></tr>
<tr class="alternate"></tr>
</tbody>
</table>

How to move table to the top of the DIV container based on a Condition with JQuery?

I have multiple tables stacked inside a div container as below:-
<div id="myContent" style="display: block;">
<table id="myTable" cellspacing="0" cellpadding="0" >
<tbody>
<tr>
<td style="padding-top: 10px;">
<table>
<tbody>
<tr>
<td align="left">
Health Care
</td>
</tr>
<tr>
<td align="left">
20 Wisconsin Ave</td>
</tr>
<tr>
<td align="left">
641.235.5900
</td>
</tr>
<tr>
<td align="left">
No website
</td>
</tr>
</tbody>
</table>
</td>
<td align="right">
<img src="images/phone.png" class="imgHeader" >
</td>
</tr>
</tbody>
</table>
<table id="myTable" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td style="padding-top: 10px;">
<table >
<tbody>
<tr>
<td align="left">Housing</td>
</tr>
<tr>
<td align="left">
N/A</td>
</tr>
<tr>
<td align="left">
641.255.3884
</td>
</tr>
<tr>
<td align="left">
www.housingl.org
</td>
</tr>
</tbody>
</table>
</td>
<td align="right">
<img src="images/phone.png" class="imgHeader" >
</td>
</tr>
</tbody>
</table>
<table id="myTable" cellspacing="0" cellpadding="0" >
<tbody>
<tr>
<td style="padding-top: 10px;">
<table>
<tbody>
<tr>
<td align="left">
Employment</td>
</tr>
<tr>
<td align="left">N/A</td>
</tr>
<tr>
<td align="left">
641.743.0500
</td>
</tr>
<tr>
<td align="left">
http://www.noexperience.org
</td>
</tr>
</tbody>
</table>
</td>
<td align="right">
<img src="images/phone.png" class="imgHeader" >
</td>
</tr>
</tbody>
</table>
</div>
I am trying to run a condition to find the TD with N/A and move those tables to the top. This is an additional question bult on the top of my previous question:
Finding the text "N/A" and hiding an image in table's next TD
I have a starting trouble with this code. Any support is appreciated.

$('td:contains(N/A)').closest('table').prependTo('#myContent');
jsFiddle example

$('td').each(function(){
if ($(this).text() === 'N/A') {
$(this).parents('table').detach().prependTo('#myContent');
}
});