javascript数组列表中的颜色代码引导按钮自定义

Question

我想使用引导程序 btn-success（绿色）和 btn-danger（红色）为特定的按钮阵列自定义按钮。 在这种情况下，我希望 excel 为绿色，pdf 为红色。

我生成按钮的代码如下：

    var buttons = new $.fn.dataTable.Buttons(datatable, {
        buttons: [
            { 
                extend:'excelHtml5',
                footer: true,
                title: exportTitle(),
                messageTop: exportInfo()                    
            },
            { 
                extend:'pdf',
                footer: true ,
                title: exportTitle(),
                messageTop: exportInfo()
            }
        ]
    }).container().appendTo($("#divbuttons"))
    $("#divbuttons").find('button').removeClass()
    $("#divbuttons").find('button').addClass("btn btn-primary report_date") <-- here is where I set the css but it applies to both the buttons. How can I specifically say excel is btn-success and pdf is btn-danger

目前它看起来像上面的代码。

这是在浏览器检查中生成的 html 代码

如何专门为 excel 按钮的颜色编码是 btn-success 而 pdf 是 btn-danger ？

Answer 1

您可以轻松地遍历按钮数组。

创建一个如下所示的数组：

let buttons = [
 {
  name: "Find"
  class: "btn-primary"
 },
 {
  name: "Excel",
  class: "btn-success"
 },
 {
  name: "PDF"
  class: "btn-danger"
 }
]

for(const button in buttons) {
 $("#divbuttons").find('button').addClass(`btn ${button.class} report_date`)
}

这将遍历数组并将属性button.class 添加到类名中。