I have the following code:
<tr class="my-field" data-name="background_colour" data-type="color_picker">
<td class="my-input">
<div class="my-color_picker">
<input type="text" class="wp-color-picker">
</td>
</tr>
I need to get that input text element with class="wp-color-picker".
I can do this with $('input.wp-color-picker'), but that will get all input elements with class=wp-color-picker. I only want to get those elements that are inside a tr with data-name='background_colour'.
Hope that makes sense.
Use a descendant selector to combine those to needs
$('tr[data-name="background_colour"] input.wp-color-picker')
Here tr[data-name="background_colour"] will find the tr you are looking for then the descendant selector along with the input selector(input.wp-color-picker) will find the target element.
Attribute equals selector
Descendant selector
You can do this
$('tr[data-name="background_colour"] input.wp-color-picker')
Example:
alert($('tr[data-name="background_colour"] input.wp-color-picker').val());
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr class="my-field" data-name="background_colour" data-type="color_picker">
<td class="my-input">
<div class="my-color_picker">
<input type="text" class="wp-color-picker" value="hello world">
</td>
</tr>
</table>
try this
$("tr[data-name='background_colour'] .wp-color-picker")
Related
So I have a table like this:
<table id="TblProduits" class="TblProduitsLayout">
<thead>
<tbody>
<tr class="placeholderRow">
<td>
<input class="PrixUnitr" type="number" />
</td>
<tr class="placeholderRow">
<tr class="placeholderRow SousTotal">
<td>
<input class="MontnHT" type="text" disabled="disabled" min="0"/>
</td>
<tr class="placeholderRow">
<tr class="placeholderRow SousTotal">
<td>
<input class="MontnHT" type="text" disabled="disabled" min="0">
</td>
</tbody>
</table>
I want to change the value of the fisrt occurence of the input with classname MontnHT contained inside a tr with classname SousTotal when the value of the input with classname PrixUnitr is changed, so I created an event like this:
$('body').on('change', '.PrixUnitr', function() {
$(this).closest('tr').nextAll("tr.SousTotal").find("input.MontnHT").val("foo");
});
My problem is that is also changes the other inputs contained inside a TR with the same classname SousTotal , as I want to change just the first occurence , what am I doing wrong? and how can it be fixed?
use .first() or .eq(0) to get the first occurrence of the element
$(this).closest('tr').nextAll("tr.SousTotal").first().find("input.MontnHT:first").val("foo");
or
$(this).closest('tr').nextAll("tr.SousTotal:eq(0)").find("input.MontnHT:eq(0)").val("foo");
There are more than one TR TD, same class name given in a table used for formatting without ID given.
I would like to seek help for jQuery. How can I retrieve / replace <td> content in the span id = payment_currency_text, class="formdata element?
1) To set a variable, store as SGD, getting from second set of TR TD.
2) Replace SGD to EUR.
Note : The system used Jquery version = v1.4.2
I tr to used below syntax but no luck :
alert(jQuery("#payment_currency_text tr.find(.formdata)").val());
alert(jQuery("#payment_currency_text").next('.formdata').val());
alert(jQuery("#payment_currency_text tr td.formdata").val());
alert(jQuery("#payment_currency_text").find(".formdata").html());
... (tr td child)
<tr>
<td class="prompt" align="left">
Region*
</td>
<td class="formdata" align="left">
Asian
</td>
</tr>
<span id ="payment_currency_text"> <!--- There is a SPAN tag, with ID given --->
<tr>
<td class="prompt" align="left">
Payment currency*
</td>
<td class="formdata" align="left">
SGD <!--- How i can set a variable to hold SGD, then replace to EUR? --->
</td>
</tr>
</span>
to target td.formdata inside span.Try this:
To get:
var currency=$('#payment_currency_text .formdata').html();//currency will be SGD here
To set:
$('#payment_currency_text .formdata').html('EUR');
If you know that its always going to be a specific child you can use the :nth-child() selector.
var setter = $("tr:nth-child(2) td:nth-child(2)").text();
$("tr:nth-child(2) td:nth-child(2)").text("EUR");
alert(setter)
Here is a fiddle http://jsfiddle.net/87V9v/
In jQuery you can replace the inner HTML of an element like so
$('.class-name').html("Some html in here");
However, be careful because this will replace the HTML for all classes of this name.
You can use text() to get the data (plain text) as well as replace existing data with new one. If your replacement is HTML, you can use html()
var data=$('td.formdata').text();
alert("The value is"+data);
$('td.formdata').text("New Data");
You can use:
$("#payment_currency_text").text("your text");
or
$("#payment_currency_text").html("your<b>text</b>");
If you just want to change the html inside the td, use like this
$(".formdata").html("some text or tags here");
If you want to get the text inside those td, use like this
$(".formdata").each(function(){
$(this).html();
});
Edit
$("#payment_currency_text").find(".formdata").html()
$("#payment_currency_text").find(".formdata").html("some text or tags here");
Your html structure has some problem, you cant enclose tr inside span. tr should be the child of table. So change your html accordingly.
<table>
<tr>
<td class="prompt" align="left">
Region*
</td>
<td class="formdata" align="left">
Asian
</td>
</tr>
<tr id="payment_currency_text">
<td class="prompt" align="left">
Payment currency*
</td>
<td class="formdata" align="left">
SGD
<!--- How i can set a variable to hold SGD, then replace to EUR? --->
</td>
</tr>
</table>
Then you can use the above code for getting the elements and values.
I am trying to build up a table by adding values from textbox fields in the tfoot of the same table. The eventual goal is to be able to then inline edit previously added rows while still leaving the capability to add more rows.
I have the following markup:
<table>
<thead>
<tr>
<th>Service</th>
<th>Protocol</th>
<th>Source Port</th>
<th>Destination Port</th>
<th>Action</th>
</tr>
</thead>
<tfoot>
<tr>
<td>
<input type="text" data-function="service" value="foo" />
</td>
<td>
<input type="text" data-function="protocol" value="bar" />
</td>
<td>
<input type="text" data-function="sourcePort" value="baz" />
</td>
<td>
<input type="text" data-function="destPort" value="fob" />
</td>
<td>
<button id="addBtn" type="button">Add</button>
</td>
</tr>
</tfoot>
</table>
The below script stores all of the input[type=text] elements in the tfoot in an inputs variable. From there I am trying to use .index() to identify and then retrieve the value of each textbox:
$(document).ready(function () {
$('#addBtn').click(function (e) {
var inputs = $(this).closest('tfoot').find('input[type=text]');
console.log(inputs);
var serviceIndex = inputs.index('[data-function="service"]');
console.log(serviceIndex);
console.log(inputs[serviceIndex].value);
// the remaining indexes all return -1
var protocolIndex = inputs.index('[data-function="protocol"]');
console.log(protocolIndex);
console.log(inputs[protocolIndex].value);
var sourcePortIndex = inputs.index('[data-function="sourcePort"]');
console.log(sourcePortIndex);
console.log(inputs[sourcePortIndex].value);
var destPortIndex = inputs.index('[data-function="destPort"]');
console.log(destPortIndex);
console.log(inputs[destPortIndex].value);
});
});
Unfortunately the selector data-function="X" selector only works for service. All of the other selectors return -1 indicating that a value was not found. The above code is from this jsFiddle which illustrates the problem. I am not wedded to using index, but cannot use the element's id as I need a more general solution.
Why does the jQuery .index() method only work for the first element in the collection, when a selector is specified?
From the docs:
If .index() is called on a collection of elements and a DOM element or
jQuery object is passed in, .index() returns an integer indicating the
position of the passed element relative to the original collection.
So this should work:
inputs.index($('[data-function="protocol"]'));
...
Demo: http://jsfiddle.net/Dfxy9/2/
In the context you are using it .index is only called on the first element in the jQuery collection. jQuery does this for any non-iterative method (for example .html, .attr, .text) -- .index is no different.
Instead of using the collection, use the selector: http://jsfiddle.net/4kLqb/
<table>
<tr>
<td class="ok" data-test="12-12 00">xxx</td>
<td class="ok" data-test="13-12 00">xxx</td>
<td class="ok" data-test="14-12 00">xxx</td>
<td class="ok" data-test="15-12 00">xxx</td>
</tr>
</table>
I would like get the <td> where data-test = "14-12 00". Here’s my code:
alert($('td .ok[data-test="14-12 00"]').text());
Why is this not working?
http://jsfiddle.net/LqD5h/
Try:
alert($('td.ok[data-test="14-12 00"]').text());
(Notice there is no space between td and .ok).
You were originally trying to select all elements with classname ok that are descendants of a td and bear a certain data-test value.
How about another way to skin this cat?
alert($('tr .ok[data-test="14-12 00"]').text());
Notice, td changed to tr. :-)
I want to change the background color of the table cell when radio button inside the cell is clicked.
<table>
<tr>
<td align="center">
<input type="radio" value="foo"
onclick="this.parentElement.style.background-color='red';" />
</td>
</tr>
</table>
How to get the parent element reference?
Using plain javascript:
element.parentNode
In jQuery:
element.parent()
Use the change event of the select:
$('#my_select').change(function()
{
$(this).parents('td').css('background', '#000000');
});