Javascript使用onclick属性生成许多DOM元素

我有以下脚本：

var div = document.getElementById("ShowAndHide");
var colbutton = document.createElement("a");
var linkText = document.createTextNode("Show/Hide column");
colbutton.appendChild(linkText);
colbutton.setAttribute("href", "javascript:void(0)");
jQuery.each(data.aoColumns, function(i, value){
    colbutton.onclick = function(){
        fnShowHide(i);
    }
div.appendChild(colbutton);
});

function fnShowHide( iCol ){
var bVis = oTable.fnSettings().aoColumns[iCol].bVisible;
oTable.fnSetColumnVis( iCol, bVis ? false : true );
}

基本上，我需要的是创建一些具有明显不同属性的DOM元素。 我没有发现任何有用的东西，所以我决定在这里问一下。

---

谢谢

我看到您已经在使用jQuery了。下面是一个jQuery解决方案：

var $div = $("#ShowAndHide");
var $colbutton = $("<a href='javascript:void(0)'>Show/Hide column</a>");

$.each(data.aoColumns, function(i) {
    $colbutton.clone()
        .on('click', fnShowHide.bind(window, i))
        .appendTo($div);
});

function fnShowHide( iCol ){
    var bVis = oTable.fnSettings().aoColumns[iCol].bVisible;
    oTable.fnSetColumnVis( iCol, bVis ? false : true );
}

var$div=$（“#ShowAndHide”）；
var$colbutton=$（“”）；
$.each（data.ao列，函数（i）{
$colbutton.clone（）
.on（'click'，fnShowHide.bind（窗口，i））
.appendTo（$div）；
});
函数fnShowHide（iCol）{
var bVis=oTable.fnSettings（）.aoColumns[iCol].bVisible；
oTable.fnSetColumnVis（iCol，bVis？假：真）；
}

---

这是一个正在工作的

您能使用jQuery吗？或者更确切地说不是？你能给我举个例子吗？你想多次添加你的按钮

colbutton

？没错！但它们都应该使用不同的参数调用同一个函数