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?
if(i == 0) { radio.setAttribute("onclick","functionName"); }radio.addEventListener("click", function(){ alert(this.parentNode.parentNode.firstChild.innerHTML); });