Adding an event to a JAVASCRIPT table

Question

Adding an event to a JAVASCRIPT table

Navigation

#1 by (0 votes)

1

I'm trying to add a click event to all the elements I add to the table. I do this at the same time I create the lines and cells. Note: the code works but the "src" that should be changed according to the button I clicked on is not set.

function preecheTable(){
row = document.createElement("tr")    //cria uma linha vazia
    celula = document.createElement("td");    //cria uma celula de dados
    link = document.createElement("button");
    //link.setAttribute("href", data[i].link);
    link.innerHTML = data[i].titulo;
    celula.appendChild(link);
    row.appendChild(celula);
    table.appendChild(row);
    //cria a relacao do iframe com o episodio escolhido
    celula.addEventListener("click", relationIframe(data[i].link, tableName));
}

function relationIframe(link, Nome){
  var video;
  if(Nome == "tablePodcast"){
    video = document.getElementById("sec-podcast").getElementsByTagName("iframe")[0];
    video.setAttribute("src", link);
  }else if(Nome == "tableEsport"){
    video = document.getElementById("sec-esport").getElementsByTagName("iframe")[0];
    video.setAttribute("src", link);
  }else if(Nome == "tableGameplays"){//GAMEPLAYS
    video = document.getElementById("sec-gameplays").getElementsByTagName("iframe")[0];
    video.setAttribute("src", link);
  }

}

javascript

asked by anonymous 06.05.2018 / 18:16

1 answer

Div on top of image Not getting the session user level

score 0 · Accepted Answer

As you are sending parameters to another function, you must include the external function in addEventListener within a function of the event, like this:

celula.addEventListener("click", function(){
    relationIframe(data[i].link, tableName);
});

So the click event will be assigned to each element referred to in celula .

Test:

data = [
{
   "titulo" : "tit1", "link": "teste1.html"
},
{
   "titulo" : "tit2", "link": "teste2.html"
}
]


table = document.querySelector("table");
function preecheTable(i,tableName){
   row = document.createElement("tr")    //cria uma linha vazia
    celula = document.createElement("td");    //cria uma celula de dados
    link = document.createElement("button");
    //link.setAttribute("href", data[i].link);
    link.innerHTML = data[i].titulo;
    celula.appendChild(link);
    row.appendChild(celula);
    table.appendChild(row);
    //cria a relacao do iframe com o episodio escolhido
    celula.addEventListener("click", function(){ relationIframe(data[i].link, tableName) });
}

function relationIframe(link, Nome){
  var video;
  if(Nome == "tablePodcast"){
    video = document.getElementById("sec-podcast").getElementsByTagName("iframe")[0];
    video.setAttribute("src", link);
  }else if(Nome == "tableEsport"){
    video = document.getElementById("sec-esport").getElementsByTagName("iframe")[0];
    video.setAttribute("src", link);
  }else if(Nome == "tableGameplays"){//GAMEPLAYS
    video = document.getElementById("sec-gameplays").getElementsByTagName("iframe")[0];
    video.setAttribute("src", link);
  }
console.log(link);
}

<table border="1">
</table>

<button type="button" onclick="preecheTable(0, 'tablePodcast')">Add0</button>
<button type="button" onclick="preecheTable(1, 'tableEsport')">Add1</button>
<br>
<div id="sec-podcast">
   <iframe height="20"></iframe>
</div>
<div id="sec-esport">
   <iframe height="20"></iframe>
</div>