使用生成的按鈕打開Modalbox

我創建了一個帶有JSON數據的表並使用Javascript函數按鈕添加到此表中。使用生成的按鈕打開Modalbox

現在我想與此按鈕generated Modalboxes與不同勢輸出打開（例如通過Hello world1按鈕1，hello world2通過按鈕2）。

有沒有辦法解決這個問題？

我的代碼：

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> 
 

 

 
<table id="mytable"></table>

來源

2017-06-22 Drextor

您可以使用https://developer.mozilla.org/en- US/docs/Web/API/Element/querySelectorAll – Medda86

有點困惑，你可以添加一個onclick按鈕傳遞一個參數，並可以做任何你想要的。這也是用參數（或多個）打開Modal的一個很好的例子。 http://getbootstrap.com/javascript/#modals-related-target –

不要對所有按鈕使用相同的ID，它們必須是唯一的或更好的，請使用類 –

您可以在新的按鈕使用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')); 
});

來源

2017-06-22 13:13:43 Medda86

使用生成的按鈕打開Modalbox

回答

相關問題