JSFiddle - React, Tailwind, and code Playground

by pixelfx

HTML

<script src="http://jqueryjs.googlecode.com/files/jquery-1.2.1.min.js"></script>
<table width="100%" border="0" cellpadding="0" cellspacing="0" class="detail" id="orderitem"  >
  <thead>
        <tr>
            <th class="spec">Customer Item</th>
            <th  >&nbsp;</th>
            <th rowspan="2">Variable Header <br />Data Field</th>
            <th  rowspan="2">PO Number</th>
            <th  rowspan="2">&nbsp;</th>
            <th  rowspan="2">Available <br>
              Quantity</th>
            <th colspan="2" rowspan="2">Quantity <br>
              to Order<br>
              <span class="toorder"><input type="text" size="6" class="txtwidth"> <input type="button" value="Apply" class="btnwidth"> <input type="button" value="Clear" class="btnwidth"></span></th>
            <th  rowspan="2">Variable <br />Data Field</th>
            <th  rowspan="2">Variable <br />Data Field</th>
            <th  rowspan="2" class="rbrd">Variable <br />Data Field</th>
        </tr>
        <tr>
            <th class="spec">Fulfillment type</th>
            <th><select name="fulfillmenttype" id="fulfillmenttype">
                <option selected="selected">In-Plant</option>
                <option>Service Bureau</option>
                </select></th>
        </tr>
  </thead>
  <tbody>
        <tr id="row123" class="parent" style="cursor: pointer;" title="Click to expand/collapse">
            <td class="brdr">Req. type</td>
            <td  class="brdr"><input name="checkbox4" type="checkbox" id="checkbox4" checked="checked" /></td>
            <td class="brdr">J94</td>
            <td>123456</td>
            <td class="spec"><img src="http://t3.gstatic.com/images?q=tbn:4TZreCjs_a1eDM:http://www.venice.coe.int/images/plus.png" width="16" height="16" class="add" ><img src="http://t1.gstatic.com/images?q=tbn:1PS9x2Ho4LHpaM:http://www.unesco.org/ulis/imag/minus.png" width="16" height="16" class="minus" style="display:none;"></td>
            <td class="spec">200</td>
      ...

CSS

table.detail, table.detail td, table.detail th {
    border-collapse:collapse;
    border:1px solid black;
}
table.detail tr.parent {
    font-weight:bold;
}

JavaScript

$(function() {
    $('tr.parent')
        .css("cursor","pointer")
        .attr("title","Click to expand/collapse")
        .click(function(){
            $(this).siblings('.child-'+this.id).toggle();
            $('.minus').show();
            $('.add').hide();
 
        });
    $('tr[@class^=child-]').hide().children('td');
 
});