JSFiddle - React, Tailwind, and code Playground

by Anjana m

HTML

<button id="getdata">Get Data</button>
<button id="addrow">Add Row</button>
<button id="removerow">Remove Row</button>
<button id="savetabledata">Save Table Data</button>
<input type="hidden" id="myhideenfield">
<div>
<div id="showedit" class="CSSTableGenerator" >
<table id="xyz" border=1 class=paginated>
<tr>
<th>header1</th>
<th>header2</th>
<th>header3</th>
<th>header4</th>
<th>header5</th>
<th>header6</th>
</tr>
<tr class=parent id=parent-0>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
  <td> <span class="btn">
                        <a data-id="0" href="#">Edit</a>  
                    </span>
            </td>
</tr>
<tr  class=child id=child-0  >
<td><input type="checkbox" id=00></td>
<td><select id=01><option value=1 class='select-style'>1</option><option value =2>2</option><option value =3>3</option></select></td>
<td><select id=02><option value =1>1</option><option value =2>2</option><option value =3>3</option></select></td>
<td><select id=03><option value =1>1</option><option value =2>2</option><option value =3>3</option></select></td>
<td><select id=04><option value =1>1</option><option value =2>2</option><option value =3>3</option></select></td>
<td><select id=05><option value =1>1</option><option value =2>2</option><option value =3>3</option></select></td>
</tr>
<tr class=parent id=parent-1>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
  <td> <span class="btn">
                        <a data-id="1" href="#">Edit</a>  
                    </span>
            </td>
</tr>
<tr class=child id=child-1>
<td><input type="checkbox" id=10></td>
<td><select id=11><option value ="1">eeeeeeeeee</option><option value ="2">gggggggggggg</option><option="3">hhhhhhhhhhhhh</option></select></td>
<td><select id=12><option value =1>hhhhhhhhhhhhhhhh</option><option value =2>rrrrrrrrrrrrr</option><option=3>3</option></select></td>
<td><select id=13><option value =1>1</option><option value...

CSS

table {
    width: 40em;
    margin: 2em auto;
}

thead {
    background: #000;
    color: #fff;
}

td {
    width: 10em;
    padding: 0.3em;
}

tbody {
    background: #ccc;
}

div.pager {
    text-align: center;
    margin: 1em 0;
}

div.pager span {
    display: inline-block;
    width: 1.8em;
    height: 1.8em;
    line-height: 1.8;
    text-align: center;
    cursor: pointer;
    background: #000;
    color: #fff;
    margin-right: 0.5em;
}

div.pager span.active {
    background: #c00;
}
.child{
font-size:15px;
    font-family:Lucida;
    border: 1px solid #ccc;
    width: 120px;
    border-radius: 3px;
    overflow: hidden;
    background: #fffccc;
}

.child select {
font-size:15px;
    font-family:Lucida;
    padding: 5px 8px;
    width: 130%;
    border: 1px solid #ccc;
    box-shadow: none;
    background: #F4A460;

    -webkit-appearance: none;
}

.child select:focus {
font-size:15px;
    font-family:Lucida;
    outline: none;
}

JavaScript

$(document).ready(function(){
 var mytable = $("#xyz");

	$('table.paginated').each(function() {
    var currentPage = 0;
    var numPerPage = 10;
    var $table = $(this);
    $table.bind('repaginate', function() {
        $table.find('tbody tr').hide().slice(currentPage * numPerPage, (currentPage + 1) * numPerPage).show();
    });
    $table.trigger('repaginate');
    var numRows = $table.find('tbody tr').length;
    var numPages = Math.ceil(numRows / numPerPage);
    var $pager = $('<div class="pager"></div>');
    for (var page = 0; page < numPages; page++) {
        $('<span class="page-number"></span>').text(page + 1).bind('click', {
            newPage: page
        }, function(event) {
            currentPage = event.data['newPage'];
            $table.trigger('repaginate');
            $(this).addClass('active').siblings().removeClass('active');
        }).appendTo($pager).addClass('clickable');
    }
    $pager.insertAfter($table).find('span.page-number:first').addClass('active');
});		  
			  
	$("#addrow").click(function(){
	 var cnt=$('#xyz tr').size()-3;
	 var parenttrString='<tr class=parent id=parent-'+cnt+' ><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td> <span class="btn"> <a data-id='+cnt+' href="#">Edit</a></span></td></tr>';
	 var childString='<tr class=child id=child-'+cnt+' ><td><input type="checkbox" id='+cnt+'0></td>'+
'<td><select id='+cnt+'1><option value =1>1</option><option value =2>2</option><option value =3>3</option></select></td>'+
'<td><select id='+cnt+'2><option value =1>1</option><option value =2>2</option><option value =3>3</option></select></td>'+
'<td><select id='+cnt+'3><option value =1>1</option><option value =2>2</option><option value =3>3</option></select></td>'+
'<td><select id='+cnt+'4><option value =1>1</option><option value =2>2</option><option value =3>3</option></select></td>'+
'<td><select id='+cnt+'5><option value =1>1</option><option value =2>2</option><option value...