Samudrala Ramu Samudrala Ramu - 2 months ago 10
CSS Question

How to I Generate Index of user given value in textbox?

how to set index to user given values in textbox and its appending to below table in newly created row but how to show that index in every row first column in my table anybody help me i am new for this type of functionality.



$(document).ready(function(){

$('#addbtn').click(function(){

var s = $.trim($('#user').val());
var i = 0;
var c = 1;
var count = i+c;
if(s !=''){
$('#result').attr('src','http://www.clipartbest.com/cliparts/abT/y4b/abTy4bcL7.png');
$('#usertbl').append('<tr height=\"30\">'+'<td>'+count+'</td>'+'<td>'+s+'</td>'+'<td>'+'</td>'+'</tr>');
}
$('#user').val(' ');


});

});

table,tr,th,td{
border:1px solid #dddddd;
border-collapse:collapse;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="user"/>
<button id="addbtn">Add</button><span><img src="http://pix.iemoji.com/images/emoji/apple/ios-9/256/cross-mark.png" id="result" height="50" width="50"/></span>
<table style="width:100%;" id="usertbl">
<tr height="30">
<th width="34%">Serial Number</th>
<th width="33%">User NAme</th>
<th width="33%">Content</th>
</tr>
</table>




Answer

$(document).ready(function(){
	var count = 1;
	
	$('#addbtn').click(function(){
		var s = $.trim($('#user').val());

		if(s !=''){
			$('#result').attr('src','http://www.clipartbest.com/cliparts/abT/y4b/abTy4bcL7.png');
			$('#usertbl').append('<tr height=\"30\">'+'<td>'+count+'</td>'+'<td>'+s+'</td>'+'<td>'+'</td>'+'</tr>');
			count++;
		}
		$('#user').val(' ');
	});

	$('#user').keyup(function(){
		$('#result').attr('src','http://pix.iemoji.com/images/emoji/apple/ios-9/256/cross-mark.png');
	});
});
table,tr,th,td{
	border:1px solid #dddddd;
	border-collapse:collapse;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="user"/>
<button id="addbtn">Add</button><span><img src="http://pix.iemoji.com/images/emoji/apple/ios-9/256/cross-mark.png" id="result" height="50" width="50"/></span>

<table style="width:100%;" id="usertbl">
	<tr height="30">
		<th width="34%">Serial Number</th>
		<th width="33%">User NAme</th>
		<th width="33%">Content</th>
	</tr>
</table>

Decalre variable outside the click event and over ride it using increment when click.