We Keep Coding

Javascript: change first child style

I would like to change the color of the <span> tag, when clicking on the containing <td>:
<td onClick='myfunc(this)'>
<span class='spanClass'>text</span>
</td>
what should the myfunc be like?

Set element.style.color inside the function.
If you have single child then you can use firstElementChild property of the current element. If you have multiple children and you want to set the color to all of them then you have to iterate over all the children to set the color.
function myfunc(el){
el.firstElementChild.style.color = 'red';
}
<table>
<tr>
<td onClick='myfunc(this)'>
<span class='spanClass'>text</span>
</td>
</tr>
</table>

for js
function changeColor(el) {
el.querySelector('span.spanclass').style.setProperty('color', 'red');
}
try this one for jquery
$(this).find('.spanclass').css({"color":"red")
or
$(this).find('span').css({"color":"red")
for more details

Delete a table row if its unchecked jquery

i am using a table each row contains a check box while i submit i want unchecked row to be disabled this is how i tried i created a table and row which contain a input type checked if the input type unchecked means i want to disable that row so while i retrieve in mvc i can get the details
<table id="subjectTable">
<tbody><tr><input type='checkbox' name='subjectcheck' /></tr></tbody>
</table>
$("input:not(:checked)").each(function () {
$(this).closest('tr').attr("disabled", "true");
});
this how i tried can any one help

If you want to simply remove the <tr>, you can use the jQuery methods .closest() and .remove() :
Select your inputs with $('input:not(:checked)')
Find the closest <tr> with .closest('tr')
Remove them with .remove()
PS: Keep in mind you have to have a <td> inside your <tr>, otherwise your <input> will be placed outside of your <table>.
$('button').on('click', function(){
$('input:not(:checked)').closest('tr').remove();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="subjectTable">
<tbody>
<tr><td><input type='checkbox' name='subjectcheck' /></td></tr>
</tbody>
</table>
<button>Emulate submit !</button>

To remove the parent tr of unchecked tr try .parent() and .remove() like the following way:
$("input:not(:checked)").each(function () {
$(this).parent('tr').remove();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="subjectTable">
<tbody>
<tr>
<input type='checkbox' name='subjectcheck'/>
</tr>
</tbody>
</table>

Get input element inside <tr> with based on data-attribute value

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")

Strikethrough Table and/or DIV

I currently utilized this method Linethrough/strikethrough a whole HTML table row and it works great.
However how do I attach it to a HTML check box onclick method?
http://jsfiddle.net/deaconf19/DrEhv/
<table border 1>
<tr>
<td>Status</td>
<td>Priority</td>
<td>Date</td>
<td>Event</td>
<td>Updated</td>
</tr>
<tr>
<td contenteditable/>Checkbox</td>
<td contenteditable/>3</td>
<td contenteditable/>02/07/2014</td>
<td contenteditable/>code needs updating again</td>
<td contenteditable/>02/07/2014</td>
</tr>
<tr class="strikeout">
<td contenteditable/>Checkbox</td>
<td contenteditable/>1</td>
<td contenteditable/>02/07/2014</td>
<td contenteditable/>code needs updating</td>
<td contenteditable/>02/07/2014</td>
</tr>
</table>

You can use jQuery, to find check box parents parent and add a class to it when status of checkbox changed
if ( this.checked) {
$(this).parent().parent().addClass("strikeout");
} else {
$(this).parent().parent().removeClass("strikeout");
}
Example

Just use javascript to change the table class. If using jQuery:
$('#myCheckbox').change(function(){
$('#myTableRow').toggleClass('strikeout', $(this).prop('checked'));
})
The text below assumes that you have a checkbox with id="myCheckbox" and a table row with id="myTableRow".

Why use jQuery if pure JS can do the same thing:
In your HTML, add onclick handler for checkboxes:
<input type="checkbox" onclick="strike(this)">
Then change class of TR element based on checkbox value, like this:
function strike(elm) {
if(elm.checked) {
elm.parentNode.parentNode.className = "strikeout";
} else {
elm.parentNode.parentNode.className = "";
}
}
As simple as that !

Why can’t I select a <td> using its class and data-test attributes in jQuery?

<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. :-)