Use jQuery for own attributes - javascript

<table>
<tr><td test='222'>sss</td></tr>
<tr><td test='111'>sss</td></tr>
<tr><td test='222'>sss</td></tr>
<tr><td test='111'>sss</td></tr>
</table>
$("[test]='111'").css('background-color', 'red');
LIVE: http://jsfiddle.net/MPmyc/1/
How can i set css only for test == 111 ? Now this added css for all TD.

$("td[test='111']").css('background-color', 'red');

The usual method to test for an attribute goes like this:
$('td[test="111"]').css(...);
with the entire test inside the [], not partially outside as in your sample.

You wrote your attribute selector incorrectly. Instead of:
[test]='111'
Write:
[test='111']
Edited code:
$("[test='111']").css('background-color', 'red');
http://jsfiddle.net/MPmyc/2/
Also, if you're not basing your selection off an element id, then I recommend limiting selectors to the narrowest sensible scope. I.e. select td elements:
td[test='111']
If the table had a class or id, I'd also narrow the scope to be under that table.

This will work:
$("[test='111']").css('background-color', 'red');
The predicate box mus surround the entire condition.

Change $("[test]='111'") to $('[test="111"]')

$('[test="111"]').css('background-color', 'red');
You need to enclose your attribute conditional test in between the brackets, not just the attribute name.

$("td[test=111]").css('background-color', 'red');

Related

jQuery CSS Targeting data-title

Currently have this code, and am wanting to bold and green the text via CSS whenever the shipping is free, but not sure where i am going wrong with jQuery?
<script>
$("td[data-title='Shipping']").contains('Free').css('color', 'green');
</script>
<td data-title="Shipping">
FREE EXPRESS SHIPPING!
</td>
<td data-title="Shipping">
$4.99
</td>
jQuery instances ($() => jQuery instance) do not have .contains method. You should use the contains as a selector:
$("td[data-title='Shipping']:contains('Free')").css('color', 'green');
jQuery constructor has a contains method but it's used for a different purpose.
try change the script into this one:
<script>
$('td[data-title="Shipping"]:contains(Free)').css('color', 'green');
</script>
Above script only change color for the first td only, since the last td does not contain Free text.
if you want to change both of them, try change the tr instead:
<script>
$('td[data-title="Shipping"]:contains(Free)').parents('tr').css('color', 'green');
</script>

Catch next/previous specific attribute using jquery

My html is
<table>
<tr><td>w</td><td data-id='6' class='point'>6</td></tr>
<tr><td>X</td><td data-id='8' class='point'>8</td></tr>
<tr><td>Y</td><td data-id='7' class='point'>7</td></tr>
<tr><td>Z</td><td data-id='10' class='point'>10</td></tr>
</table>
and js is
$('.point').click(function(){
alert($(".point").nextAll().attr('data-id:first'));
});
I want to get the value of previous or next data-id when I click any point class. How to solve this without using parent() and children(). My fiddle is Fiddle demo Thank you.
As per your requirement(do not use "closest"/parent/children/"find"), You can use .eq() along with .index() to achieve what you need.
Try,
var point = $('.point');
point.click(function(){
alert(point.eq(point.index(this) + 1).attr('data-id'));
});
DEMO
Firstly you need to use this to reference the clicked element. Then as the .point elements are not siblings nextAll() isn't going to work. Instead you need to use closest() to find the parent tr, go to the next tr, then find() the .point element within that. Try this:
$('.point').click(function(){
alert($(this).closest('tr').next('tr').find('.point').data('id'));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr><td>w</td><td data-id='6' class='point'>6</td></tr>
<tr><td>X</td><td data-id='8' class='point'>8</td></tr>
<tr><td>Y</td><td data-id='7' class='point'>7</td></tr>
<tr><td>Z</td><td data-id='10' class='point'>10</td></tr>
</table>

Edit HTML Table Data cell using Jquery

I have an HTML table, and each cell of the table will have two data attributes. What I'm trying to do is set a button to switch the value being shown in the table between those two attributes.
<table class="table1">
<tbody>
<tr>
<td data-original="A" data-new="B"> A </td>
</tr>
</tbody>
</table>
I'm able to set new text and get attributes outside the table, but whenever I try to within the table I keep receiving an error:
'Uncaught -> TypeError: undefined is not a function'.
I've been receiving this error for a number of commands $('td').text(), .val(), .attr('td'), .getAttribute().
Am I missing a plugin or something for getting and setting values from tables?
ANSWER: I figured out the reason, I was an idiot and didn't mention that there would be numerous TD elements with repeating tags. I eventually used Underscore.js's each method to iterate through them and parts of the below answer to swap the values.
Just made a Fiddle:
$("button").on("click", function () {
$("td").text($.trim($("td").text()) == $("td").data("original")
? $("td").data("new") : $("td").data("original"));
});
to switch between the data-original and data-new values by checking the current text in the td and using a ternary operator.
By using trim() for the initial text issues in case of whitespace are taken care of (as I just noticed that you have whitespace in your example td).
Just in case the button isn't already in the DOM when the page is initially loaded, you have to adjust the on() to delegate the click event from a static parent element to the button, e.g. like this: $(document).on("click", "button", function () { ...
Instead of $(document) every other static parent element can be used.
And as you mentioned that the table will have multiple tds with data-attributes, I've just adjusted the Fiddle to take care of that:
$("button").on("click", function () {
$("td").each(function () {
$(this).text($.trim($(this).text()) == $(this).data("original") ?
$(this).data("new") : $(this).data("original"));
});
});
I don't know how .text() didn't work for you.
To set text inside td elements, you use .text(). To get the data inside data-current or data-new, jQuery has a handy function .data(tag), for example $(sel).data('current').
Here's a fiddle displaying usage of this on your problem.

jQuery - cannot get col number of a td

I try to get a column number of a td by selecting the td by its class name. But it always returns -1. What is wrong?
js fiddle
HTML
<table >
<tbody>
<tr>
<td >apple</td><td class="current">banana</td><td>cherry</td>
</tr>
</tbody>
JS
console.log($("td.current:first").parent().parent().children().index($(this)));
You can use the variant of .index() that does not take any arguments, to get the index based on its sibling elements
console.log($("td.current:first").index());
Demo: Fiddle
Simply do:
console.log($("td").index($("td.current:first")));
As you have it, $(this) is pointing to the window object, and not the scope you think it is, which has not been defined in the context of the call.
Also note that index() works thusly: collection.index(member).
you don't neet to get parent then parent, Simply do this
$("td.current:first").index();

Add class to element that doesn't have class - jQuery

In the table below only one td has class, another doesn't have class like:
<table id="bow-me">
<tr class="row-me">
<td class="show-me">Pet is Great</td>
<td>Pete is Greate</td>
</tr>
</table>
I tried something like:
if(!$("#bow-me tr td").hasClass("show-me")) {
$(this).addClass("know-me");
}
But this doesn't add the class know-me in my second td here.
I have attached the JSFiddle here
If I want to add Class to the second td only then how do I do?
Try attribute selector and :not() to get the <td> without any class
$('#bow-me tr td:not([class])').addClass('know-me');
Or if you want to specify which <td> like first or second, use :eq()
$('#bow-me tr td:eq(1)').addClass('know-me');
Doc reference
:not()
Attribute selectors
.eq()
You can use :eq() selector:
$('#bow-me tr.row-me td:eq(1)').addClass('know-me');
Updated Fiddle
or .eq()
$('#bow-me tr.row-me td').eq(1).addClass('know-me');
Updated Fiddle
the reason your code doesn't work is because
There are multiple td's found with your selector
$("#bow-me tr td")
You can't use the $(this) as a selector inside your if conditional statement. it has no valid reference as is.
Solution: you can cycle through the matched elements via each() function and then set up your conditional to check each one of the elements found - $(this) would work in this case
$("#bow-me tr td").each(function() {
if(! $(this).hasClass("show-me")) {
$(this).addClass("know-me");
}
});
check out the jsFiddle here
I gave this answer as an explaination as to why your approach does not work.
I prefer Anton's approach that uses the :not() pseudo selector.

Categories