JSFiddle - React, Tailwind, and code Playground

by tutorialdrive

HTML

<table width="100%" border="0" cellspacing="0" cellpadding="0" class="tablestyle" style="overflow-x: scroll; ">
                <tr>
                  <td class="tableviewtop"><input name="" type="checkbox" value=""></td>
                  <td class="tableviewtop textaligncenter">Material Name</td>
                  <td class="tableviewtop textaligncenter"></td>
                  <td class="tableviewtop textaligncenter">Color</td>
                  <td class="tableviewtop textaligncenter">Base Price</td>
                  <td class="tableviewtop textaligncenter">MSRP</td>
                  <td class="tableviewtop textaligncenter">MAP</td>
                  <td class="tableviewtop textaligncenter">Net Price</td>
                  <td class="tableviewtop textaligncenter">Units Ord.</td>
                  <td class="tableviewtop textaligncenter">Total Base Price</td>
                  <td class="tableviewtop textaligncenter">Total Net Price</td>
                  <td class="tableviewtop textaligncenter">Dis %</td>
                </tr>
                <tr>
                  <td><input name="" type="checkbox" value=""></td>
                  <td class="textaligncenter">Demo Name</td>
                  <td class="textaligncenter"><a href="#"></a></td>
                  <td class="textaligncenter"><img src = "http://www.iconfinder.com/icons/14227/download/png/16" style = "padding-left:3px;" id = "tda"/></td>
                  <td class="textaligncenter">$55.00</td>
                  <td class="textaligncenter">$110.00</td>
                  <td class="textaligncenter">$110.00</td>
                  <td class="textaligncenter">$110.00</td>
                  <td class="textaligncenter">140</td>
                  <td class="textaligncenter">$4815.00</td>
                  <td class="textaligncenter">$3284.00</td>
                  <td class="textaligncenter">10%</td>
                </tr>

				<!-- Expander Data Start -->
				
                <tr style = "display:none;"...

JavaScript

// Table jquery code start

	$("#tda").click(function () {
		$("#tra1").slideToggle("slow");
		$("#tra2").slideToggle("slow");
	});
	$("#tdb").click(function () {
		$("#trb1").slideToggle("slow");
		$("#trb2").slideToggle("slow");
	});
	$("#tdc").click(function () {
		$("#trc1").slideToggle("slow");
		$("#trc2").slideToggle("slow");
	});
	$("#tdd").click(function () {
		$("#trd1").slideToggle("slow");
		$("#trd2").slideToggle("slow");
	});
	$("#tde").click(function () {
		$("#tre1").slideToggle("slow");
		$("#tre2").slideToggle("slow");
	});
	$("#tdf").click(function () {
		$("#trf1").slideToggle("slow");
		$("#trf2").slideToggle("slow");
	});
	$("#tdg").click(function () {
		$("#trg1").slideToggle("slow");
		$("#trg2").slideToggle("slow");
	});
	$("#tdh").click(function () {
		$("#trh1").slideToggle("slow");
		$("#trh2").slideToggle("slow");
	});
	$("#tdi").click(function () {
		$("#tri1").slideToggle("slow");
		$("#tri2").slideToggle("slow");
	});

	// Table jquery code end