Bootstrap Snippet Table Dropdown ProgressBar using HTML CSS Bootstrap jQuery

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class="container">
    <div class="row">
        <div class="col-md-12"> <h2>Table with Progress Bar</h2> </div>
    </div>
    
    <div class="row">
                        
                        <div class="col-md-12">
                            <div class="widget blank no-padding">
                                <div class="panel panel-default work-progress-table">
                                      <!-- Default panel contents -->
                                    <div class="panel-heading">Muhammad Mohsin Irshad<i>UI/UX Designer & Developer (isometric.mohsin@gmail.com)</i>
                                        <div class="dropdown rounded">
                                            
                                            <button class="btn btn-danger pull-right"  data-title="Delete" data-toggle="modal" data-target="#delete"><span class="glyphicon glyphicon-trash"></span> Delete</button>
                                        </div>
                                    </div>
                                      <!-- Table -->
                                    <table id="mytable" class="table">
                                        <thead>
                                          <tr>
                                            <th><input type="checkbox" id="checkall" /></th>
                                            <th>Name</th>
                                            <th>Phone</th>
                                            <th>Email</th>
                                            <th style="width:25%">Progress</th>
                                            <th>Status</th>
                                          </tr>
                                        </thead>
                                        <tbody>
                                          <tr>
                                            <td><input type="checkbox" class="checkthis" /></td>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
.panel.work-progress-table > .panel-heading {
background: none repeat scroll 0 0 #efefef;
-webkit-border-radius: 0;
-moz-border-radius: 0;
-ms-border-radius: 0;
-o-border-radius: 0;
border-radius: 0;
color: #333333;
float: left;
font-family: roboto;
font-size: 16px;
font-weight: normal;
letter-spacing: 0.3px;
padding: 17px 30px 11px;
width: 100%;
}
.work-progress-table > .panel-heading > i {
color: #888888;
float: left;
font-family: Lato;
font-size: 11px;
font-style: normal;
letter-spacing: 0.3px;
line-height: 10px;
margin-bottom: 10px;
margin-top: 7px;
width: 100%;
}
.panel-default > .panel-heading > .dropdown {
float: right;
margin-top: -42px;
}
/* Work Progress table */
.panel.work-progress-table {
    border: medium none;
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
$(document).ready(function(){
$("#mytable #checkall").click(function () {
        if ($("#mytable #checkall").is(':checked')) {
            $("#mytable input[type=checkbox]").each(function () {
                $(this).prop("checked", true);
            });
        } else {
            $("#mytable input[type=checkbox]").each(function () {
                $(this).prop("checked", false);
            });
        }
    });
    
    $("[data-toggle=tooltip]").tooltip();
});
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"Table Dropdown ProgressBar"
Bootstrap 3.3.0 Snippet by mohsinirshad

Related: See More

Questions / Comments:

"Table Dropdown ProgressBar" Bootstrap 3.3.0 Snippet by mohsinirshad

Related: See More

Questions / Comments:

"Table Dropdown ProgressBar"
Bootstrap 3.3.0 Snippet by mohsinirshad