html - Get selected row value using javascript - Stack Overflow

admin管理员组

文章数量:1431391

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?

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?

• javascript
• html
• html-table

Share Improve this question Follow edited Oct 19, 2016 at 12:33 Brian Tompsett - 汤莱恩 5,8937272 gold badges6161 silver badges133133 bronze badges asked Oct 19, 2016 at 9:51 UserUser 1,6621010 gold badges4141 silver badges6767 bronze badges 2

• Did you try just simply add: if(i == 0) { radio.setAttribute("onclick","functionName"); } – Grzegorz J Commented Oct 19, 2016 at 9:59
• radio.addEventListener("click", function(){ alert(this.parentNode.parentNode.firstChild.innerHTML); }); – KAngel7 Commented Oct 19, 2016 at 10:06

Add a ment  | 

6 Answers 6

Sorted by: Reset to default 1

try this code below 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()">

just add this line, before appending the radio element:

radio.onclick = function(){alert(this.value}; 

You just need to add an event handler to the radio button when you create it:

...
radio.addEventListener('click', radioButtonClick, false);
...

function radioButtonClick() {
    alert(this.getAttribute('value'));
}

This requires that you set the value of the radio button to your team id, or store it on the radio button (which will be the this inside the event handler) in some other way.

You aren't passing a teamid anywhere, so I assumed the teamid is the index of the looped array.

var generate_table = function()
{
    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");
        radio.setAttribute('data-team', i); // passing the team id


        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);
}

// add an event listener on a dynamic element, and alert the team id
document.addEventListener('click', function(e) {
  if(e.target && e.target.hasAttribute('data-team')) {
    alert(e.target.getAttribute('data-team'));
  }
});

You have several way to achieve that:

The easiest way I think is to add an attribute 'teamid' to the radio button. Then just listen for click event and get this value back.

radio.setAttribute('teamid', teamid);
radio.addEventListener('click', onRadioClick);

function onRadioClick(domEvent){
    console.log(domEvent.target.getAttribute('teamid'));
}

For me it is not the best way because you need to put some information in the DOM... In my opinion, it would be better to separate the presentation and the data :

var tableData = [
    {teamId: 'someId0', title:'title0', someData:'...' },
    {teamId: 'someId1', title:'title1', someData:'...' },
    {teamId: 'someId2', title:'title2', someData:'...' }
];

for (var i = 0, n = tableData.length ; i < n ; i++){
    var rowData = tableData[i];

    // Create the row using rowData
    // ...

    radio.setAttribute('teamid', rowData.teamId);
    radio.addEventListener('click', onRadioClick.bind(rowData));

    // ...
}

function onRadioClick(domEvent){
    // Here this represent data of the row clicked
    console.log(this.teamId);
}

I think it's easier to manage because every data are JS side... You don't store any data in the DOM... However both works ;) Hope it helps

radio.setAttribute("onclick", "anotherFunction(this)")

and after this function create anotherFunction():

function anotherFunction(object){
alert(object.parentNode.parentNode.firstChild.innerHTML);
}

本文标签： htmlGet selected row value using javascriptStack Overflow