$(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 =3>3</option></select></td>'+
'</tr>';
$('#xyz tr').last().after(parenttrString+childString);
$("#child-" + cnt).hide();
$('#xyz tr.parent td')
.on("click", "span.btn a", function () {
var id = $(this).data('id');
console.log(id);
alert(id);
$("#parent-" + id).hide();
$("#child-" + id).show();
});
});
$("#removerow").click(function(){
if($('#xyz tr').size()>1){
$('#xyz tr:last-child').remove();
}else{
alert('One row should be present in table');
}
});
$("#getdata").click(function(){
mytable.find('tr').each(function (i) {
var $tds = $(this).find('td'),
col1 = $('#'+i+'0').val(),
col2 = $('#'+i+'1').val(),
col3 = $('#'+i+'2').val(),
col4 = $('#'+i+'3').val(),
col5 = $('#'+i+'4').val(),
col6 = $('#'+i+'5').val();
// do something with productId, product, Quantity
alert('Row ' + (i) + ':\col1: ' + col1
+ '\n col2: ' + col2
+ '\n col3: ' + col3
+ '\n col4: ' + col4
+ '\n col5: ' + col5
+ '\n col6: ' + col6);
});
});
$("#savetabledata").click(function(){
var lstring=';';
mytable.find('tr.child').each(function (i) {
if($('#child-'+ i).is(":visible")){
var $tds = $(this).find('td'),
col1 = $('#'+i+'0').val(),
col2 = $('#'+i+'1 option:selected').text(),
col3 = $('#'+i+'2 option:selected').text(),
col4 = $('#'+i+'3 option:selected').text(),
col5 = $('#'+i+'4 option:selected').text(),
col6 = $('#'+i+'5 option:selected').text();
lstring=lstring+col1+','+col2+','+col3+','+col4+','+col5+','+col6+';';
}
});
$("#myhideenfield").val(lstring);
alert(lstring);
});
var cnt=$('#xyz tr').length;
$('td', 'table').each(function(cnt) {
$("#child-" + cnt).hide();
});
$('#xyz tr.parent td')
.on("click", "span.btn a", function () {
var id = $(this).data('id');
console.log(id);
alert(id);
$("#parent-" + id).hide();
$("#child-" + id).show();
});
});
<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 =2>2</option><option=3>3</option></select></td>
<td><select id=14><option value =1>1</option><option value =2>2</option><option=3>3</option></select></td>
<td><select id=15><option value =1>1</option><option value =2>2</option><option=3>3</option></select></td>
</tr>
</table>
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;
}