We Keep Coding

Removing a class from a tag

so i have a little bit of a problem with javascript.
I would like to check the checkbox and change the background color of the cell on click and remove the color and uncheck the checkbox if the user clicks on it again.
So far i have been able to change the color if a person clicks on the hyper link, the javascript below is an updated version of what i think it will be along the lines of.
this is the screen: http://imgur.com/z8wwrKM
this is how the markup is generated
<asp:TableCell Width="100%" ColumnSpan="2">
<div id="checkboxes">
<table width="100%" border="1">
%foreach (var qv in rs)
{
var checkid = "chk" + qv.id;
var tdid = "td" + qv.id;
%
<tr>
<td width="100%">
<a href="#/">
<input type="checkbox" value="#qv.id" name="<%=qv.id%>" />
<textbox><%=qv.text%></textbox>
</a>
</td>
</tr>
<%}%>
</table>
</div>
</asp:TableCell>
And this is the javascript and style ive tried so far
$("a").click(function () {
if($(this).parent().hasClass("selected")==true)
{
$(this).parent().removeClass("selected");
e.preventDefault();
}
else
{
$(this).parent().addClass("selected");
e.preventDefault();
}
});
style
td.selected {
background-color: red;
}
Thank you.

You need to have e as a parameter to your handler function. Also, you can just use toggleClass instead of doing all that checking.
$('a').click(function(e) {
e.preventDefault();
$(this).parent().toggleClass('selected');
var checkbox = $(this).find('input[type="checkbox"]');
var isChecked = checkbox.prop('checked');
if (isChecked) {
checkbox.prop('checked', false);
} else {
checkbox.prop('checked', true);
}
});
td.selected {
background-color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table width="100%" border="1">
<tr>
<td width="100%">
<a href="#/">
Select Me
<input type="checkbox">
</a>
</td>
</tr>
</table>

Try binding a change event on checkbox itself:
$(':checkbox').change(function(){
$(this).closest('td').toggleClass('selected');
});
$(':checkbox').change(function(){
$(this).closest('td').toggleClass('selected');
});
.selected{background:yellow;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
<td>
<a href='#'>
<input type='checkbox'>
</a>
</td>
</tr>
</table>

How to capture if a button in a table is clicked

I have a table of buttons
<table>
<tr><input type="button" id="aaa1"></tr>
<tr><input type="button" id="aaa2"></tr>
etc
</table>
I would like capture when button is clicked, so I've written this code:
$('table').on('click', "[id^='aaa']", function(event){
$(this)....
});
I think the problem is that this code is repeated for all the buttons, but I just wanna capture the button that I click. Can anyone help me?

Try:
$("table input[type='button']").on('click', function(event) {
...
});

You code isn't working because you have no table cells inside your table rows.
I think the problem is that this code is repeated for all the buttons
This is not the case, the below example should show this.
I would continue using the deferred method you are currently using because it only adds one listener to the page instead of several for each of the buttons, however I would change it slightly to catch type=button, as shown below:
$('table').on('click', 'input[type="button"]', function(event) {
alert($(this).attr('id'));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
<td>
<input type="button" id="aaa1" value="B1" />
</td>
</tr>
<tr>
<td>
<input type="button" id="aaa2" value="B2" />
</td>
</tr>
</table>

Try this.
$(document).ready(function(){
$(".buttons").on("click",function(){
var value = $(this).attr("value");
alert(value + " is clicked");
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr><input type="button" id="aaa1" value="button1" class="buttons"></tr>
<tr><input type="button" id="aaa2" value="button2" class="buttons"></tr>
etc
</table>

You can't directly add element inside tr.Use the td inside tr and add the element inside the tr
$(document).ready(function(){
$("table input[type='button']").click(function() {
alert('Button with id = "'+ this.id +'" is clicked');
console.log(this);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr><td><input type="button" id="aaa1"></td></tr>
<tr><td><input type="button" id="aaa2"></td></tr>
</table>

Jquery .hide() with html firing only the first time on button click

I have a form in which I'm hiding and showing fields according to the dropdown selection. Initially, when the button is clicked, only the dropdown selection option is shown and the rest of the fields are hidden. Once the form is saved, the user can add another form. So when I click the button for the second time, the .hide()/.show() doesn't work. Instead the entire form is displayed. Here is my code:
$(document).ready(function () {
$("#button").click(function () {
alert("handler called");
$("#name").hide();
$("#selection").on('change', function () {
alert("handler called1");
if ($("#selection").val() == "day") {
$("#name").show();
}
});
});
});
My HTML is:
<div id = "days">
<table>
<tbody>
<tr>
<td>
<div class="selection" id="selection">
<table>
<tbody>
<tr>
<td><label>selection</label></td>
</tr>
<tr>
<td><select class="selection"></select></td>
</tr>
</tbody>
</table>
</div>
<div class="name" id="name">
<table>
<tbody>
<tr>
<td><label>Name</label></td>
<td><input type="text"</input></td>
</tr>
</tbody>
</table>
</div>
</td>
</tr>
</tbody>
</table>
</div>
The
alert("Handler called");
is fired the second time but the .hide() doesnt work.

It truly is hard to understand your end result, but after analyzing what you are doing more, i think this is what you want:
HTML:
<select id="days_dropdown">
<option value='0'>select one</option>
<option value='night'>night</option>
<option value='day'>day</option>
<option value='afternoon'>afternoon</option>
</select>
<form id="myForm" style="display:none">
<label>Name</label>
<input type="text">
<button type="submit">Save</button>
</form>
JS:
$(document).ready(function() {
$("#days_dropdown").change(function() {
if ($(this).val() === "day") {
$("#myForm").show();
} else {
$("#myForm").hide();
}
});
$("#myForm").submit(function() {
//..your code to save the form info
$(this).hide();
$("#days_dropdown").val(0);
return false;
});
});
Let me know if this is the desired result, and ill explain in more detail your mistakes.

On
$("#selection").on('change', function () {
you select your div with id "selection", not the selection tag. And also you should get value of selected option, not the value of "select" tag
Need to modified some in JS code for proper work:
$(document).ready(function () {
$("#button").click(function () {
$("#name").hide();
$("select.selection").on('change', function () {
var sel = this;
if (sel.options[sel.selectedIndex].value == "day") {
$("#name").show();
}
});
});
});
Here is a FIDDLE

Its hard to understand specifically what you are going for, but is this what you are trying to do?
HTML
<button id='btn'>Click Me</button>
<div id="days">
<table>
<tbody>
<tr>
<td>
<div>
<table>
<tbody>
<tr>
<td><label>selection</label></td>
</tr>
<tr>
<td>
<select id="selection">
<option value='something'>1</option>
<option value='day'>2</option>
<option value='something'>3</option>
</select>
</td>
</tr>
</tbody>
</table>
</div>
<div class="name" id="name">
<table>
<tbody>
<tr>
<td><label>Name</label></td>
<td><input type="text"</input></td>
</tr>
</tbody>
</table>
</div>
</td>
</tr>
</tbody>
</table>
</div>
JS:
$(document).ready(function() {
$("#btn").click(function() {
$("#name").hide();
$("#selection").on('change', function() {
if ($("#selection").val() == "day") {
$("#name").show();
}
});
});
});
The problem I initially saw was your .on('change') , you were trying to attach this to a div, but you want to attach it to the select element

js function - delegate after creating html element not working

I have this:
<table>
<tr id="firstaut">
<td>Author:</td>
<td>
<input class="auts" name="name" />
</td>
<td>
<button class="aut_button" type="button">delete</button>
</td>
</tr>
<tr>
<td colspan="2">
<a onclick="addmore()"> + add more name</a>
</td>
</tr>
</table>
$(function(){
$('.aut_button').on('click',function(){
alert('test');
});
});
function addmore(){
$("<tr id='firstaut'><td>Author:</td><td><input class='auts' name='name'/></td><td><button class='aut_button' type='button'>delete</button></td></tr>")
.insertAfter('#firstaut').delegate('.aut_button');
}
If i click on newly added delete button, it is not alerting. what am i doing wrong?

Try using on with the other overload,
$(function(){
$('table').on('click', '.aut_button' ,function(){
alert('test');
});
});
Please read here to know more about event delegation.

Output the id of a specific <td>

I need to create a function that outputs only the id of any image whenever the user click on it. (Javascript or jQuery it doesn't matter)
<table>
<tr>
<td id="1"><img src="image1.gif"></td>
<td id="2"><img src="image1.gif"</td>
<td id="3"><img src="image1.gif"</td>
</tr>
</table>

Add a class to your table:
<table class="tblImages">
<tr>
<td id="1"><img src="image1.gif"></td>
<td id="2"><img src="image1.gif"</td>
<td id="3"><img src="image1.gif"</td>
</tr>
</table>
Then delegate the binding:
$('.tblImages').on('click', 'td', function(e){
var id = this.id; // here you go
});
Demo: http://jsfiddle.net/Uz2pW/

try this
$('td').on('click', function(){
alert($(this).attr('id'));
});
LIVE DEMO

If you are looking for printing the data cell id wrapping the image, then one option is to attach an id for each image that would enable you to retrieve its parent node from javascript. It would look like this:
<html>
<head>
<script>
function say_id(some_id) {
alert(document.getElementById(some_id).parentNode.id);
}
</script>
</head>
<body>
<table>
<tr>
<td id="1"><img id="img-1" src="Tulips.jpg" onclick="say_id(this.id)"/></td>
<td id="2"><img id="img-2" src="Tulips.jpg" onclick="say_id(this.id)"/></td>
<td id="3"><img id="img-3" src="Tulips.jpg" onclick="say_id(this.id)"/></td>
</tr>
</table>
</body>
</html>

Try this:
$("td img").on("click", function() {
var id = $(this).closest("td").attr("id");
// do as you want with id
});

None of your images have id's, but you can get the id of the table cell:
$('image').click(function(){
var parentID = $(this).closest('td').id;
console.log(parentID);
});