0
我创建了一个带有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>
您可以使用https://developer.mozilla.org/en- US/docs/Web/API/Element/querySelectorAll – Medda86
有点困惑,你可以添加一个onclick按钮传递一个参数,并可以做任何你想要的。这也是用参数(或多个)打开Modal的一个很好的例子。 http://getbootstrap.com/javascript/#modals-related-target –
不要对所有按钮使用相同的ID,它们必须是唯一的或更好的,请使用类 –