Develop Reference

Hyperlink JQuery doesn't triggered

I'm using JQuery for adding table row and at the last column I have hyperlink for cancel/delete the row. But it seems my JQuery not triggered when I clicked the hyperlink. Here my code:
$('input[name=barcode]').change(function() {
var newRow = $("<td><a href='#' class='remove'><font color='0404B4'>Cancel</font></a></td>");
$('#tab > tbody > tr').eq(index).after(newRow);
});
$(".remove").click(function() {
//delete row
alert("b");
});

It is not triggered since the newly added element is not bound to the click event. You can try this code:
$('#tab').on('click', '.remove', function() {
alert('b');
});
You can get more info over here jQuery on()

Toggle button on table header works only after 2 toggles

I have a table with search functionality, where the input to search is opened in the table column headers when clicking the toggle button. When clicking the button again, it reverts back to column names. However, this functionality only works after two clicks, and thereafter introduces some weird styling which I have no idea where it is coming from.
Here is the javascript:
$('#action_btn').on('click', function (event) {
if (document.getElementById("toggle_id").value == "OFF") {
// Setup - add a text input to each footer cell
$('#example thead th').each(function () {
var title = $('#example tfoot th').eq($(this).index()).text();
$(this).html('<input type="text" placeholder="Search ' + title + '" />');
document.getElementById("toggle_id").value = "ON";
});
// DataTable
var table = $('#example').DataTable();
// Apply the search
table.columns().eq(0).each(function (colIdx) {
$('input', table.column(colIdx).header()).on('keyup change', function () {
table.column(colIdx)
.search(this.value)
.draw();
});
});
} else {
// Remove a text input to each footer cell
$('#example thead th').each(function () {
var title = $('#example tfoot th').eq($(this).index()).text();
$(this).html('<th>'+title+'</th>');
document.getElementById("toggle_id").value = "OFF";
});
}
});
I have a fiddle to make it easier to view my code: http://jsfiddle.net/flldom001/vmxgz0s5/
How can I make sure that the button toggles the search in the following way?:
Default: off
Toggle: on/off

I have made some changes in your Fiddle
I have removed the #toggle_id div outside the table and gave a data-value attribute.
Check this DEMO
$(document).on('click', '#action_btn', function (event) {
if ($("#toggle_id").attr("data-value") == "OFF") {
console.log($("#toggle_id").data("value"));
// Setup - add a text input to each footer cell
$('#example thead th').each(function () {
var title = $(this).text().replace('Search ', '');
$(this).html('<input type="text" placeholder="Search ' + title + '" />');
$("#toggle_id").attr("data-value", "ON");
});
// DataTable
var table = $('#example').DataTable();
// Apply the search
table.columns().eq(0).each(function (colIdx) {
$('input', table.column(colIdx).header()).on('keyup change', function () {
table.column(colIdx)
.search(this.value)
.draw();
});
});
} else {
// Setup - remove a text input to each footer cell
$('#example thead th').each(function () {
var title = $(this).find('input').attr('placeholder');
$(this).removeAttr('class tabindex aria-controls rowspan colspan aria-sort aria-label style').html(title);
$("#toggle_id").attr("data-value", "OFF");
});
}
});

Instead of using value attribute on div tags, work with class attribute. Toggle this attribute as needed.
As value is not a valid attribute for a div, it is not picked by the DOM. After you explicitly set the property value to 'ON' or 'OFF'. It picks that up.
Here's the updated fiddle
toggle_id element
<div id="toggle_id" class="OFF">
Jquery to check for on/off status
if ($("#toggle_id.OFF").length > 0) {

How to iterate over a table cells using jQuery?

I am new to jQuery and I am trying to learn it. I want to iterate over a 9 * 9 grid alerting the values of the input boxes(total 81), row wise, column wise and grid 3 * 3 wise.
Here is what I have tried:
$("#checkBox").change(function () {
if (this.checked) {
$('table tr').each(function () {
alert($(this).td.input.val());
});
$('table tr').each(function () {
alert($(this).td.input.val());
});
} else {
alert("Check Box is unchecked. AutoCheck is disabled.");
}
});
Only else alert is working. Any comment or guidance is appreciated.

This part $(this).td.input.val() of your code will raise error since jquery object does not contains a property called td.
Try,
//The following snippet would alert the text inside of each td
$('table tr td').each(function () {
alert($(this).text());
});
//The following snippet would alert the value of each input each td
$('table tr td input').each(function () {
alert($(this).val());
});
If you want to iterate row wise then try,
$('table tr').each(function () {
$(this).find('td').each(function(){
$(this).find(':input').each(function(){
alert($(this).val());
});
});
});

Positioning Dynamically created Button

I have created four text boxes and when I click a delete button it adds another set of text boxes with a remove button like this:
This is My script
$(document).ready(function() {
$("#add").click(function () {
$('.main').append("<div><br />" + $('.append_list').html() + '<button class="rmv_btn" onclick="$(this.parentNode).remove()">Remove</button></div>');
});
});
How can I add this button next to the first text box which is created dynamically?
With reference to this Question
Output Image

Create a temporary container in which you insert your cloned input list. Then find the first input in that temp container:
$(document).ready(function() {
$("#add").click(function () {
var container = $('<div />').addClass('justadded').appendTo('.main');
$(container).append($('.append_list').html());
var input = $(container).find('input:first');
$('<button />').text("Remove").addClass('rmv_btn').attr('onclick', '$(this.parentNode).remove()').insertAfter(input);
$(container).removeClass('justadded');
});
});

See this : http://jsfiddle.net/MpEUZ/5/
$(document).ready(function() {
$("#add").click(function() {
$('.main > :first-child').clone().appendTo('.main').find('input[type=text]').val('');
$('.main .append_list:last').find('input[type=text]:first').after("<button class='rmv_btn' style='clear:both'> Remove </button>");
});
$('.main').on("click", ".rmv_btn", function() {
$(this).parent().remove();
});
});​

This one should works :
$(document).ready(function() {
$("#add").click(function () {
var html = $($('.append_list').html());
html.find('input').first().after('<button class="rmv_btn" onclick="$(this.parentNode).remove()">Remove</button></div>');
$('.main').append("<div><br />" + html);
});
});
I guess $('.append_list') is containing the good html for the inputs.

Only select one row at a time using jquery

I am using mouseover(), mouseout() and click() to highlight rows on mouseover and add a highlight class on click:
//Mouseover any row by adding class=mouseRow
$(".mouseRow tr").mouseover(function() {
$(this).addClass("ui-state-active");
});
$(".mouseRow tr").mouseout(function() {
$(this).removeClass("ui-state-active");
});
$('.mouseRow tr').click(function(event) {
$(this).toggleClass('selectRow');
});
The above code will allow a user to 'highlight' (i.e add class selectRow) to as many rows as they want. What is the best way, using jQuery, to limit the number of rows they can select to just one (so that if they click one row, then click another it will remove the 'selectRow' class from the previously selected row)?

You could remove the selectRow class from all of the tr elements except the clicked one whenever you click on one, and then toggle it on the clicked one:
$('.mouseRow tr').click(function(event) {
$('.mouseRow tr').not(this).removeClass('selectRow');
$(this).toggleClass('selectRow');
});
Here's a working example.

Use this script at end of your html,meant after </body> tag
<script>
$("tr").hover(function()
{
$(this).addClass("hover");
}, function()
{
$(this).removeClass("hover");
});
$('tr').click(function(event) {
$('tr').not(this).removeClass('click');
$(this).toggleClass('click');
});
</script>
This is css that highlight your row:
.click{
background:#FF9900;
color: white
}
.hover{
background:blue;
color: white
}
here is the link of working example
Working example
Hope this will help

While I first tried the toggleClass/removeClass-way with a '.clicked'-Class in CSS, it turned out to lag a bit. So, I did this instead which works better/faster:
$(document).on('click', '.DTA', function (event) {
$('.DTA').not(this).css('backgroundColor', "#FFF");
$(this).css('backgroundColor', "#FAA");
});
Here is the fiddle: https://jsfiddle.net/MonteCrypto/mxdqe97u/27/

$('.mouseRow tr').click(function(event) {
if (!$(this).hasClass('selectRow')){
$('.selectRow').removeClass('selectRow');
$(this).addClass('selectRow');
} else {
$('.selectRow').removeClass('selectRow');
}
});
Should do the trick. Note this still allows your toggle, if you don't want that just remove the if(){ and } else { ... } parts leaving:
$('.selectRow').removeClass('selectRow');
$(this).addClass('selectRow');

Using jquery-ui .selectable function with tbody id='selectable':
$(function() {
$("#selectable").selectable({
filter: "tr", //only allows table rows to be selected
tolerance: "fit", //makes it difficult to select rows by dragging
selected : function(event, ui) {
var rowid = "#"+ui.selected.id; //gets the selected row id
//unselects previously selected row(s)
$('tr').not(rowid).removeClass('ui-selected');
}
});
});
Each of my table rows, which were created dynamically have an id of 'task'+i

You could try this:
$('.mouseRow tr').click(function(event) {
$('.mouseRow tr').each(function(index) {
$(this).removeClass('selectRow');
});
$(this).toggleClass('selectRow');
});
You could also use the .find() method and wrap logic to check if any elements have this class first before removing all.