JSFiddle - React, Tailwind, and code Playground

by sandeepan_nits

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="example" style="border:none;">
    <thead>
        <tr>
            <th width="10%">Customer Item</th>
            <th colspan="2">&nbsp;</th>
            <th width="12%" rowspan="2">Variable Header Data Field</th>
            <th width="8%" rowspan="2">PO Number</th>
            <th width="2%" rowspan="2">&nbsp;</th>
            <th width="10%" rowspan="2">Available Quantity</th>
            <th colspan="2" rowspan="2">Quantity to Order</th>
            <th width="10%" rowspan="2">Variable Data Field</th>
            <th width="10%" rowspan="2">Variable Data Field</th>
            <th width="10%" rowspan="2">Variable Data Field</th>
        </tr>
        <tr>
            <th>Fulfillment type</th>
            <th colspan="2"><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>Request type</td>
            <td colspan="2"><input name="checkbox4" type="checkbox" id="checkbox4" checked="checked" /></td>
            <td>J94</td>
            <td>123456</td>
            <td>&nbsp;</td>
            <td>200</td>
            <td width="7%">180</td>
            <td width="5%">198</td>
            <td><input name="textfield" type="text" id="textfield" value="11111" /></td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
        </tr>
        <tr class="child-row123" style="display: none;">
            <td class="brdr">&nbsp;&nbsp;</td>
            <td width="6%" class="brdr">&nbsp;</td>
            <td width="10%" class="brdr">&nbsp;</td>
            <td class="brdr">&nbsp;</td>
            <td><input type="checkbox"...

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();
        });
    $('tr[@class^=child-]').hide().children('td');
});

$(document).ready(function() {
  var orderTable = $("#example");
  $("#btnAdd").click(function() {
   //Take the text, and also the ddl value and insert as table row.
   var newRow = $("<tr  class=child-row123><td  class=brdr>&nbsp;&nbsp;</td><td  class=brdr></td><td  class=brdr>&nbsp;&nbsp;</td><td  class=brdr>&nbsp;&nbsp;</td><td><input  name=checkbox4 type=checkbox id=checkbox4  /></td><td>&nbsp;&nbsp;</td><td>&nbsp;&nbsp;</td><td>&nbsp;&nbsp;</td><td>&nbsp;&nbsp;</td><td>&nbsp;&nbsp;</td><td>&nbsp;&nbsp;</td><td>&nbsp;&nbsp;</td></tr>");
   $("#example").append(newRow);
   var $orderTable = $("#example");

  });
});