JavaScriptを使用して選択した行の値を取得します

Question

htmlボタンをクリックしてテーブルを動的に追加しました。チーム名、チームID、ラジオボタンを追加します。

HTML属性：

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

のJavascript機能：3列の

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行は、今私は、ラジオボタンのクリックに関する詳細を取得する必要があり、ボタンのクリックに生成されます。

最初の行からラジオボタンを選択すると、アラートボックスにteamidを表示する必要がありますか？どのように私はJavaScriptでこれを達成することができますか？

Answer 1

teamidセルの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()">

Answer 2

ちょうどラジオ要素を追加する前に、次の行を追加します。

Answer 3

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

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

と、この関数の後anotherFunction（）を作成：あなただけにイベントハンドラを追加する必要が

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

Answer 4

をラジオボタンを作成するとき：

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

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

これには、ラジオボタンの値をチームIDに設定するか、ラジオボタン（イベントハンドラ内のthis）に格納する必要があります。

Answer 5

どこにでもチームIDを渡すわけではないので、チームIDはループされた配列のインデックスであると仮定しました。

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

Answer 6

を警告する必要がありますあなたはそれを達成するには、いくつかの方法で持っている以下のコードを試してみてください。私が考える最も簡単な方法がある

をattrを追加するラジオボタンに 'teamid'をibuteしてください。それからちょうどクリックイベントを聞いて、この値を戻してください。

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

：あなたは私の意見では... DOMにいくつかの情報を配置する必要があるため

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

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

は、私にとってプレゼンテーションとデータを分離する方が良いだろう、最善の方法ではありません

すべてのデータがJS側であるため管理が簡単だと思います...あなたはDOMにデータを保存しません...しかし両方の作品;）助けてくれるといいでしょうか？