How to generate Index of user given value in textbox?

Question

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? I am new to 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>

hdotluna · Accepted Answer · 2016-09-22 05:12:04Z

1

$(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.

edited Sep 22, 2016 at 5:12

answered Sep 22, 2016 at 4:54

hdotluna

5,7524 gold badges23 silver badges32 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Samudrala Ramu Over a year ago

after adding row how to change right mark as cross mark when user clicks on text box it will change .

Samudrala Ramu Over a year ago

After completing of appending of one row in table now user clicks on textbox then i want to change that img right mark as Cross mark

hdotluna Over a year ago

Look at it now. After 1 sec, it comes back.

Samudrala Ramu Over a year ago

its right but user when clicks on text box then it will changing want .

hdotluna Over a year ago

Edit your question. Put all you want then I will answer it. Don't ask one by one.

Aman Nagarkoti · Accepted Answer · 2016-09-22 04:58:04Z

1

declare i above click function.

ie- i=0;

answered Sep 22, 2016 at 4:58

Aman Nagarkoti

1981 silver badge12 bronze badges

1 Comment

Samudrala Ramu Over a year ago

after adding row how to change right mark as cross mark when user clicks on text box it will change

Sam Battat · Accepted Answer · 2016-09-22 04:59:42Z

1

You can count the number of rows and use that for index

var $tbl = $('#usertbl');
var count = $('tr', $tbl).length;

Example: https://jsfiddle.net/wbhuccd7/

answered Sep 22, 2016 at 4:59

Sam Battat

5,7651 gold badge22 silver badges29 bronze badges

2 Comments

Samudrala Ramu Over a year ago

after adding row how to change right mark as cross mark when user clicks on text box it will change

Sam Battat Over a year ago

What do you mean? Change it back to "X" after the row is added? Can it be timed, like wait 2 seconds then change to "X"?

Collectives™ on Stack Overflow

How to generate Index of user given value in textbox?

3 Answers 3

5 Comments

1 Comment

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

5 Comments

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related