CODEWITHSUNDEEP
javascriptjquery
Ankur Chachra
Ankur Chachra

Reputation: 131

On click of a row in a dynamically generated table, get its radio button checked

On my webpage, I have a button whose click dynamically generates a table. Each row of the table has a radio button. Now, I am trying to get the corresponding radio button of a row checked when I click on that row. Here's the HTML

Insert table here
<button name="myreq" id="myreq" class="homeButtons">My Requests</button>
<table class="newreqtable" id="myrequesttable"></table>

Here's the JS for what I'm trying to achieve. I have added values in the 'jsarray' manually for ease in the fiddle. http://jsfiddle.net/4MYGa/1/ 

$("#myreq")
.button()
.click(function () {

var jsarray = new Array();
jsarray.push("1");
jsarray.push("requestor1");
jsarray.push("approver1");
jsarray.push("pending");
jsarray.push("chrome");
jsarray.push("25");
jsarray.push("source1");
jsarray.push("dest1");
jsarray.push("2");
jsarray.push("requestor2");
jsarray.push("approver2");
jsarray.push("pending");
jsarray.push("firefox");
jsarray.push("25");
jsarray.push("source2");
jsarray.push("dest2");

var table = '<table>';
table += '<tr><th>Select</th><th>RequestID</th><th >Requester</th><th>Approver</th><th>Status</th><th>Product</th><th>Version</th><th>Source</th><th>Destination</th></tr>';

for (var j = 0; j < jsarray.length; j += 8) {
    table += '<tr><td><input type="radio" name="requestradio" id="rad' + j + '"></td><td>' + jsarray[j] + '</td><td>' + jsarray[j + 1] + '</td><td>' + jsarray[j + 2] + '</td><td>' + jsarray[j + 3] + '</td><td>' + jsarray[j + 4] + '</td><td>' + jsarray[j + 5] + '</td><td>' + jsarray[j + 6] + '</td><td>' + jsarray[j + 7] + '</td></tr>';
}
table += '</table>';
$("#myrequesttable").html(table);
});

$('#myrequesttable tr').click(function () {

$('#myrequesttable tr').removeClass("active");
$(this).addClass("active");
$(this).find('[name="requestradio"]').prop('checked', true);
});

Any thoughts as to what I might be doing wrong would be very helpful. Thanks

Upvotes: 0

Views: 1357

Answers (4)

Kevin Ji
Kevin Ji

Reputation: 10489

Modify the code to be the following:

// Cache $("#myrequesttable")
var $myrequesttable = $("#myrequesttable");
$myrequesttable
    .on("click", "tr", function () {
        // Cache $(this)
        var $this = $(this);
        $myrequesttable.find("tr").removeClass("active");
        $this.addClass("active");
        $this.find('input:radio[name="requestradio"]').prop('checked', true);
    });

Upvotes: 1

Jai
Jai

Reputation: 74738

change your click event:

$('#myrequesttable tr').click(function () {

to this:

$('#myrequesttable').on('click', 'tr', function () {

Demo Fiddle

See your all the <tr/>s are dynamically generated so they don't exist when the page was loaded, solution to this issue is to delegate the event to the closest static parent in your page dom, which is #myrequesttable table. so you have to delegate to this.

Although you can delegate to $(document) itself but if performance is concerned then it should be avoided.

Upvotes: 1

Sridhar R
Sridhar R

Reputation: 20408

Try this

$('body').on('click','#myrequesttable tr',function (){

    $('#myrequesttable tr').removeClass("active");
    $(this).addClass("active");
    $(this).find('[name="requestradio"]').prop('checked', true);
});

DEMO

Upvotes: 1

Milind Anantwar
Milind Anantwar

Reputation: 82241

You need to initialize the event when dom is ready.

 $("#myrequesttable").html(table);
//bind event when dom is ready
$('#myrequesttable tr').click(function () {
$('#myrequesttable tr').removeClass("active");
$(this).addClass("active");
$(this).find('[name="requestradio"]').prop('checked', true);

Working Fiddle

Upvotes: 2

Related Questions