Backend C# side

string Info = "";

if (ds.Tables[1] != null)
{
	for (int i = 0; i < ds.Tables[1].Rows.Count; i++)
	{
		if (Info == "")
		{
		}
		else
		{
		Info = Info + ",";
		}

		Info = Info + String.Format("{{\"id\": \"{0}\", \"type\": \"{1}\", \"Bal\": \"{2}\"}}",
		ds.Tables[1].Rows[i]["id"].ToString(),
		ds.Tables[1].Rows[i]["type"].ToString(),
		ds.Tables[1].Rows[i]["Bal"].ToString()
		);
	}
}

Response.Write(String.Format("{{\"username\":\"{0}\", \"credit\":\"{1}\", \"balance\":\"{2}\", \"sumtrans\":\"{3}\", \"newbalance\":\"{4}\", \"sb\":\"{5}\", \"ST\":\"{6}\", \"other\":\"{7}\", \"transfer\":\"{8}\", \"Info\": [{9}]}}",
	ds.Tables[0].Rows[0]["Username"].ToString(),
	ds.Tables[0].Rows[0]["Credit"].ToString(),
	ds.Tables[0].Rows[0]["Balance"].ToString(),
	ds.Tables[0].Rows[0]["Sumtrans"].ToString(),
	ds.Tables[0].Rows[0]["NewBalance"].ToString(),
	ds.Tables[0].Rows[0]["SB"].ToString(),
	ds.Tables[0].Rows[0]["ST"].ToString(),
	ds.Tables[0].Rows[0]["Other"].ToString(),
	ds.Tables[0].Rows[0]["Transfer"].ToString(),
	Info
));

Frontend HTML

<table style="width: 50%; text-align: center;" border="1">
	<tbody>
		<tr>
			<th>Username</th>
			<th>Credit</th>
			<th>Balance</th>
			<th>Sumtrans</th>
			<th>NewBalance</th>
			<th>SB</th>
			<th>ST</th>
			<th>Other</th>
			<th>Transfer</th>
		</tr>
		<tr>
			<td id="username">N/A</td>
			<td id="credit"></td>
			<td id="balance"></td>
			<td id="sumtrans"></td>
			<td id="newbalance"></td>
			<td id="sb"></td>
			<td id="ST"></td>
			<td id="other"></td>
			<td id="transfer"></td>
		</tr>
	</tbody>
</table>

<table id="mtable" style="width: 50%; text-align: center;" border="1">
	<thead>
		<tr>
			<th>id</th>
			<th>type</th>
			<th>Bal</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>N/A</td>
			<td></td>
			<td></td>
		</tr>
	</tbody>
</table>

Frontend Javascript

$(document).ready(function () {

	$('#custid').keyup(function (e) {
		if (e.keyCode == 13) {
			e.preventDefault();
			getdata([$(this), $('#username')]);
			$(this).trigger('blur');
			$(this).focus();
		}
	});

	$('#username').keyup(function (e) {
		if (e.keyCode == 13) {
			e.preventDefault();
			getdata([$('#custid'), $(this)]);
			$(this).trigger('blur');
			$(this).focus();
		}
	});

	$('#refresh').on('click', function () {
		getdata([$('#custid'), $('#username'), $('#id'), $('#type')]);
	});

});

function getdata(obj)
{
	$.ajax({
		url: 'NPBalance.aspx',
		data: { custid: obj[0].val(), username: obj[1].val(), id: obj[2].val(), type: obj[3].val() },
		type: 'post',
		cache: false,
		dataType: 'json',
		success: function (data) {
			replace(data);
		},
		error: function (data, status, msg) {
			alert('$.ajax error!! \r\nstatus: ' + status + '\r\nmsg: ' + msg);
		},
	});
}

function replace(data) {
	if (data["error"]) {
		$('#error').text(data['error']);
		$('#username').text('N/A');
		$('#credit').text('');
		$('#balance').text('');
		$('#sumbettrans').text('');
		$('#newbalance').text('');
		$('#sb').text('');
		$('#ST').text('');
		$('#other').text('');
		$('#transfer').text('');
	}
	else {
		$('#error').text('');
		if (data['username']) {
			$('#username').text(data['username']);
		}
		else {
			$('#username').text('N/A');
		}
		$('#givecredit').text(data['givecredit']);
		$('#oldbalance').text(data['oldbalance']);
		$('#sumbettrans').text(data['sumbettrans']);
		$('#newbalance').text(data['newbalance']);
		$('#sb').text(data['sb']);
		$('#casino').text(data['casino']);
		$('#other').text(data['other']);
		$('#transfer').text(data['transfer']);

		var table = $('#mtable tbody');
		table.empty();

		$.each(data['Info'], function (i, d) {
			var row = '<tr>';
			$.each(d, function (j, e) { 
				row += '<td>' + e + '</td>';
			});
			row += '</tr>';
			table.append(row);
		});
	}
}