Question

我有以下脚本：

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元素。我还没有发现任何有用的东西，所以我决定在这里问一下。谢谢！

Answer 1

我已经看到你已经在使用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 );
}

这是一个有效的 jsFiddle demo

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

1 个答案: