javascript生成的表我需要为每个生成的单元格分配一个单独的id - javascript generated table I need to assign a seperate id to each generated cell.

javascript generated table I need to assign a seperate id to each generated cell.

我有一个由JavaScript生成的表，它在循环中插入一行/单元格。每个循环都有从php文件中提取的数据。在使单元格可点击后，我试图为每个单元格分配一个唯一的id。我可以点击单元格来获取id，但单元格1的id为1，然后单元格2的id为2，但当我再次点击单元格1时，它的id为2中，而不是以前的id。我在下面包含了我的代码。如果有人能看到我的错误，或者只是给我指明正确的方向，请告诉我。

<table id="myTable">
        <tr>
        </tr>
    </table>
    <br>
<p onload="myFunction()"></p>
<script>  <!-- below is the function for the new items.-->
    var i = 0;
    function myFunction() {
            setInterval(function() {
            var table = document.getElementById("myTable");
            var row = table.insertRow(0);
            var cell1 = row.insertCell(0);
            cell1.id = "i";
            cell1.onclick = function(){alert(i);};
            cell1.innerHTML = "<?php include('Trick.php')?>";
            i++;
            },10000);} 
</script>

下面是我的css文件：

 table, th, td {
        border-collapse: seperate;
        border-spacing: 10px 10px;
        width: 100%;
        border:visible='false';
        color:white;
        font-size:34px;
        z-index:9;
        }
            td:hover {
            background-color:limegreen;
            }
    td{background-color:gray};

首先，将字母"i"分配为id:

cell1.id="i"

第二，当您发出警报时，警报框显示全局变量i的值，该值对于所有元素（最后一个值）都是相同的

var i = 0;
function myFunction() {
    setInterval(function() {
        var table = document.getElementById("myTable");
        var row = table.insertRow(0);
        var cell1 = row.insertCell(0);
        cell1.id = i;
        cell1.addEventListener("click",function(){
            alert(this.id);
        });
        cell1.innerHTML = "aaaaa";
        i++;
    },1000);
}