Bootstrap Lab

by TahmidTanzim

HTML

<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css">
<div class="navbar span12">
              <div class="navbar-inner">
<ul class="nav span12">
      <li style="width:12%"><a href="#">Item</a></li>
     <li style="width:28%"><a href="#">Description</a></li>
      <li style="width:12%"><a href="#">Quantity</a></li>
     <li style="width:13%"><a href="#">Price ($)</a></li>
      <li style="width:10%"><a href="#">Disc. (%)</a></li>    
    <li style="width:10%"><a href="#">Tax (%)</a></li>
      <li style="width:15%"><a href="#">Amount</a></li>
    </ul>
              </div>
            </div>

<div class="span12">
    <table class="table table-condensed">
        <thead>
            <tr>
                <th>Item</th>
                <th>Description</th>
                <th>Quantity</th>
                <th>Price ($)</th>
                <th>Discount (%)</th>
                <th>Tax (%)</th>
                <th>Amount ($)</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                            <td contenteditable="true"></td>
            <td contenteditable="true"></td>
            <td contenteditable="true"></td>
            <td contenteditable="true"></td>
                            <td contenteditable="true"></td>
            <td contenteditable="true"></td>
            <td contenteditable="true"></td>
     
            </tr>
            <tr>
                <td>
                    <input type="text" class="input-block" placeholder="Item">
                </td>
                <td>
                    <input type="text" class="input-small" placeholder="Description">
                </td>
                <td>
                    <input type="number" class="input-small" placeholder="Quantity">
                </td>
                <td>
                    <input type="number" class="input-small" placeholder="Price">
                </td>
                <td>
            ...

CSS

.table td  {
padding: 5px;
margin-top:10px;
text-align: left;
border-top: 0px;
    background:whitesmoke;
}

JavaScript

$(document).keydown(function(e){
    if (e.keyCode == 37) { 
       alert( "left pressed" );
       return false;
    } else if (e.keyCode == 38) { 
       alert( "up pressed" );
       return false;
    } else if (e.keyCode == 39) { 
       alert( "right pressed" );
       return false;
    } else if (e.keyCode == 40) { 
       alert( "left pressed" );
       return false;
    } else (e.keyCode == 37) { 
        alert( "key Code: "+e.keyCode );
       return false;
    }
        
});