Question

我不想使用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>

小提琴：http://jsfiddle.net/qyzrQ/

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

Answer 1

令人沮丧。我自己能够解决这个问题。

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

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

以下是我想要的内容：http://jsfiddle.net/YhY4Q/6/

原型（如果小提琴被删除）：

HTML：

<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>

的javascript：

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();

和css：

.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;
}

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

1 个答案: