Question

我有这个JavaScript和JQuery代码。

var a3host = new RegExp("^cn3g");
var shorthost_reg = new RegExp("^cn.g..");
$.getJSON("filename.json", function (data) {
        var a = 0;
        $.each(data, function (i, item) {
                var c = item.hostname;

                var cls;
                // Assign class based on hostname regexp
                if (a3host.test(item.hostname)) {
                    cls = "host3";
                    a = 3;
                } else {
                    cls = "host8";
                        a = 8;
                    }
                    var shorthost = shorthost_reg.exec(item.hostname);
if ( a == 3)
{

    if (temp == 0)
    {
    document.write('<table border = 10px class = "gpus_table" border="1" cellspacing="1" cellpadding="5" style = "display: inline-block;  margin : 10px " >')
      document.write('<tr>');
  }
temp++;
document.write('<td>');
    document.write(item.hostname); //Output

document.write('</td>');
if (temp%6 == 0)
{
document.write('</tr>');
document.write('<tr>');
}
if (temp == 60)
{
    document.write('</table>')
}
}
}
);    
}
);

这给了我这个输出。 enter image description here

我想：当我点击hostname1时，它会给我bootstrap modal，我可以在其中打印一些JavaScript变量值。

有人可以帮忙吗？

请原谅不良的编码习惯。

Answer 1

这里有一个有效的example：

<!DOCTYPE html>
<html lang="en">
<head>
<title>Example</title>
<!-- Bootstrap -->
<link href="http://getbootstrap.com/dist/css/bootstrap.css" rel="stylesheet">
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<!-- add table -->
<table id="mytable" class="table table-bordered">
    <tr>
        <td id="host-1">hostname 1<span style="display: none">some hidden data form host 1</span></td>
        <td id="host-2">hostname 2<span style="display: none">some hidden data form host 2</span></td>
    </tr>
</table>
<!-- add modal -->
<div id="modal-table" class="modal fade bs-modal-sm" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-sm">
        <div class="modal-content modal-message">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title" id="myModalLabel">Title</h4>
            </div>
            <div class="modal-body"></div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">OK</button>
            </div>
        </div>
    </div>
</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://code.jquery.com/jquery.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.1.0/bootstrap.min.js"></script>
<script>
$(document).ready(function(){
    $("#mytable").find("td").click(function(e){
        $("#modal-table .modal-title").html($(this).attr("id"));
        $("#modal-table .modal-body").html($(this).find("span").text());
        $("#modal-table").modal({show:true});
    });
});
</script>
</body>
</html>

如何在JavaScript中的HTML表格中使用Bootstrap模式？

1 个答案: