Get selected row value using JavaScript

I have dynamically add the table on html button click. Add the teamname, teamid, radio button.

HTML attributes:

<input type="button" value="Generate a table." onclick="generate_table()">

JavaScript function:

function generate_table()
{
    var body = document.getElementsByTagName("body")[0];
    var tbl = document.createElement("table");
    var tblBody = document.createElement("tbody");
    var teamrecord = "test";
    for (var i = 0; i <  teamrecord.length; i++) {
        var row = document.createElement("tr");

        var cell = document.createElement("td");
        var cell1 = document.createElement("td");
        var cell2 = document.createElement("td");

        var cellText = document.createTextNode("teamrecord");
        var cellId = document.createTextNode("teamid");
        var radio = document.createElement("INPUT");
        radio.setAttribute("type", "radio");
        radio.setAttribute("name", "radio");

        cell.appendChild(cellText);
        cell1.appendChild(cellId);
        cell2.appendChild(radio);

        row.appendChild(cell);
        row.appendChild(cell1);
        row.appendChild(cell2);

        tblBody.appendChild(row);
    }
    tbl.appendChild(tblBody);
    body.appendChild(tbl);
}

4 rows with 3 columns will generate on the button click. Now I need to get the details on the radio button click.

If I select the radio button from the first row I need to show the teamid in alert box? How can I achieve this in JavaScript?

Solution

Try this code below. It should alert teamid cell's innerText.

<input type="button" value="Generate a table." onclick="generate_table()">

 function generate_table()
        {
            var body = document.getElementsByTagName("body")[0];
            var tbl = document.createElement("table");
            var tblBody = document.createElement("tbody");
            var teamrecord = "test";
            for (var i = 0; i <  teamrecord.length; i++) {
                var row = document.createElement("tr");

                var cell = document.createElement("td");
                var cell1 = document.createElement("td");
                var cell2 = document.createElement("td");

                var cellText = document.createTextNode("teamrecord");
                var cellId = document.createTextNode("teamid");
                var radio = document.createElement("INPUT");
                radio.setAttribute("type", "radio");
                radio.setAttribute("name", "radio");
        //here we set value of radio button based on element index and we set a classname for teamid cell
                radio.setAttribute("value", i);
                cell1.setAttribute("class", "selected_teamid");
        //here we add click event
                radio.setAttribute("onclick", "getteamid("+i+")");

                cell.appendChild(cellText);
                cell1.appendChild(cellId);
                cell2.appendChild(radio);

                row.appendChild(cell);
                row.appendChild(cell1);
                row.appendChild(cell2);

                tblBody.appendChild(row);
            }
            tbl.appendChild(tblBody);
            body.appendChild(tbl);

        }
        function getteamid(i){
        alert(document.getElementsByClassName("selected_teamid")[i].innerText);
        }

<input type="button" value="Generate a table." onclick="generate_table()">