Parts PIcker

by Azhar Kanorwala

HTML

<link rel="stylesheet" href="https://rawgit.com/wenzhixin/bootstrap-table/master/src/bootstrap-table.css">
<script src="https://rawgit.com/wenzhixin/bootstrap-table/master/src/bootstrap-table.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootbox.js/4.4.0/bootbox.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<div class="container">
  <br>
  <div class="row">
    <div class="col-md-12 col-sm-12">
      <div class="page-header">
        <h2 class="header" style="text-align: center">Parts Picker</h2>
      </div>
    </div>
  </div>
  <ul class="nav nav-pills nav-justified" role="tablist" id="tabs">
    <li role="presentation" class="active" id="mb"><a href="#table_mb" data-toggle="tab" aria-controls="table_mb" role="tab">Motherboards</a></li>
    <li role="presentation" id="pr"><a href="#table_pr" data-toggle="tab" aria-controls="table_pr" role="tab">Processors</a></li>
    <li role="presentation" id="rm"><a href="#table_rm" data-toggle="tab" aria-controls="table_rm" role="tab">Ram</a></li>
    <li role="presentation" id="mr"><a href="#table_mr" data-toggle="tab" aria-controls="table_mr" role="tab">Monitor</a></li>
    <li role="presentation" id="hd"><a href="#table_hd" data-toggle="tab" aria-controls="table_hd" role="tab">Hard Disk</a></li>
  </ul>
  <div class="tab-content">
    <div class="tab-pane active" id="table_mb" role="tabpanel">
      <table class="table" id="table" data-toggle="table">
        <thead>
          <tr>
            <th data-field="name">Serial NO</th>
            <th data-field="model">Model NO</th>
            <th data-field="price">Price</th>
          </tr>
        </thead>
        <tr>
          <td>1</td>
          <td>Asus Rampage X99</td>
          <td>5000</td>
        </tr>
        <tr>
          <td>2</td>
          <td>MSI Z170A</td>
         ...

CSS

body {
      font-family: 'Play', sans-serif;
      /* background-image: url(/images/default.jpg);*/
      background-position: right;
      /*background: #1976D2;*/
    }
    
    .header {
      font-family: 'Play', sans-serif;
    }
    
    td {
      border: 1px #DDD solid;
      padding: 5px;
      cursor: pointer;
    }
    
    .selected {
      background-color: #2196F3;
      color: #FFF;
    }
    
    .demo {
      display: none;
    }
    
    .table_mb {
      display: inline-block;
    }
    
    .tab-content {
      width: auto;
    }

JavaScript

var $table = $('#table');
$(function() {
  $table.on('click-row.bs.table', function(e, row, $element) {
    $('.success').removeClass('success');
    $($element).addClass('success');
  });
  $('#button').click(function() {
    // bootbox.alert(' The Selected model is: ' + Submit().model);
    bootbox.confirm(' Are You Sure?<br>The Selected model is: ' + Submit().model, function(result) { /* your callback code */
      if (result) {
        console.log("User confirmed dialog");
      } else {
        console.log("User declined dialog");
      }
    });

  })
});

function Submit() {
  var index = $table.find('tr.success').data('index');
  return $table.bootstrapTable('getData')[index];
}
$(document).ready(function() {

  $('#mytabcontent a').click(function(e) {
    e.preventDefault()
    $(this).tab('show')

  });

});