Add an event to a JAVASCRIPT table

Asked

Viewed 241 times

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. Obs: the code works but it is not set the "src" that should be changed according to button on which I clicked.

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

  • treat as 0, i is part of an iteration, it is not the problem q want to solve, the want to solve is the fact that the values of addeventlistener are fixed, IE, it only uses the link of the last link nail.

1 answer

0


As you are sending parameters to another function, you need to include the external function in the addEventListener within a function proper to the event, thus:

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

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

Testing:

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>

Browser other questions tagged javascript

You are not signed in. Login or sign up in order to post.