Bootstrap Snippet furniture-calc-wizard 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="//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.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="stepwizard">
    <div class="stepwizard-row setup-panel">
        <div class="stepwizard-step">
            <a href="#step-1" type="button" class="btn btn-primary btn-circle">1</a>
            <p>Rooms</p>
        </div>
        <div class="stepwizard-step">
            <a href="#step-2" type="button" class="btn btn-default btn-circle" disabled="disabled">2</a>
            <p>Under Floors</p>
        </div>
        <div class="stepwizard-step">
            <a href="#step-3" type="button" class="btn btn-default btn-circle" disabled="disabled">3</a>
            <p>Step 3</p>
        </div>
    </div>
</div>
<form role="form">
    <div class="row setup-content" id="step-1">
        <div class="col-xs-12">
            <div class="col-md-12">
                <h3> Step 1</h3>
                    <div class="col-md-8 column">
            <table class="table table-bordered table-hover" id="tab_logic">
                <thead>
                    <tr >
                        <th class="text-center">
                            #
                        </th>
                        <th class="text-center">
                            Area Name
                        </th>
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
body{ 
    margin-top:40px; 
}
.stepwizard-step p {
    margin-top: 10px;
}
.stepwizard-row {
    display: table-row;
}
.stepwizard {
    display: table;
    width: 100%;
    position: relative;
}
.stepwizard-step button[disabled] {
    opacity: 1 !important;
    filter: alpha(opacity=100) !important;
}
.stepwizard-row:before {
    top: 14px;
    bottom: 0;
    position: absolute;
    content: " ";
    width: 100%;
    height: 1px;
    background-color: #ccc;
    z-order: 0;
}
.stepwizard-step {
    display: table-cell;
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
$(document).ready(function () {
var i=1;
var gtw=0;
 $(document).on("click","button.del_row",function()
        {
       
        var rowId=$(this).parent().parent().attr("id");
        $("#"+rowId).remove();
        GrandTotal();
          
        });
     
       $(document).on("click","button.new_row",function()
        {
       
          GrandTotal();
          $('#addr'+i).append("<td>"+ (i+1) +"</td><td><input id='pn"+i+"' name='pn"+i+"'  type='text' placeholder='Product Name' class='form-control input-md'  /> </td>      <td><input id='pw"+i+"' value='0'  name='pw"+i+"' type='text' placeholder='Watt'  class='form-control input-md txt'></td><td><input id='pq"+i+"'  name='pq"+i+"' type='text' value='0' placeholder='Quantity'  class='form-control input-md txt'></td><td><input id='el"+i+"'  name='el"+i+"' value='0' type='text' readonly placeholder='Electricity Load'  class='form-control input-md'></td> <td><button id='btn"+i+"' class='btn btn-success new_row'>+</button></td>");
    
          $('#tab_logic').append('<tr id="addr'+(i+1)+'"></tr>');
          var rno=i-1;
          $('#btn'+rno).removeClass("new_row btn-success");
          $('#btn'+rno).addClass("del_row btn-danger");
          $('#btn'+rno).html("-");
          
          
          var pw=$('#pw'+rno).val();
          var pq=$('#pq'+rno).val();
          var tw=pw*pq;
          $('#el'+rno).val(tw);
          i++;
          
        });
        
     $("#btn_done").click(function(){
       GrandTotal();
     });
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"furniture-calc-wizard"
Bootstrap 3.1.0 Snippet by raiverma

Related: See More

Questions / Comments:

"furniture-calc-wizard" Bootstrap 3.1.0 Snippet by raiverma

Related: See More

Questions / Comments:

"furniture-calc-wizard"
Bootstrap 3.1.0 Snippet by raiverma