html: <div class='container'> <div class="col-lg-1"> <button id="addButton" class="btn btn-primary">弹出对话框</button> </div> </div> <!-- Modal --> <div class="modal fade" id="myTestModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <h4 class="modal-title">对话框</h4> </div> <div class="modal-body"> </div> <!-- /.modal-body --> <div class="modal-footer"> <button id="submitBtn" type="button" class="btn btn-primary">确定</button> <button type="button" class="btn btn-dark" data-dismiss="modal">关闭</button> </div> </div> <!-- /.modal-content --> </div> <!-- /.modal-dialog --> </div> <!-- /.modal --> js：（这种script的方式是jquery的形式，类似上述document） <script type="text/javascript"> + function($) { $(function() { $('#addButton').on('click', function() { $('#myTestModal').modal('show'); //点击按钮显示对话框,因为对话框默认是隐藏的,aria-hidden="true" }); }); }(window.jQuery); </script> |
点击每行按钮只操作对应的行
这个其实只要id唯一，然后id又是与操作的数据有一定关系（一般二者相等），则可实现对应操作
场景：这个常见于每行表格最后或开始有个操作的按钮，仅对所在的行进行操作。
html:
<td><a class="btn btn-primary details" role="button" id="<%= data['id'] %>">详情</a></td>
这里简化了，没有具体数据，只是说了思路，关键就是如何获取当前点击元素的id值
js:
<script type="text/javascript">
+ function($) {
$(function() {
$('#table1').delegate('.details','click',function(){
var btnId = $(this).attr('id');//获取当前点击的按钮的id值
$('#detailModal').modal('show');
});
});
}(window.jQuery);
</script>
JS里动态生成表格
场景：点击按钮时候生成一个动态数据的表格
html：
仅仅是一个button和一个div
<div class="col-lg-2"> <button id="addTableBtn" type="button" class="btn btn-primary col-lg-12">点击我</button> </div> <br/> <div id="relatesContainer" class="col-lg-6"> </div> js: <script type="text/javascript"> + function($) { $(function() { var data = [['小胖','BI Leader','handsome!'], ['小杰','OPS Developer','humours!'], ['小明','Protect China','play games all day!']]; $('#addTableBtn').click(function() { var table = $('<table class="table">'); var tbody = $('<tbody>'); var tr = $('<tr>'); var name = $('<td><B>name</B></td>'); var job = $('<td><B>job</B></td>'); var description = $('<td><B>description</B></td>'); tr.append(name); tr.append(job); tr.append(description); tbody.append(tr); for (var i in data) { var data = data[i]; //alert(i); //0,1,2 var tr = $('<tr>'); var name = $('<td>' + data[i][0] + '</td>'); //另一种方式 var job = $('<td>'); var description = $('<td>'); job.html('<font color="red">' + data[i][1] + '</font>'); description.html('<font color="green">' + data[i][2] + '</font>'); tr.append(name); tr.append(job); tr.append(description); tbody.append(tr); } table.append(tbody); $('#relatesContainer').append(table); }); }); }(window.jQuery); </script> |
append是追加子元素，给元素有两种方式，一种则是字符串拼接，另一种是使用元素的属性给予赋值。
时间格式化显示
场景：仅显示日期，不显示时间部分，并且指定时间格式
包：daterangepicker.js
html：
<span>
<input id='start' class="datetimepicker" />
</span>
js:
<script type="text/javascript">
$(document).ready(function() {
//仅仅将input标签初始化时间控件
$('.datetimepicker').datetimepicker();
//初始化时间控件仅显示日期部分
$('.datetimepicker').datetimepicker({
timepicker:false,
format:'Y/m/d'
});
});
</script>
