jQuery selector for sibling of a label in a table - javascript

I'm writing a user-script for a third-party website and looking to select value inside a table which has a preceding TD with a label.
Question: I'm looking to get value1 as the result, but it's selecting the containing TD as well, so I get something else too.
Limitations
Can't modify the HTML to be more query-friendly (duh, it's not my site ;)
The table has no ids (I added them for easier discussion), not even the <table> itself has an id.
The count of the rows is dynamic, so no tr:nth-child.
Tried
I found this question: Selecting an element which has another element as direct child and used the direct selector (tr:has(> td:contains), but it still selects more than needed, because the outer TD also transitively contains label1 and has a sibling.
Notice that the background I set is transparent to show that multiple TDs are selected.
$(function() {
$('#result').text($('tr:has(td:contains("label1")) > td:nth-child(2)').text())
$('tr:has(td:contains("label1"))').css("background", "rgba(255,0,0,0.3)");
});
table { border-collapse: collapse; }
table, th, td { border: 1px solid black; }
td { padding: 4px; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<table>
<tr>
<td id="outer">
<table>
<tr><td id="known-info">label1</td><td id="want-to-select">value1</td></tr>
<tr><td>label2</td><td>value2</td></tr>
</table>
</td>
<td id="outer-sibling">something else</td>
</tr>
</table>
<br/>
This should be "value1": "<span id="result"></span>"

You could use :not(:has(td)) in your selector so it should be
$('td:contains("label1"):not(:has(td))').next().text()
This will select td that contains label1 text, but it will ignore parent td because it has another td inside.
var el = $('td:contains("label1"):not(:has(td))').next()
$('#result').text(el.text())
el.css('background', 'blue')
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
<td id="outer">
<table>
<tr>
<td id="known-info">label1</td>
<td id="want-to-select">value1</td>
</tr>
<tr>
<td>label2</td>
<td>value2</td>
</tr>
</table>
</td>
<td id="outer-sibling">something else</td>
</tr>
</table>
<br/> This should be "value1": "<span id="result"></span>"

Related

How do I display the content of closest <td> on javascript?

I have looked everywhere, but my code does not work at all. I simply want to display the content of the td I'm clicking on.
I have this table:
<tr class='rowData' tooltip='{caracteristicas}'>
<td nowrap class='Body'><a href='{caracteristicas}' target="_blank" style="color:black" onClick='return confirm("VOCÊ SERÁ REDIRECIONADO PARA:\r\r {caracteristicas}")'>{inputDescItem}</a></td>
<td nowrap class='Body' align='right'>{quantidade} {hiddenCodigoItem}</td>
<td nowrap class='Body' align='center'>{grupoEstoque}</td>
<td nowrap class='Body' align='center'>{inputCodigoItem}</td>
<td nowrap class='Body' align='center'>{btnAtualizaItem}</td>
<td nowrap class='Body' align='center'><button type="button" class="btnTest">Assign</button></td>
<td nowrap class='Body' align='center' class="testNameClass" name="output" style="display:none;">{caracteristicas}</td>
</tr>
I want it so that when I click on the CLICK ME tag, it will display (in a pop-up, alert, modal or anything) the content of the below tag (that I'm not displaying).
I have the following javascript:
$("btnTest").on("click", function() {
alert($(this).closest('tr').find('testNameClass').val());
});
I'm not very good at JS so please go easy on me.
Look like you missing
$(".btnTest") instead of $("btnTest")
and just try
$(".btnTest").on("click", function() {
alert($(this).parents('tr').find('.testNameClass').val());
});
To target specific elements using a class you need to use a dot in front of the class name. In your case .btnTest and .testNameClass.
$(".btnTest").on("click", function() {
alert($(this).closest('tr').find('.testNameClass').text());
});
As you are looking for the text inside the td element you should use .text() instead of .val()
In the below example column ent_3 is hidden and you will get its values using the script mentioned above.
$(".btnTest").on("click", function() {
alert($(this).closest('tr').find('.testNameClass').text());
});
.testNameClass {
display: none;
}
table {
border-collapse: collapse;
}
th, td { border: 1px solid #000; padding: 10px; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="table table-bordered" id="dataTable">
<thead>
<tr>
<th>pk</th>
<th>ent_1</th>
<th>ent_2</th>
<th>ent_3</th>
</tr>
</thead>
<tbody>
<tr>
<td>PK Row 0</td>
<td>Ent_1</td>
<td><button type="button" class="btnTest">Assign</button></td>
<td class="testNameClass">Row 0 Ent_3</td>
</tr>
<tr>
<td>PK Row 1</td>
<td>Ent_1</td>
<td><button type="button" class="btnTest">Assign</button></td>
<td class="testNameClass">Row 1 Ent_3</td>
</tr>
<tr>
<td>PK Row 2</td>
<td>Ent_1</td>
<td><button type="button" class="btnTest">Assign</button></td>
<td class="testNameClass">Row 2 Ent_3</td>
</tr>
</tbody>
</table>
Your method will be handed a reference to the MouseEvent which represents details of the click. Since it is an Event, it has a currentTarget which represents an "element" in the so-called DOM ... an internal data-structure which represents the HTML. This data structure is in the form of a tree, where each node has one parent, two siblings, and some children. You can now write code to "walk up the tree" until you encounter a td node. The first one you come to is the innermost containing td.
I think you are targeting is incorrect use a . before the class name - also I see two classes in one element I set this up for you here have a look
https://jsfiddle.net/hw0ansyj/1/
$(".btnTest").on("click", function() {
alert($('.testNameClass').html());
});

jQuery - Selecting the first <a> in the first <td> of a <tr>

I have the following markup:
<tr>
<td>
<a>foo</a>
</td>
<td>bar</td>
<td>
<a class="delete-btn">delete</a>
</td>
</tr>
I've already hooked up a click event handler using jquery $(".delete-btn") the problem is that inside the click event handler I need the text of the first element (foo).
I'm already getting the value I need with this call:
$(this).closest("tr").children().first().children().first("a")
but I feel it's too verbose. Is there a better way to accomplish this?
I don't like this either, but... it's exactly what you're looking for:
$(this).closest("tr").find("> td:first-child > a");
You can make use of jQuery's :first pseudo-selector.
In this instance, your entire selector would be:
$('tr td:first a:first') (for the first <tr> only)
$('tr').find('td:first a:first') (for every <tr>)
Example:
$(document).ready(function(){
$('.delete-btn').click(function(){
$('tr').find('td:first a:first').hide();
})
});
table, tr, td {
border: 1px solid rgb(191,191,191);
border-collapse: collapse;
}
td {
padding: 12px;
}
.delete-btn {
cursor: pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
<td><a>foo</a></td>
<td>bar</td>
<td><a class="delete-btn">delete</a></td>
</tr>
<tr>
<td><a>foo</a></td>
<td>bar</td>
<td><a>baz</a></td>
</tr>
</table>

jQuery select all children of closest

I want to add the .red-border class to a #container div and all <td>s in the closest <tr>.
But by using .closest() I only get the elements immediate parent <td>.
Is there a way I can target all children of the closest <tr>?
My code is below.
My current erroneous JS:
$('#myelement').closest('.container, tr td').addClass('red-border');
Obviously, this only targets 1 td. I want to encompass all of them.
My HTML:
<div id="container">
<span class="myelement">element</span>
</div>
<table>
<tr>
<td></td>
<td><span class="myelement">element</span></td>
<td></td>
</tr>
</table>
Edit: normally I might use the .find() function but this wouldnt work with the or operator.
I hope this is what you are expecting. You need to iterate through each tr and add red-border class to its first td with td:first selector as below
$(document).ready(function() {
$('#container').addClass('red-border');
$('tr').each(function(){
$(this).find('td:first').addClass('red-border');
})
})
.red-border{
border:red 2px solid;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container">
<span class="myelement">element</span>
</div>
<table>
<tr>
<td>First row First TD</td>
<td><span class="myelement">element</span>
</td>
<td></td>
</tr>
<tr>
<td>Second row First TD</td>
<td><span class="myelement">element</span>
</td>
<td></td>
</tr>
</table>
According to your structure you can go for this:
$(".myelement").parents("#container").addClass('red-border').siblings("table").find("tr").eq(0).children().addClass('red-border');
target the parent #container using parents(). This will give nothing for the span inside td. Then target its sibling table and the first tr by using eq(0).
why do you want it in a single line? just split it to two, it will be simpler.
$('.myelement').closest('#container').addClass('red-border');
$('.myelement').closest('tr').find('td').addClass('red-border');
by the way, you called #myelement when your tag had a class myelement. It should be called using .myelement. And the container is an id so #container
Call class element using .myelement instead of #myelement
$('.myelement').closest('.container, tr td').css({"color": "red", "border": "2px solid red"});
or
$('.myelement').closest('.container, tr td').addClass('red-border');

Table with select/deselect and summarize option

I've created a table. Now I'm trying to have an onClick event add an option where I can click the squares inside the table to select them and click again to deselect them. At the end I wish to have it to display the total amount, by that I mean that it adds together the selected squars like a calculator would do.
<style>
table, td, th {
border: 1px solid black;
}
table {
border-collapse: collapse;
}
</style>
<table>
<tr>
<td bgcolor="b8cce4">Modell</td>
<td>Trend</td>
<td>Titanum</td>
<td>Familiepakke</td>
<td>Førerassistentpakke</td>
<td>Stilpakke</td>
<td>Final price</td>
</tr>
<tr>
<td bgcolor="b8cce4"><b>Kuga</b></td>
<td>401000</td>
<td>420000</td>
<td>1000</td>
<td>10200</td>
<td>9200</td>
<td>$</td>
</tr>
<tr>
<td bgcolor="b8cce4"><b>C-max</b></td>
<td>320000</td>
<td>335000</td>
<td>1000</td>
<td>9400</td>
<td>3600</td>
<td>$</td>
</tr>
<tr>
<td bgcolor="b8cce4"><b>Focus</b></td>
<td>255000</td>
<td>325000</td>
<td>900</td>
<td>12500</td>
<td>9000</td>
<td>$</td>
</tr>
<tr>
<td bgcolor="b8cce4"><b>Mondeo</b></td>
<td>281000</td>
<td>361000</td>
<td>1100</td>
<td>9900</td>
<td>7200</td>
<td>$</td>
</tr>
I'm trying to make it so that I can click on one of the slots, able to select multiple, and at the end it will display the total price for all selected options.
I'd suggest you add/remove a class to your TD's. The "selected" can then have a different background color.
If you're using jQuery, you can use something like this (not tested):
$('td').click(function() {
$(this).toggleClass('selected');
console.log($(this).text());
});
Now you can use the CSS class to indicate it is selected.
I've added a JSFiddle here:
https://jsfiddle.net/vhwLxhsg/
I hope this is what you are looking for :-)
UPDATE:
Added calc. for each row, as requested: https://jsfiddle.net/vhwLxhsg/2/
UPDATE 2:
Vanilla JS version: https://jsfiddle.net/vhwLxhsg/4/

Find td with specific text, and operate on the td right after that one?

I'm not very familiar with jQuery selectors, so would like some help.
I have a table like this:
<table class="test">
<tr>
<td>Section Heading 1</td><td>Section Text 1</td>
</tr>
<tr>
<td>Section Heading 2</td><td>Section Text 2</td>
</tr>
<tr>
<td>Section Heading 3</td><td>Section Text 3</td>
</tr>
<tr>
<td>Section Heading 4</td><td>Section Text 4</td>
</tr>
<tr>
<td>Section Heading 5</td><td>Section Text 5</td>
</tr>
</table>
What I need to do is find the td containing a specific text, and the operate on the text in the td on its right.
For example, say I want to find the td containing the text Section Heading 4, and the concatenate the text contained in the td to it's right, with the text hello, so that Section Text 4 becomes Section Text 4 hello ..
Which jQuery selector(s) can be used for this purpose ?
My initial answer missed the point about updating the text, here is a sample with this included:
$(".test td:contains(Heading 1)")
.next().text(function(){
return $(this).text() + " Hello"
});
I don't believe you can use the append method as I think it only works to add html tags.
First, you want to use :contains:
jQuery( "td:contains(text)" );
Then, you can use .next and .append:
jQuery( "td:contains(text)" ).next().append("Hello");
Here's a working snippet to demonstrate usage:
jQuery(function($) {
$("td:contains(Text to Find)").next().append(" Hello");
});
table {
border-collapse: collapse;
}
td {
border: 1px solid #ccc;
padding: 2px 5px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<table>
<tbody>
<tr>
<td>Some Text</td>
<td>More Text</td>
<td>YMT</td>
</tr>
<tr>
<td>Text to Find</td>
<td>Modify:</td>
<td>Do nothing here</td>
</tr>
</tbody>
</table>
jQuery has :contains() pseudo class :
$('td:contains("Section Heading 4")').next().text(function(_,t){
return t + ' Hello';
})
Be carefull, :contains is case sensitive.
This should work...
$(function() {
var searchText = "Section Heading 3";
var output = "";
$("td").each(function(i, item) {
if($(item).html() == searchText) {
output = $(item).html();
output += $(item).closest("td").html()
}
});
console.log(output);
});
Here's a jsFiddle http://jsfiddle.net/5ELLM/
var tds=$("table.test").find("td");
var td,i;
for(i=0;i<tds.size();i++) {
td=tds.eq(i);
if (td.text().indexOf("Section Heading 4")!=-1) {
td.next().text(td.next().text()+"hello");
}
}
for information
var data ="Search string"
$('#table1 td:contains('+data+')').next().text();

Categories