CODEWITHSUNDEEP
javascriptjquery
Ankur Chachra
Ankur Chachra

Reputation: 131

Accessing elements of a table row on the basis of checked radio button

On my webpage, I have a table in which there's a radio button for each row. The name of radio buttons is the same for all rows to access them as a group. I have a button which alerts the row number whose radio button is checked. I'd like to access individual elements of the table of that row as well. Any thoughts as top how I might be able to achieve this would be very welcome.

Here's a Fiddle for the issue: http://jsfiddle.net/Gz668/13/

On the click of the button "edireq", it currently alerts the row number whose radio button is checked. I'd like to access the values of other fields of the table (requestor, approver, status etc. too.) Here's the jquery code

$("#edireq")
    .button()
    .click(function () {
    var ele = document.getElementsByName('reqradio');
    var len = ele.length;
    var flag = -1;
    for (var j = 0; j < len; j++) {
        if (ele[j].checked) {
            flag = j;
        }
    }
    if (flag > -1) {
        alert("Row : " + (flag + 1));
    } else {
        alert("Select a row first");
    }
});

Thanks.

Upvotes: 2

Views: 2269

Answers (3)

Thomas Junk
Thomas Junk

Reputation: 5676

I came up with the following: http://jsfiddle.net/Gz668/16/

$(document).ready(function () {
$("table").on("click", "tr", function(){
    $(".active").removeClass("active");
    $(this).toggleClass("active");
    $(this).find("input[type='radio']").prop("checked", true);
});
$("#edireq").on("click", function(){
    activeRow=$(".active");
    cells=activeRow.children();
    if(cells.length >0){
    row={
        select:cells[0],
        requestId:cells[1],
        requestor:cells[2],
        approver:cells[3],
        status:cells[4],
        product:cells[5],
        version:cells[5],
        source:cells[6],
        destination:cells[7]
    };
        alert(row.requestor.textContent);
    }
})

});

Upvotes: 0

codingrose
codingrose

Reputation: 15699

Try this:

var list = ["Req id","Requestor","Approver","Status","Product","Version","Source","Destination"]; //list of title
if (flag > -1) {            
    $(".active").find("td:gt(0)").each(function(i){                
        console.log(list[i]+": "+$(this).text());
    });
}

Fiddle here.

Upvotes: 0

Rory McCrossan
Rory McCrossan

Reputation: 337560

You have an odd mix of native javascript and jQuery. You can use the :checked selector to get the chosen radio button, then get the closest tr and read the text of each td within that row. Try this:

$(document).ready(function () {
    $('#reqtablenew tr').click(function () {
        $('#reqtablenew tr').removeClass("active");
        $(this).addClass("active").find('input[name="reqradio"]').prop('checked', true);
    });
    $("#edireq").button().click(function () {
        var $ele = $('input[name="reqradio"]:checked');

        if ($ele.length) {
            var $tds = $ele.closest('tr').find('td');
            var id = $tds.eq(1).text();
            var requestor = $tds.eq(2).text();
            // and so on..

            alert(id);            
            alert(requestor);
        }
        else {
            alert("Select a row first");
        }
    });

});

Example fiddle

Upvotes: 1

Related Questions