We Keep Coding

How to enable all the disable rows in jQuery

I'm new to jQuery and I'm confuse how to enable all the rows that I disabled. I was able to make it disable but I don't know how to enable all the rows again. I have a code here, but what happens is that at first all rows are disabled. But when I try to click the tr that is responsible for enabling all disabled rows nothing happens.
HTML
<tr class ="${fn:substring(monthInfo.month, 0, 3)}">
<c:if test="${stat.first}">
<td class="monthName" rowspan="6" value = "${fn:substring(monthInfo.month, 0, 3)}">
<div class="vertical-text">
${fn:substring(monthInfo.month, 0, 3)}
</div>
</td>
</c:if>
<td><img class="editButt" src="resources/images/edit.png" href="#"/></td>
<td>${weekInfo.weekStart}</td>
<td>${weekInfo.weekEnd}</td>
<c:forEach items="${weekInfo.weeklyData}" var="week" >
<td><input type="text" name="cell" class="hours" maxlength="2" value="${week}"></td>
</c:forEach>
<td class="weekTotal ibm-bgcolor-green-10 ">${weekInfo.totalHrs}</td>
<td class="holidayTotal">${weekInfo.totalHo}</td>
<td class="vacationTotal">${weekInfo.totalVl}</td>
<td class="sickTotal">${weekInfo.totalSl}</td>
<td><input type="text" name="cell" class="remarks" value="${weekInfo.remarks}"></td>
</tr>
jQuery
function disableRows(){
$("#test1table tbody tr").each(function() {
$(this).find('input:text').prop('disabled', true);
});
}
$(document).ready(function() {
calculateTargetHours();
calculateActualHours();
calculateUtilization();
disableRows();
$(".hours").blur(function() {
checkValidInput($(this));
calculateActualHours();
});
$('.editButt').click(function(){
disableRows();
$(this).closest('tr').find('input:text').prop('disabled', false);
});
$('.monthName').click(function(){
disableRows();
var className = $(this).closest('tr').find('td:first').text();
alert(className);
$('.'+className).find('input:text').prop('disabled', false);
});
});

I just added .trim to after .text() so that all unnecessary characters

https://jsfiddle.net/sudarpochong/9Lj2k3fc/
when I try to click the tr that is responsible for enabling all disabled rows nothing happens.
Enable all button
$(".monthName, thead tr, #enable-all").click(function(e) {
$("table").removeClass("disabled");
$("tbody tr").removeClass("danger");
$("table input, table button").prop("disabled", false);
});

How to change color of my div if check-box is checked?

I have table that is created based on records from data base. Inside of tbody I have tr that creates each table row. Table row has multiple time slots for same date. I want to change background color of my time block if check box is checked. I got my check box to work, I did test with alert and some text inside. Now I'm trying to change the background color but nothing works in this case that I tried so far. Here is my code:
<cfoutput query="qryTest" group="DateMeeting">
<tbody>
<tr>
<td>#DateMeeting#</td>
</tr>
<cfoutput>
<tr class="blockRow">
<td>#StartTime#</td>
<td>#EndTime#</td>
<td><input type="checkbox" name="block" id="block"></td>
</tr>
</cfoutput>
</tbody>
</cfoutput>
Java script:
$('input[type=checkbox]').on('change', function() {
var div = $(this).closest('.blockRow');
$(this).is(":checked") ? div.addClass("red") : div.removeClass("red");
});
and my css:
.red{
background-color:red;
}
This is working code that I updated. Problem number one was in html structure of my code. Second If I used document.getElementById('') I was getting only first row chnaged background-color, no matter which row I click on. So I have had to use getElementByClassName. Anyway I decided to use JQuery addClass/removeClass. Thanks everyone for help with this problem.

Try this:
$('input[type=checkbox]').on('change', function() {
var div = $(this).closest('.blockRow');
$(this).is(":checked") ? div.addClass("red") : div.removeClass("red");
});
.red{
background-color:red;
}
<cfoutput query="qryTest" group="DateMeeting">
<tbody>
<tr>
<td>#DateMeeting#</td>
<cfoutput>
<div class="blockRow">
<td>#StartTime#</td>
<td>#EndTime#</td>
<td><input type="checkbox" name="block" id="block"></td>
</div>
</cfoutput>
</tr>
</tbody>
</cfoutput>
jsfiddle:
https://jsfiddle.net/3s83gj70/2/
This gets the closest blockrow to the current checkbox so should work with more than one instance. Since you can't have 2 elements with the same id I have change blockrow to the class.
If you want to do other things based on the same condition then you can do this:
$('input[type=checkbox]').on('change', function() {
var div = $(this).closest('.blockRow');
if($(this).is(":checked")){
div.addClass("red");
//checkbox is checked, do something
}
else
{
div.removeClass("red");
//checkbox is not checked, do something else
}
});

Easy:
$('#blockRow').css("background-color","red")
------------------------------^
EDIT
Then you don't include jQuery library. To make pure js make this:
http://jsfiddle.net/bfss81sa/
document.getElementById("box").style.backgroundColor = "red";
Here you are the complete snippet:
var cbs = document.querySelectorAll('input[type=checkbox]');
for(var i = 0; i < cbs.length; i++) {
cbs[i].addEventListener('change', function() {
if(this.checked) {
document.getElementById("box").style.backgroundColor = "red";
} else {
document.getElementById("box").style.backgroundColor = "transparent";
}
});
}
<input type="checkbox" name="block" id="block">
<div id="box">
The box
</div>

Your html code is a mess. Anyway, generally :
$('input[type=checkbox]').click(function() {
if($(this).is(':checked') {
$(this).parents('tr').find('td:first').css('background', 'red');
} else {
$(this).parents('tr').find('td:first').css('background', 'white');
}
});
Of course, you can narrow the scope of input:checkbox selector.
If it is not the FIRST <td> in your <tr> then you better assign it a class and get it with it.
NOTE : DOM must be correct <cfoutput> cannot be child of <tr>; <div> cannot have <td> as direct child; Incorrect DOM impact javascript traversing.

How to get value when td clicked in table

I have a table with html controls such as a select, etc.. Now when I click on a tag I want to get span value in first td
And I tried this:
$('tr > td a').on('click', function(e) {
alert($(this).parent().find('td').eq(0).find('span').html());
});
table, tr, td, th {
width: 750px;
border: 1px solid black;
border-collapse: collapse;
align: centre
}
select, a {
display: block;
}
<table>
<tr>
<th>Name</th>
<th>Clicks</th>
<th>Clicks2</th>
</tr>
<tr>
<td>
<span id="span1">Hi!</span>
Save
</td>
<td style="block">
Click Me
<select>
<option>1</option>
</select>
</td>
<td>
Click Me
<select>
<option>2</option>
</select>
</td>
</tr>
</table>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
Fiddle link
I tried to show popup only when a is clicked but it is poping up every time td is clicked.
So I gave a tag a class Click and tried to achieve the same but couldn't.
How to show popup only when a clicked

Your a is display:block so it maintains the whole space of the td. Give your a display:inline-block. This will let the a take only the space it needs. And then your clickhandler will work.

You can also use the javascript function onclick="functionname()" inside your 'a' tag and write your popup code in that function.

This code
$('tr > td a').on("click"...
adds a click handler to the a, then the this inside is the a, so
$(this).parent()
gives the td
followed by
.find('td')
will try to find a td inside the td, which won't happen
To get the first td use closest which goes up the parents until if find the target, ie:
$(this).closest('tr').find('td:first').find('span').html()
or
$("td:first > span", $(this).closest('tr')).html()
(or .eq(0) if you don't like :first)

You could asign a class to the span in your first column, say myClass, like this:
<table>
<tr>
<th>Name </th>
<th>Clicks</th>
<th>Clicks2</th>
</tr>
<tr>
<td>
<span class="myClass" id = "span1">Hi!</span>
Save
</td>
<td style="block">
Click Me
<select>
<option>1</option>
</select>
</td>
<td>
Click Me
<select>
<option>2</option>
</select>
</td>
</tr>
</table>
,and use jQuery like this:
$('td > a').on('click', function (e) {
alert($(this).parents('tr').find(".myClass").html());
});
See here

Just change you script from this
$(function(){
$('tr > td a').on('click', function(e) {
alert($(this).parent().find('td').eq(0).find('span').html());
});
});
To this
$(function () {
$('tr > td a').on('click', function (e) {
alert($(this).parent().find('span').html());
});
});
Here is a jsFiddle : https://jsfiddle.net/CanvasCode/hdzswrn7/

Find the input box that is made hidden using hide() in jQuery

How can I find the input box that is made hidden using hide() in jQquery?
$("#tab1").on('click', 'td button.save', function() {
var $thisParent = $(this).parent().parent().find("td:eq(1)").find("input").val();
$(this).parent().parent().find("td:eq(1)").find("input").hide().end().html('<span>' + $thisParent + '</span>');
});
// Here, this portion is not working:
$("#tab1").on('click', 'td span.edit', function() {
$(this).parent().parent().find("td:eq(1)").find("input").show();
alert($(this).parent().parent().find("td:eq(1)").find("input").prop("tagName"));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table id="tab1" width="80%">
<tr>
<td></td>
<td>
<input class="fillcolumn" type="text" />
</td>
<td>          <span class="edit">✎</span>  <span class="remove">✘</span>
</td>
<td>
Weightage:     
<select>
<option value="High">High</option>
<option value="Medium">Medium</option>
<option value="Low">Low</option>
</select>
</td>
<td>
<button class="save">Save</button>
</td>
</tr>
</table>
The above code is not working, I mean, it is not turn the input box on with its value. Any help?

Few things need to be changed,
The appended span does not have edit class, so the click won't fire.
Use append() instead of html() as html() deletes the <input> tag.
Instead of .parent().parent() use .closest()
$(this).closest('tr')
.find("td:eq(1)")
.find("input").hide().end()
.append('<span class="edit">' + $thisParent + '</span>');
Demo
$("#tab1").on('click', 'td button.save', function() {
var $thisParent = $(this).closest('tr').find("td:eq(1)").find("input").val();
$(this).closest('tr').find("td:eq(1)").find("input").hide().end().append('<span class="edit">' + $thisParent + '</span>');
});
// Here, this portion is not working
$("#tab1").on('click', 'td span.edit', function() {
$(this).closest('tr').find("td:eq(1)").find("input").show();
alert($(this).parent().parent().find("td:eq(1)").find("input").prop("tagName"));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table id="tab1" width="80%">
<tr>
<td></td>
<td>
<input class="fillcolumn" type="text" />
</td>
<td>          <span class="edit">✎</span>  <span class="remove">✘</span>
</td>
<td>Weightage:     
<select>
<option value="High">High</option>
<option value="Medium">Medium</option>
<option value="Low">Low</option>
</select>
</td>
<td>
<button class="save">Save</button>
</td>
</tr>
</table>
Further improved use of selectors. Refer Fiddle

instead of html() use append()
$("#tab1").on('click', 'td button.save', function(){
var $thisParent = $(this).parent().parent().find("td:eq(1)").find("input").val();
$(this).parent().parent().find("td:eq(1)").find("input").hide().end().append('<span>' + $thisParent + '</span>');
});

When you call save the input is removed from the page.
I guess what you want to do is hide the input when save is clicked and add in a new span with the value from the input?
this should help you move on:
http://jsbin.com/pufiroxolo/1/edit?html,js,output
but like #Shaunack D says lots of optimisations can be done with this! I've just used what was provided so not to confuse things!

When you call JQuery hide() on a DOM element, JQuery adds the style attribute for the dom as display:none.
You can do a find() using jquery for all text boxes and then check if each textbox has the style display: none.
Something like this
var listOfHidden = []
$($.find("input")).each(function()
{
if ($(this).css("display") == 'none'){listOfHidden.push(this)}
});
//variable listOfHidden will have the list of all hidden text

clear values of all (including nested) form fields within a certain tbody using jquery

I have the following structure inside of a table, which has rows and also other tables nested within #tbody_name.
<tbody id="tbody_name">
<tr>
<td>
<select>
<option value="" selected="selected">---------</option>
<option value="3">Something</option>
<option value="2">Something else</option>
</select>
</td>
</tr>
<tr>
<td>
<input type="radio" value="0" /> Normal<br>
<input type="radio" value="1" /> Abnormal<br>
</td>
<tr>
<td>
<table>
<tr>
<td>
<input type="text />
</td>
<td>
<input type="checkbox" />
</td>
</tr>
</table>
</td>
</tr>
</tbody>
What I am trying to do is write a function that is able to clear the values of all of the form fields within #tbody_name.
I have attempted using .children and .each, but I just cannot seem to boil it all the way down to the form fields within #tbody_name.
Any help would be greatly appreciated.
Thank you,
JD

$('#tbody_name').find('input').each(function(){
if ((this.type === 'radio') || (this.type === 'checkbox'))
{
this.checked = false;
}
else
{
this.value = '';
}
});
$('#tbody_name').find('select').each(function() {
this.selectedIndex = 0;
});
EDIT: I just fixed the code to take care of some rather stupid bugs. It should work fine now.

You can either transverse your table using the find method for finding children, and closest for finding parents, and next for finding the next element:
$('#tbody_name').find('option:first-child').attr('selected', 'selected').closest('tr').next().next().find('input:text').val('');
Or you can give your form fields ID's and find them by id:
$('#defaultOption').attr('selected', 'selected');
$('#textInput').val('');
Put these inside a function and call it from a button.

There are a number of ways this could be done. Which one you decide to use depends on your coding style. The following solution uses the prop() method of jQuery.
$('#tbody_name input[type=radio], #tbody_name [type=checkbox]').each(function() {
$(this).prop('checked', false);
});
$('#tbody_name input[type=text]').each(function() {
$(this).prop('value', '');
});
$('#tbody_name select').each(function() {
$(this).prop('selectedIndex', 0);
});
Or you could set the properties on the objects expicitly. This method may be a bit more direct and readable:
$('#tbody_name input[type=radio], #tbody_name [type=checkbox]').each(function() {
this.checked = false;
});
$('#tbody_name input[type=text]').each(function() {
this.value = '';
});
$('#tbody_name select').each(function() {
this.selectedIndex = 0;
});