Javascript 创建元素时在循环中设置onclick事件

我不想使用jQuery或任何其他第三方库

不起作用的概念证明：

<div id="Wrapper"></div>
<script>
    function Build()
{
    for (var i = 0 ; i < 10 ; i++)
    {
        var elem = document.createElement("div");
        elem.setAttribute("onclick", "OnClickEvent(" + i + ")");
        elem.textContent = "Hi";
        document.getElementById("Wrapper").appendChild(elem);
    }
}
function OnClickEvent(elementNum)
{
    alert("Hi! I am " + elementNum);
}

Build();
</script>

函数构建（）
{
对于（变量i=0；i<10；i++）
{
var elem=document.createElement（“div”）；
元素setAttribute（“onclick”、“OnClickEvent”（+i+））；
elem.textContent=“嗨”；
document.getElementById（“包装器”）.appendChild（elem）；
}
}
函数OnClickEvent（elementNum）
{
警惕（“嗨！我是”+elementNum）；
}
Build（）；

小提琴：

在现实生活中：

---

我正在基于ajax回调动态创建一个表，每行包含一个图像按钮和另一个表。此图像按钮应该能够隐藏或显示相应的内部表格。

令人沮丧。我自己能解决它。

添加（甚至在将其插入DOM之前）就足够了：

以下是我想要得到的：

和原型（如果fiddle被删除）：

html:

---

我忘了添加：我想在向文档树添加新元素之前添加这个onclick事件。这是因为我正在创建一个完整的结构，而不是将其插入到文档中。在将onclick事件插入文档后应用onclick事件将迫使我将该元素的创建划分为两个位置（我将不得不再次迭代整个表，我真的不想这样做）。能否发布一些html，显示您希望它看起来像什么，以及您希望侦听器使用哪些元素？

element.setAttribute("onclick","functionName("+param+")");

<section id="Table" class="table">
    <header class="row">
        <div class="cell">header</div>
    </header>
    <script>
        function ToggleShow(id) {
            var elem = document.getElementById(id);
            if (elem.classList.contains("invisible")) {
                elem.classList.remove("invisible");
            } else {
                elem.classList.add("invisible");
            }
        }
    </script>
    <section id="TableWrapper">
    </section>
</section>

function ToggleShow(id) {
    var elem = document.getElementById(id);
    if (elem.classList.contains("invisible")) {
        elem.classList.remove("invisible");
    } else {
        elem.classList.add("invisible");
    }
}

function Build() {
    var parent = document.getElementById("TableWrapper");
    for (var id = 0; id < 10; id++) {
        var row = document.createElement("div");
        row.appendChild(HeaderRowBuilder(id));
        row.appendChild(InnerTableBuilder(id));
        parent.appendChild(row);
    }
}

function HeaderRowBuilder(id) {
    var header = document.createElement("header");
    header.classList.add("row");
    header.appendChild(HeaderCellBuilder(id));
    var strongEle = document.createElement("strong");
    strongEle.classList.add("cell");
    strongEle.classList.add("cell2");
    strongEle.textContent = "Something else";
    header.appendChild(strongEle);
    return header;
}

function HeaderCellBuilder(id) {
    var div = document.createElement("div");
    div.classList.add("cell");
    div.appendChild(HeaderImageBuilder(id));
    return div;
}

function HeaderImageBuilder(id) {
    var img = document.createElement("img");
    img.setAttribute("alt", "extended");
    img.setAttribute("onclick", "ToggleShow('InnerTable_" + id + "')");
    return img;
}

function InnerTableBuilder(id) {
    var div = document.createElement("div");
    div.setAttribute("id", "InnerTable_" + id);
    div.textContent = "More rows, I don't care about them right now";
    return div;
}

Build();

.table {
    display: table;
}
.table .cell {
    display: table-cell;
}
.table .cell2 {
    border: 1px solid black;
    width: 100%;
}
.table .spacer {
    min-width: 40px;
    max-width: 40px;
}
.table .cell3 {
    min-width: 50px;
    max-width: 50px;
}
.table .row {
    display: table-row;
}
.invisible {
    display: none;
}