Community
Learn
Tools Library
AI Tools
Leisure
search
English
javascript - How to bind different events to tr in table based on parameters
PHPz
PHPz 2017-05-16 13:22:03
0
2
672
function update() {
    var container = document.getElementById("ItemContainer");
    container.innerHTML = "";
    for(var i=0;i<this.bookMarkList.length;i++){        
        var name = this.ItemContainer[i].name;
        var tr = document.createElement('tr');              
        var td = document.createElement('td');
        tr.appendChild(td);
        tr.onclick =  function(){add(name);}; 
      container.appendChild(tr);
    }    
}

The same function is bound, but the parameters passed by each tr are different. How should it be written?
Now write like this, each tr is bound to the latest assigned parameter.

PHPz
PHPz

学习是最好的投资！

reply all(2)
过去多啦不再A梦
过去多啦不再A梦2017-05-16 13:24:03 2 floor 
    for(var i=0;i<this.bookMarkList.length;i++){        
        (function(i){
            var name = this.ItemContainer[i].name;
            var tr = document.createElement('tr');              
            var td = document.createElement('td');
            tr.appendChild(td);
            tr.onclick =  function(){add(name);}; 
            container.appendChild(tr);
        })(i)
    }
Like +0
Add Reply
Peter_Zhu
Peter_Zhu2017-05-16 13:24:03 1 floor 
// 给你写个demo吧
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<style>

</style>
<body>
<table id="ItemContainer" border="1" width="100"></table>
<script>
    function add (name) {
        alert(name);
    }
    function update() {
        var container = document.getElementById("ItemContainer");
        console.log(container);
        container.innerHTML = "";
        for(let i=0; i<5; i++) {        
            let name = i;
            let tr = document.createElement('tr');              
            let td = document.createElement('td');
            td.innerHTML = i;
            tr.appendChild(td);
            console.log(name)
            tr.onclick = function (){
                return add(name);
            }; 
          container.appendChild(tr);
        }  
    }
    update()  
</script>
</body>
</html>
Like +0
Add Reply
Popular Topics
More>
Popular Articles
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template