<!DOCTYPE html>
<html>
<head>
<title></title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<script>
$(function () {
var dbtobj = [{
"text": "Option-A",
"value": "1"
}, {
"text": "Option-B",
"value": "2"
}, {
"text": "Option-C",
"value": "3"
}];
var dbtobject = [{
"text": "Debit-A",
"value": "1",
"type": "noneditable"
}, {
"text": "Debit-B",
"value": "2",
"type": "text"
}, {
"text": "Debit-C",
"value": "3",
"type": "noneditable"
}];
var crdobject = [{
"text": "Credit-A",
"value": "1",
"type": "combo"
}, {
"text": "Credit-B",
"value": "2",
"type": "noneditable"
}, {
"text": "Credit-C",
"value": "3",
"type": "text"
}];
var tablearraydata = [{
"Id": "01",
"AccType": "Debit-B",
"TaxType": "",
"Amount": "120",
"Dbt": "120",
"Crd": "",
"CCost": "",
"Emp": "emp",
"Remarks": "abc"
}, {
"Id": "02",
"AccType": "Credit-C",
"TaxType": "abc",
"Amount": "120",
"Dbt": "",
"Crd": "120",
"CCost": "cc",
"Emp": "emp",
"Remarks": "abc"
}];
//append the data to the table
for (var i = 0; i < 2; i++) {
// $("#arraytable tbody").append("<tr><td><select class='acctype' id='acc_type" + i + "'></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>");
}
//filling the debit combo
$(".acctype_Dbt").each(function () {
// var select = '';
for (index in dbtobject) {
$(this).append('<option value=' + dbtobject[index].value + ' type=' + dbtobject[index].type + '>' + dbtobject[index].text + '</option>');
// (select.options[select.options.length] = new Option(dbtobject[index].text, dbtobject[index].value)).setAttribute("type", dbtobject[index].type);
}
});
/*
//filling the debit combo
$(".acctype_Dbt").each(function () {
var select = document.getElementById("acc_Dbttype0");
for (index in dbtobject) {
(select.options[select.options.length] = new Option(dbtobject[index].text, dbtobject[index].value)).setAttribute("type", dbtobject[index].type);
}
});*/
//filling the credit combo
$(".acctype_Crd").each(function () {
var select = document.getElementById("acc_Crdtype");
for (index in crdobject) {
(select.options[select.options.length] = new Option(crdobject[index].text, crdobject[index].value)).setAttribute("type", crdobject[index].type);
}
});
//setting the arrary value to the combo on load
// for (var i = 0; i < myobject.length; i++) {
// $("#rec_mode" + i + " option[value='" + myobject[i].value + "']").attr("selected", "selected");
// }
//onload filling the second col based on Debit combo type
$(".acctype_Dbt").each(function (i) {
if ($('option:selected', this).attr('type') == 'noneditable') {
$(this).closest('tr').find('.dbt_second').html("");
//$(this).closest('tr').find('.dbt_third').html("<input id='text1' class='amt' type='text'/>");
$(this).closest('tr').find('.dbt_third').html("<a href='#'>link</a>");
}
//else if ($('option:selected', this).attr('type') == 'combo')
// $(this).closest('tr').find('.dbt_second').html("<select class='col2' id='col2_type'>");
else
$(this).closest('tr').find('.dbt_second').html("<input id='text1' class='amt' type='" + $('option:selected', this).attr('type') + "'/>");
});
//onload filling the second col based on Credit combo type
$(".acctype_Crd").each(function (i) {
if ($('option:selected', this).attr('type') == 'noneditable') {
$(this).closest('tr').find('.crd_second').html("");
$(this).closest('tr').find('.crd_third').html("<input id='text1' class='amt' type='text'/>");
} else if ($('option:selected', this).attr('type') == 'combo') {
$(this).closest('tr').find('.crd_second').html("<select class='col2' id='col2_type'>");
$(this).closest('tr').find('.crd_third').html("<input id='text1' class='amt' type='text'/>");
} else {
$(this).closest('tr').find('.crd_second').html("<input id='text1' class='amt' type='" + $('option:selected', this).attr('type') + "'/>");
$(this).closest('tr').find('.crd_third').html("<input id='text1' class='amt' type='text'/>");
}
});
//onchange filling the second col based on Debit combo type
OriginalContent = '';
$(".acctype_Dbt").live('change', function () {
// alert('hai');
// OriginalContent = $(this).closest('tr').find('.dbt_second').text();
if ($('option:selected', this).attr('type') == 'noneditable') {
//alert('fdfd');
$(this).closest('tr').find('.dbt_second').html("");
$(this).closest('tr').find('.dbt_third').html("<a href='#'>link</a>");
} else if ($('option:selected', this).attr('type') == 'combo') {
$(this).closest('tr').find('.dbt_second').html("<select class='col2' id='col2_type'>");
} else {
//alert('dfg');
$(this).closest('tr').find('.dbt_third').html("<input id='text1' class='amt' type='text'/>");
}
//$(this).closest('tr').find('.dbt_second').html("<input value='" + OriginalContent + "' type='" + $('option:selected', this).attr('type') + "'/>");
});
//onchange filling the second col based on credit combo type
OriginalContent = '';
$(".acctype_Crd").change(function () {
// OriginalContent = $(this).closest('tr').find('.dbt_second').text();
if ($('option:selected', this).attr('type') == 'noneditable')
$(this).closest('tr').find('.crd_second').html("");
else if ($('option:selected', this).attr('type') == 'combo') {
$(this).closest('tr').find('.crd_second').html("<select class='col2' id='col2_type'>");
//filling the col2 combo
$(".col2").each(function () {
var select = document.getElementById("col2_type");
for (index in dbtobj) {
(select.options[select.options.length] = new Option(dbtobj[index].text, dbtobj[index].value));
}
});
} else
$(this).closest('tr').find('.crd_second').html("<input value='" + OriginalContent + "' type='" + $('option:selected', this).attr('type') + "'/>");
});
//filling the col2 combo
$(".col2").each(function () {
var select = document.getElementById("col2_type");
for (index in dbtobj) {
(select.options[select.options.length] = new Option(dbtobj[index].text, dbtobj[index].value));
}
});
var amount = 0;
$('tr td').live('keydown', function (e) {
//alert($(this).hasClass('last'));
if ($(this).find('input').hasClass('amt'))
amount = $(this).find('input').val();
if (e.keyCode === 9 && $(this).find('input').hasClass('last') && amount > 0 && !e.shiftKey) {
var html = '<tr>';
//alert($(this).parent().next().children().find('amt').val());
alert($(this).parent().next().children().find('select').attr('id'));
/*$(this).parent().children().each(function () {
if($(this).hasClass('dbt_four')){
html +='debit';
}else if($(this).hasClass('crd_four')){
html +='Credit';
}else{
html +=$(this).html();
}
});*/
html += $(this).parent().html();
html += '</tr>';
$(this).parent().after(html);
$(this).parent().next().find('.dbt_third').html('<a href="#">Link</a>');
$(this).parent().next().find('.dbt_four').html('Debit');
}
});
/* var count=0;
$('tr td').live('keydown',function(e) {
if (e.keyCode === 9 && $(this).find('input').hasClass('dbtlast') ) {
alert(++count);
$curRow = $(this).closest('tbody tr');
//$newRow = $curRow.clone();
$curRow.after('<tr><td><select class="acctype_Dbt" id="acc_Dbttype'+count+'"></td><td class="dbt_second"></td><td class="dbt_third"></td><td class="dbt_four">Debit</td><td></td><td><a href="#">cc</a></td><td><a href="#">emp</a></td><td><input class="dbtlast" type="text"/></td></tr>');
$(".acctype_Dbt").each(function () {
var select = document.getElementById("acc_Dbttype"+count);
for (index in dbtobject) {
(select.options[select.options.length] = new Option(dbtobject[index].text, dbtobject[index].value)).setAttribute("type", dbtobject[index].type);
}
});
}
});
$('tr td').live('keydown', function (e) {
if (e.keyCode === 9 && $(this).find('input').hasClass('crdlast')) {
$curRow = $(this).closest('tbody tr');
$newRow = $curRow.clone();
$curRow.after($newRow);
}
});*/
//alert($('option:selected', $(".acctype_Dbt")).attr('type'));
//to get the total of debit col
$(".dbt_third").live('change', function () {
$(this).parent().find('.dbt_four').html($(this).find('input').val());
totdbt = 0;
$(".dbt_four").each(function(){
if (parseInt($(this).text()) > 0) {
totdbt += parseInt($(this).text());
}
});
$('.totdbt').html(totdbt);
});
//to get the total of credit col
$(".crd_third").live('change', function () {
$(this).parent().find('.crd_four').html($(this).find('input').val());
totcrd = 0;
$(".crd_four").each(function(){
if (parseInt($(this).text()) > 0) {
totcrd += parseInt($(this).text());
}
});
$('.totcrd').html(totcrd);
});
tot = 0;
$('.amt').each(function () {
if ($(this).val() > 0) {
tot += parseInt($(this).val());
}
});
//alert(tot);
$('.totamt').html(tot);
$('.amt').live('change', function () {
$(this).each(function () {
if ($(this).val() > 0) {
tot += parseInt($(this).val());
}
});
//alert($(".dbt_third").parent().find('.dbt_four').text());
//alert(tot);
$('.totamt').text(tot);
});
});
</script>
<body>
<table border="1" id="arraytable">
<thead>
<th>Account Type</th>
<th>Tax Type</th>
<th>Amount</th>
<th>Debit</th>
<th>Credit</th>
<th>CostCenter</th>
<th>Employee</th>
<th>Remarks</th>
</thead>
<tbody>
<tr>
<td>
<select class="acctype_Dbt" id="acc_Dbttype0">
</td>
<td class="dbt_second"></td>
<td class="dbt_third"></td>
<td class="dbt_four">Debit</td>
<td></td>
<td><a href="#">cc</a>
</td>
<td><a href="#">emp</a>
</td>
<td>
<input class="last" type="text" />
</td>
</tr>
<tr>
<td>
<select class="acctype_Crd" id="acc_Crdtype">
</td>
<td class="crd_second"></td>
<td class="crd_third"></td>
<td></td>
<td class="crd_four">Credit</td>
<td><a href="#">cc</a>
</td>
<td><a href="#">emp</a>
</td>
<td>
<input class="last" type="text" />
</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>Other Payables A/c</td>
<td></td>
<td class="totamt">
</td>
<td>
</td>
<td class="totcrd"></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td>
Total
</td>
<td class="totdbt">
</td>
<td class="totcrd"></td>
<td></td>
<td></td>
<td></td>
</tr>
</tfoot>
</table>
</body>
</html>
<html>
<head>
<title></title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<script>
$(function () {
var dbtobj = [{
"text": "Option-A",
"value": "1"
}, {
"text": "Option-B",
"value": "2"
}, {
"text": "Option-C",
"value": "3"
}];
var dbtobject = [{
"text": "Debit-A",
"value": "1",
"type": "noneditable"
}, {
"text": "Debit-B",
"value": "2",
"type": "text"
}, {
"text": "Debit-C",
"value": "3",
"type": "noneditable"
}];
var crdobject = [{
"text": "Credit-A",
"value": "1",
"type": "combo"
}, {
"text": "Credit-B",
"value": "2",
"type": "noneditable"
}, {
"text": "Credit-C",
"value": "3",
"type": "text"
}];
var tablearraydata = [{
"Id": "01",
"AccType": "Debit-B",
"TaxType": "",
"Amount": "120",
"Dbt": "120",
"Crd": "",
"CCost": "",
"Emp": "emp",
"Remarks": "abc"
}, {
"Id": "02",
"AccType": "Credit-C",
"TaxType": "abc",
"Amount": "120",
"Dbt": "",
"Crd": "120",
"CCost": "cc",
"Emp": "emp",
"Remarks": "abc"
}];
//append the data to the table
for (var i = 0; i < 2; i++) {
// $("#arraytable tbody").append("<tr><td><select class='acctype' id='acc_type" + i + "'></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>");
}
//filling the debit combo
$(".acctype_Dbt").each(function () {
// var select = '';
for (index in dbtobject) {
$(this).append('<option value=' + dbtobject[index].value + ' type=' + dbtobject[index].type + '>' + dbtobject[index].text + '</option>');
// (select.options[select.options.length] = new Option(dbtobject[index].text, dbtobject[index].value)).setAttribute("type", dbtobject[index].type);
}
});
/*
//filling the debit combo
$(".acctype_Dbt").each(function () {
var select = document.getElementById("acc_Dbttype0");
for (index in dbtobject) {
(select.options[select.options.length] = new Option(dbtobject[index].text, dbtobject[index].value)).setAttribute("type", dbtobject[index].type);
}
});*/
//filling the credit combo
$(".acctype_Crd").each(function () {
var select = document.getElementById("acc_Crdtype");
for (index in crdobject) {
(select.options[select.options.length] = new Option(crdobject[index].text, crdobject[index].value)).setAttribute("type", crdobject[index].type);
}
});
//setting the arrary value to the combo on load
// for (var i = 0; i < myobject.length; i++) {
// $("#rec_mode" + i + " option[value='" + myobject[i].value + "']").attr("selected", "selected");
// }
//onload filling the second col based on Debit combo type
$(".acctype_Dbt").each(function (i) {
if ($('option:selected', this).attr('type') == 'noneditable') {
$(this).closest('tr').find('.dbt_second').html("");
//$(this).closest('tr').find('.dbt_third').html("<input id='text1' class='amt' type='text'/>");
$(this).closest('tr').find('.dbt_third').html("<a href='#'>link</a>");
}
//else if ($('option:selected', this).attr('type') == 'combo')
// $(this).closest('tr').find('.dbt_second').html("<select class='col2' id='col2_type'>");
else
$(this).closest('tr').find('.dbt_second').html("<input id='text1' class='amt' type='" + $('option:selected', this).attr('type') + "'/>");
});
//onload filling the second col based on Credit combo type
$(".acctype_Crd").each(function (i) {
if ($('option:selected', this).attr('type') == 'noneditable') {
$(this).closest('tr').find('.crd_second').html("");
$(this).closest('tr').find('.crd_third').html("<input id='text1' class='amt' type='text'/>");
} else if ($('option:selected', this).attr('type') == 'combo') {
$(this).closest('tr').find('.crd_second').html("<select class='col2' id='col2_type'>");
$(this).closest('tr').find('.crd_third').html("<input id='text1' class='amt' type='text'/>");
} else {
$(this).closest('tr').find('.crd_second').html("<input id='text1' class='amt' type='" + $('option:selected', this).attr('type') + "'/>");
$(this).closest('tr').find('.crd_third').html("<input id='text1' class='amt' type='text'/>");
}
});
//onchange filling the second col based on Debit combo type
OriginalContent = '';
$(".acctype_Dbt").live('change', function () {
// alert('hai');
// OriginalContent = $(this).closest('tr').find('.dbt_second').text();
if ($('option:selected', this).attr('type') == 'noneditable') {
//alert('fdfd');
$(this).closest('tr').find('.dbt_second').html("");
$(this).closest('tr').find('.dbt_third').html("<a href='#'>link</a>");
} else if ($('option:selected', this).attr('type') == 'combo') {
$(this).closest('tr').find('.dbt_second').html("<select class='col2' id='col2_type'>");
} else {
//alert('dfg');
$(this).closest('tr').find('.dbt_third').html("<input id='text1' class='amt' type='text'/>");
}
//$(this).closest('tr').find('.dbt_second').html("<input value='" + OriginalContent + "' type='" + $('option:selected', this).attr('type') + "'/>");
});
//onchange filling the second col based on credit combo type
OriginalContent = '';
$(".acctype_Crd").change(function () {
// OriginalContent = $(this).closest('tr').find('.dbt_second').text();
if ($('option:selected', this).attr('type') == 'noneditable')
$(this).closest('tr').find('.crd_second').html("");
else if ($('option:selected', this).attr('type') == 'combo') {
$(this).closest('tr').find('.crd_second').html("<select class='col2' id='col2_type'>");
//filling the col2 combo
$(".col2").each(function () {
var select = document.getElementById("col2_type");
for (index in dbtobj) {
(select.options[select.options.length] = new Option(dbtobj[index].text, dbtobj[index].value));
}
});
} else
$(this).closest('tr').find('.crd_second').html("<input value='" + OriginalContent + "' type='" + $('option:selected', this).attr('type') + "'/>");
});
//filling the col2 combo
$(".col2").each(function () {
var select = document.getElementById("col2_type");
for (index in dbtobj) {
(select.options[select.options.length] = new Option(dbtobj[index].text, dbtobj[index].value));
}
});
var amount = 0;
$('tr td').live('keydown', function (e) {
//alert($(this).hasClass('last'));
if ($(this).find('input').hasClass('amt'))
amount = $(this).find('input').val();
if (e.keyCode === 9 && $(this).find('input').hasClass('last') && amount > 0 && !e.shiftKey) {
var html = '<tr>';
//alert($(this).parent().next().children().find('amt').val());
alert($(this).parent().next().children().find('select').attr('id'));
/*$(this).parent().children().each(function () {
if($(this).hasClass('dbt_four')){
html +='debit';
}else if($(this).hasClass('crd_four')){
html +='Credit';
}else{
html +=$(this).html();
}
});*/
html += $(this).parent().html();
html += '</tr>';
$(this).parent().after(html);
$(this).parent().next().find('.dbt_third').html('<a href="#">Link</a>');
$(this).parent().next().find('.dbt_four').html('Debit');
}
});
/* var count=0;
$('tr td').live('keydown',function(e) {
if (e.keyCode === 9 && $(this).find('input').hasClass('dbtlast') ) {
alert(++count);
$curRow = $(this).closest('tbody tr');
//$newRow = $curRow.clone();
$curRow.after('<tr><td><select class="acctype_Dbt" id="acc_Dbttype'+count+'"></td><td class="dbt_second"></td><td class="dbt_third"></td><td class="dbt_four">Debit</td><td></td><td><a href="#">cc</a></td><td><a href="#">emp</a></td><td><input class="dbtlast" type="text"/></td></tr>');
$(".acctype_Dbt").each(function () {
var select = document.getElementById("acc_Dbttype"+count);
for (index in dbtobject) {
(select.options[select.options.length] = new Option(dbtobject[index].text, dbtobject[index].value)).setAttribute("type", dbtobject[index].type);
}
});
}
});
$('tr td').live('keydown', function (e) {
if (e.keyCode === 9 && $(this).find('input').hasClass('crdlast')) {
$curRow = $(this).closest('tbody tr');
$newRow = $curRow.clone();
$curRow.after($newRow);
}
});*/
//alert($('option:selected', $(".acctype_Dbt")).attr('type'));
//to get the total of debit col
$(".dbt_third").live('change', function () {
$(this).parent().find('.dbt_four').html($(this).find('input').val());
totdbt = 0;
$(".dbt_four").each(function(){
if (parseInt($(this).text()) > 0) {
totdbt += parseInt($(this).text());
}
});
$('.totdbt').html(totdbt);
});
//to get the total of credit col
$(".crd_third").live('change', function () {
$(this).parent().find('.crd_four').html($(this).find('input').val());
totcrd = 0;
$(".crd_four").each(function(){
if (parseInt($(this).text()) > 0) {
totcrd += parseInt($(this).text());
}
});
$('.totcrd').html(totcrd);
});
tot = 0;
$('.amt').each(function () {
if ($(this).val() > 0) {
tot += parseInt($(this).val());
}
});
//alert(tot);
$('.totamt').html(tot);
$('.amt').live('change', function () {
$(this).each(function () {
if ($(this).val() > 0) {
tot += parseInt($(this).val());
}
});
//alert($(".dbt_third").parent().find('.dbt_four').text());
//alert(tot);
$('.totamt').text(tot);
});
});
</script>
<body>
<table border="1" id="arraytable">
<thead>
<th>Account Type</th>
<th>Tax Type</th>
<th>Amount</th>
<th>Debit</th>
<th>Credit</th>
<th>CostCenter</th>
<th>Employee</th>
<th>Remarks</th>
</thead>
<tbody>
<tr>
<td>
<select class="acctype_Dbt" id="acc_Dbttype0">
</td>
<td class="dbt_second"></td>
<td class="dbt_third"></td>
<td class="dbt_four">Debit</td>
<td></td>
<td><a href="#">cc</a>
</td>
<td><a href="#">emp</a>
</td>
<td>
<input class="last" type="text" />
</td>
</tr>
<tr>
<td>
<select class="acctype_Crd" id="acc_Crdtype">
</td>
<td class="crd_second"></td>
<td class="crd_third"></td>
<td></td>
<td class="crd_four">Credit</td>
<td><a href="#">cc</a>
</td>
<td><a href="#">emp</a>
</td>
<td>
<input class="last" type="text" />
</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>Other Payables A/c</td>
<td></td>
<td class="totamt">
</td>
<td>
</td>
<td class="totcrd"></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td>
Total
</td>
<td class="totdbt">
</td>
<td class="totcrd"></td>
<td></td>
<td></td>
<td></td>
</tr>
</tfoot>
</table>
</body>
</html>
