A page contains two tables. First table is loaded together with the whole page and the second table is loaded afterwards with the help of ajax.
Both tables contain links in each their row.
After clicking a link the corresponding table row (where link is) should be highlighted.
With the first table there are no problem. The following works ok:
$(document).ready(function () {
$('#firstTable tr a').click(function (event) {
$('#firstTable tr').css("background-color", "white");
$(this).closest('tr').css("background-color", "silver");
});
});
But there are problems with the second table. I try to use .live() method but with no success, it doesn't react on clicks:
function onLoad() {
$('#secondTable tr a').live('click', function () {
highlChooseRow();
});
}
function highlChooseRow() {
$('#secondTable tr').css("background-color", "white");
$(this).closest('tr').css("background-color", "silver");
}
What am I doing wrong?
How about
$(document).ready(function () {
$('#firstTable tr a, #secondTable tr a').live('click', function (event) {
$(this).parent('table').find('tr').css("background-color", "white");
$(this).closest('tr').css("background-color", "silver");
});
});
should work without any problems. for cleanup you could also define some class '.higlightable-table' or something like that and use $('.hightlightable-table a').live ...
Related
I am trying to add a class on the row the user is clicking on. To do that, I use the responsive-display event.
$(function () {
$('#people-waiting-send-up').DataTable().on('responsive-display', function (e, datatable, row, showHide, update) {
row.addClass('opened')
});
});
But row is not a jQuery object so addClass() does not work. How should I do?
Using the row.index, I can find the row the user has clicked on, and add a class to it:
$(function () {
$('#people-waiting-send-up').DataTable().on('responsive-display', function (e, datatable, row, showHide, update) {
$(datatable.row(row.index()).node()).addClass('opened');
});
});
I want to add a column to my table. My js code is as follows:
jQuery(document).ready(function () {
jQuery('#addCol').click(function () {
var countRows = $('#blacklistgrid tr').length;
$('.class').each(function() {
$( this ).append("<td><input type=\"text\"/></td>");
});
});
This code can be found in the fiddle. What am I doing wrong ?
You're targeting the wrong element.
You should do this:
jQuery('.Row').each(function() {
jQuery( this ).append("<td><input type=\"text\"/></td>");
});
Notice jQuery('.Row') instead of jQuery('.class')
See the docs, the class selector is used like jQuery('.<classname>'), and in this case you want to get each rows, which are identified by Row class
Im working on a CRUD Table populated using Knockout. jQuery Click event is not working on new pushed elements to the observable array
click event function
$('td').on('click', function () {
var spanElement = $(this).find('span');
$(this).find('span').hide();
$(this).find('input').show().select().on('blur', function () {
$(this).hide();
spanElement.show();
});
});
This code is working for all rows populated on-load, but not for those I add using add button.
Why is it so? How to fix it?
JSFiddle
It does not work because you are adding the event handler directly to the table cells. When you add new rows, you never add the click element.
To solve this problem, apply the click event to the table and let event delegation take over
$('table').on('click', 'td', function () {
var spanElement = $(this).find('span').hide();
$(this).find('input').show().select().on('blur', function () {
$(this).hide();
spanElement.show();
});
});
Try this
$(document).on('click', 'table td', function () {
//Your Functions
});
I want to append the text in last column of the table (grid like structure). Like below
When Click on Add button i want to append some text in last column adjacent to Add button. I am getting repated text on click of Add as in picture above.
This is what i have tried so far (one step away):
$(document).ready(function(){
$('.new').on('click', function(){
var recId= $(this).parents("#myTable td:last-child");
recId.append('<b>Sometext</b>');
recId.css("background-color", "lightgreen");
});
});
Can someone help me rectify this, Sample JSFiddle
Edit for Clarity in question
Sometext added in last column is dynamic and click event on Add button should fire multiple times.
Try .one()
Attach a handler to an event for the elements. The handler is executed
at most once per element per event type.
$('.new').one('click', function () {
fiddle Demo
Updated after OP's comment.
fiddle Demo
$(document).ready(function () {
$('.new').on('click', function () {
var recId = $(this).parents("#myTable td:last-child");
if (recId.text().indexOf("Sometext") === -1) { //if it contains Sometext it will not append it again but if it's a new value it will append it
recId.append('<b>Sometext</b>');
recId.css("background-color", "lightgreen");
}
});
});
Better code
fiddle Demo
$(document).ready(function () {
$('.new').on('click', function () {
var recId = $(this).parent();
recId.find('b').remove();
recId.append('<b>Sometext</b>');
recId.css("background-color", "lightgreen");
});
});
Try:
$(document).ready(function(){
$('.new').on('click', function(){
var recId= $(this).parents("#myTable td:last-child");
recId.find('b').remove(); //remove text
recId.append('<b>Sometext</b>');
recId.css("background-color", "lightgreen");
});
});
DEMO here.
i did this to your JS.
$(document).ready(function(){
$('.new').on('click', function(){
var recId= $(this).parents("#myTable td:last-child");
if (!recId.hasClass("changed")) {
recId.append('<b>Sometext</b>');
recId.css("background-color", "lightgreen");
recId.addClass("changed");
}
});
});
checking if the td has the class "changed", if not: add text, change bgcolor and the add the class "changed" so the event can fire but won't do anything to the same td twice.
I'm trying to alert message on click each column. I have a table in which three row and four column, now I want alert message with next column value on third column click of each table. I have tried this but all column get value not a particular column. my problem is this is invoke in every column click but I want alert message only when third column click of each row.
HTML
<table id='myTable'>
<tr><td>R1C1</td><td>R1C2</td><td>R1C3</td><td>R1C4</td></tr>
<tr><td>R2C1</td><td>R2C2</td><td>R2C3</td><td>R2C4</td></tr>
<tr><td>R3C1</td><td>R3C2</td><td>R3C3</td><td>R3C4</td></tr>
</table>
JS
$("#myTable tr").bind("click", function () {
alert($(this).children("td").eq(3).html());
});
Demo Here
please try this code
$(document).ready(function () {
$('#myTable tr').each(function (Mindex, Mval) {
$(Mval).find('td:eq(2)').click(function () {
alert($(Mval).find('td:eq(3)').html());
});
});
Try this
$('table#myTable tr td:nth-child(3)').on('click', function() {
alert($(this).next().html());
});
Check Here
$("#myTable tr td:nth-child(3)").click(function () {
alert($(this).next().html());
});
Try this:
$('#myTable').children('tr').children('td').eq(3).on('click', function() {
alert($(this).next().html());
});
The above function makes sure that you are calling the direct children elements but not any nested other same elements. Solves future regressions.
If your table is going to stay the same size there are answers that already work. If your table is going to grow I would recommend doing some event delegation. It will dramatically speed up the page if there are going to be a large number of event listeners.
$('#myTable').on('click', 'td:nth-child(3)', function(){
alert($(this).text());
});
See this jsfiddle, and this jquery documentation.
below code will find and set the desired column value
$('#myTable tr:gt(0)').each(function(){
// console.log($('td:eq(3)', $(this)).html());
alert($('td:eq(3)', $(this)).html());
$('#myTable').find('tr:gt(0)').find('td:eq(3)').html("hello");
});
Try this:
var thirdEle = $("#myTable tr td:nth-child(3)");
thirdEle.bind("click", function () {
alert($(this).html());
});