Question

我创建了一个包含JSON数据的表，并使用Javascript函数按钮添加到此表中。

现在我想使用此按钮generated Modalboxes打开不同的输出（例如{1}按钮1，Hello world1按钮2）。

有没有办法解决这个问题？

我的代码：

＆＃13;

hello world2

＆＃13;

$( document ).ready(function() {

    //JSON for table    
    var hotspots = "[{\"path\": \"src/main/java/tools/generator/data/RecordPart.java\",\"revisions\": 25,\"codeLines\": 18,\"authors\": [{\"name\": \"User1\",\"commits\": 7}]},{\"path\": \"src/main/java/tools/generator/data/RecordTotal.java\", \"revisions\": 55,\"codeLines\": 23,\"authors\": [{\"name\": \"User1\",\"commits\": 5}]},{\"path\": \"src/main/resources/test.xml\",\"revisions\": 102,\"codeLines\": 44,\"authors\": [{\"name\": \"User1\",\"commits\": 7}]},{\"path\": \"src/main/java/tools/generator/helper/MenuHelper.java\",\"revisions\": 4,\"codeLines\": 115,\"authors\": [{\"name\": \"User1\",\"commits\": 2}]}]";  
          
        var jsonHotspots = JSON.parse(hotspots);
        constructTable(jsonHotspots);
    });


    // Table out of json
    function constructTable(json) {
        var tbl=$("<table/>").attr("id","mytable");
        $("#div1").append(tbl);
        var tr="<tr>";
        var td1='<td onclick="sortTable(0)" >Path</td>';
        var td2='<td onclick="sortTable(1)" >Rev</td>';
        var td3='<td onclick="sortTable(2)" >Lines</td>';
        var td4='<td ></td></tr>';
        $("#mytable").append(tr+td1+td2+td3+td4);
        for(var i=0;i < json.length ; i++)
        {
            var tr="<tr>";
            var td1="<td>"+json[i]["path"]+"</td>";
            var td2="<td>"+json[i]["revisions"]+"</td>";
            var td3="<td>"+json[i]["codeLines"]+"</td>";
            var td4='<td><button class="button" id="myBtn'+ i +'">Show<td></tr>';
           $("#mytable").append(tr+td1+td2+td3+td4);
        }
    }

＆＃13;

Answer 1

您可以使用element.querySelectorAll

在新按钮上。

https://jsfiddle.net/zrdj703e/1/

document.querySelector('.button').addEventListener("click", myFunction);

function myFunction() {
    alert('clicked');
}

编辑：我现在看到你使用jquery，然后你可以使用：

$('body').on('click','#mytable button',function({
   alert('button clicked with id: '+$(this).attr('id'));
});

使用生成的按钮打开Modalbox

1 个答案: