Develop Reference

JavaScript : Get inputText value in a table cell

I used the following code to insert new rows.
function NewInputText(_id,_width,_readOnly,_value)
{
return "<input id='"+_id+"' readonly="+_readOnly+" type='text' value='"+_value+"'/>";
}
How can I get this inputText's values from any cell?
Important: I don't need the innerHTML string, I just want the value from inputText in any of the table cells.

You may need:
var val = document.getElementById('inputId').value;
after your <input> is populated.

Assuming this element was already added to your HTML, your get the value of an element via the value property. You could also just use _value again, but I don't know your full code.
And you should consider using CSS to design your input-boxes. You might also want to use textContent instead of innerHTML if you're not inserting any HTML elements.

You have something like below, to get the exact value and not innerHTML:
function getValue(_id) {
return document.getElementById(_id).value;
}

Jquery find operations on dynamic html

I create dynamic html content (table rows). td elements have class assigned to it depending on the row.
I want to perform multiple find element by class and perform .text() and style operations and then append final html to the table body.
I tried this and does not work. Please help.
function processrow(html){
$(html).find(".item1").text('Closed');
$(html).find(".item5").css('background-color', '#66a666');
return html;
}
example value passed to function
<tr><td>row1</td><td class="item1"></td></tr>
Need it return
<tr><td>row1</td><td class="item1">Closed</td></tr>
Added fiddle - http://jsfiddle.net/6mnLwg0o/2/

First create the jQuery object with the source by doing $(html), then make the changes to the inner elements with find(). In the example below I am appending the updated html to a test div so that you can see the result.
HTML:
<div id="test"></div>
JavaScript:
var src = processrow('<table><tr><td class="item5">row1</td><td class="item1"></td></tr></table>');
src.appendTo($('#test'));
function processrow(html) {
var obj = $(html);
obj.find(".item1").text('Closed');
obj.find(".item5").css('background-color', '#66a666');
return obj;
}
Demo: http://jsfiddle.net/BenjaminRay/td00gssw/

When you say $(html) it creates a dom structure based on the html which is then modified. Change done in the dom after that will not get reflected in the source html, so to get the modified html you need to get the html from the dom objects.
function processrow(html) {
var $div = $('<div />', {
html: html
});
$div.find(".item1").text('Closed');
$div.find(".item5").css('background-color', '#66a666');
return $div.html();
}

JQuery - iterate through elements conditionally to addClass()

I have a few input fields that I'm trying to add a class to their parent container if they are not empty.
Here's the CoffeeScript:
$(".inputA, .inputB").parent().addClass(->
if !$(this).is(":empty")
"input-set"
)
This is successfully appending "input-set" to the parent class, but in all cases, not just empty input fields.
:(

Use jQuery.filter()
$(".inputA, .inputB").filter(function(){
return this.value !='';
}).parent().addClass("input-set");
Less function calls than using $.each

:empty will select elements that don't have children. Therefore, using it to conditionally select the parents of certain elements doesn't make any sense.
ref: https://developer.mozilla.org/en-US/docs/Web/CSS/:empty
If you're looking to add the class to the parents of inputs that haven't been populated then you could use something like:
$(".inputA, .inputB").each(function(){
if (this.value !== "") {
$(this).parent().addClass('input-set');
}
});

First, input elements are by definition empty..
Read the :empty documentation at http://api.jquery.com/empty-selector/
Second you are testing the parent elements and not the input ones.. (and since they are parents, meaning they are not empty they all fit the bill..)

Check if div has less than two children

I've just started using jQuery, and can't get my head around this.
I need to check if a div contains anything but a h3 header tag.
The structure of the html is as follows:
<div id="myContainer">
<h3>A header that is always present</h3>
any html, plain text or empty
</div>
Here's the jQuery:
if ( $("#myContainer h3:only-child") ) {
$("#myContainer").css("display", "none");
}
The above will simply hide the div if there is no other html elements present, which is not what I intend since it will also contain plain text. I have tried with other selectors and functions, but I just can't seem to get it right.
Thanks in advance :)

I think you want a function which will tell you if the div contains just H3 or also has other elements. I don't think there is a direct jQuery selector for that, so I wrote a simple function to checkForJustH3.
DEMO - That shows how to hide div that just has H3.
Check out the below demo by editing the div contents and Hit Run to see the result.
DEMO
function containsJustH3 (el) {
var result = true;
$(el).contents().each (function() {
if (this.nodeName != 'H3') {
//check for blank line or empty spaces
if (this.nodeType == 3 && $.trim(this.nodeValue) == '') {
return true;
}
result = false;
return false;
}
});
return result;
}
And using the above function you can do something like,
if ( containsJustH3("#myContainer") ) {
$("#myContainer").css("display", "none");
}

Try:
$("#myContainer").children('h3').hide();
jsfiddle

You can wrap the 'plain text' in a p element and use this selector:
fiddle
$("#myContainer").children().not('h3').hide();
//Select all children but not the h3
HTML:
<div id="myContainer">
<h3>A header that is always present</h3>
<p>any html, plain text or empty</p>
</div>

You can use the length property to see how many children the div has
$("#myContainer").children('h3').length

The fundamental problem here is that jQuery methods like children will not get text nodes. If you want to see how many children a div has, and include the text nodes, you'll want to grab the actual dom node, and check the length of its childNodes property. This will include text nodes.
if ($("#myContainer")[0].childNodes.length > 1) {

var $cont=$('#myContainer'), $children=$cont.contents().not('h3');
if( ! $children.length) {
$cont.hide();
}
Using contents() method will check if there are tags or text nodes in element, check if the children object has length, if not hide the container

You can use $("#myContainer").contents().length to get the number of nodes, including text nodes. However, this includes the newline before the <h3>, etc.

Find TH object (table head) by text using jquery without iterating over all TH's of a table

I have dynamically created HTML table clicking on its TH will reload the table according to sorted column.
What i want is to apply a class to the TH clicked.
Since the table is reloaded i first put the clicked column name in a Global variable and then when the table get reloaded i want to apply a CSS class.
The requirement is i want to search the THs in a TR by text (without iterating all elements) and then apply a class.
Any help is appreciated
Thanks
EDIT:
We cannot use :contains becuase two column names can contains similar text header

jQuery's filter function allows you to specify a function to be used as the filter.
$("th").filter(function() {
return $(this).text() == "foo";
}).addClass("newClass");

To apply a class to the th when clicked:
$(function () {
$('th').on('click', function () {
$(this).addClass('myClickedClass');
});
});
If you want to apply the class based on the match of a string, use this:
$(function () {
$("th:contains('" + myStringValue + "')").addClass('myClickedClass');
});