CODEWITHSUNDEEP
javascriptjqueryarraysdomclick
Nicholas Hazel
Nicholas Hazel

Reputation: 3740

jQuery - Identify td that was clicked

I have created a grid (table) inside of an HTML doc based on user preference.

After appending the rows and cells to the table, it appears jQuery cannot access them properly? Its as if it doesn't consider them part of the DOM.

Essentially I will be handling everything inside of a multidimensional array for my data, such as:

[ ["","",""], ["","",""], ["","",""] ]

It is currently set up with appended rows named #row_0, #row_1, etc and td's added without an ID.

I need to be able to map the clicked TD to my jQuery so I can perform some functions and logic on it.

Is there any way to respond to my JS when a user clicks on a td with something like:

tr = [1]

td = [2]

Current code found here:

http://jsfiddle.net/HNjMR/4/

Upvotes: 2

Views: 321

Answers (4)

joseluisq
joseluisq

Reputation: 528

Here the solution, remember that you should bind the eventclick when the elements was created, you souldn't use a generical $('td').click event, this does not work because some elements was not added in DOM yet.

$("#go").click(function(){
    var size = $("#size").val();
    if(size<3 || size>10){
        alert("That is not a valid input. Please select 3-10");
        return;
    }

    $('#board tr').remove();

    // Check this bellow
    var size = parseInt($("#size").val()), 
    tr = $("<tr/>"), td = $("<td/>"), tdc;

    for(var i=0;i < size;i++){    
        for(var j=0;j<size;j++){
            tdc = td.clone();
            tdc.attr('id', 'col_'+j);
            tr.append(tdc);

            tdc.click(function(){
                alert(this);
            });
        }

        tr.attr('id','row_'+i);

        $("#board").append(tr);
    }
});

Upvotes: 1

Arun P Johny
Arun P Johny

Reputation: 388436

when the td element click handler is added those target elements are not yet created so use event delegation and bind the click handler to the #board element with the target element selector as td as given below. Then use .index() to find the position of row and td(Add 1 to index as it is 0 based)

$("#board").on('click', 'td', function () {
    var $td = $(this);
    var td = $td.index() + 1,
        row = $td.parent().index() + 1;
    alert(td + '-' + row);
});

Demo: Fiddle

Also your create code is buggy, jQuery append does not work like string concatenation

$('#board tr').remove();
var size = parseInt($("#size").val());
for (var i = 0; i < size; i++) {
    var $tr = $('<tr />', {
        id: 'row_' + i
    }).data('index', i + 1);
    $("#board").append("<tr id='row_" + i + "'>");
    for (var j = 0; j < size; j++) {
        $('<td />', {
            id: 'col_' + j
        }).data('index', j + 1).appendTo($tr);
    }
    $("#board").append($tr);
}

Demo: Fiddle

Upvotes: 1

Rafael Soufraz
Rafael Soufraz

Reputation: 964

Here live example friend: http://jsfiddle.net/HNjMR/5/

$("#board").on('click', 'td', function(){
    $("#board td").css("background","white");
    $(this).css("background","red");
});

This happens because when you insert a new dynamic element on the page, ready jquery can not find it. The ready by default runs events only on existing elements at load time. While some functions like .on, solve this problem.

Upvotes: 3

GrahamTheDev
GrahamTheDev

Reputation: 24935

http://jsfiddle.net/898n2/1/

$( document ).on( "click", "td", function() {
  alert(this.id);
});

This is using your current code

Notice I have used .on - this is a 'live' event using jquery

I have also modified your naming of each td to read col_1_2 - with 1 being col and 2 being row.

        $("#row_"+i).append("<td id='col_"+j+"_"+i+"'>&nbsp;</td>");

Upvotes: 1

Related Questions