jQuery ::: Append row to table onclick?

n00b0101
n00b0101 used Ask the Experts™
on
Don't know if I can do this with jQuery or if I can accomplish this with simple js?  I have a table with a row that includes a form field.  I want to be able to click on any of the input fields within that row, which will then add another row with additional input fields, without adding one each time one of the text fields is clicked in:
<!-- Initial State -->
<tr>
<td><input type="text" name="somename1[]" value="" /></td>
<td><input type="text" name="somename2[]" value="" /></td>
<td><input type="text" name="somename3[]" value="" /></td>
</tr>
 
<!-- After clicking in any of the text fields -->
<!-- If the user clicks in any of the text fields, it should only add one row. 
 If the user clicks in the one, and then another in the same row, 
it shouldn't add two rows -->
 
<tr>
<td><input type="text" name="somename1[]" value="" /></td>
<td><input type="text" name="somename2[]" value="" /></td>
<td><input type="text" name="somename3[]" value="" /></td>
</tr>
 
<tr>
<td><input type="text" name="somename1[]" value="" /></td>
<td><input type="text" name="somename2[]" value="" /></td>
<td><input type="text" name="somename3[]" value="" /></td>
</tr>

Open in new window

Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
Expert of the Year 2008
Top Expert 2008
Commented:

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
 
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
<script type="text/javascript">
$( function(){
	$("#myTable > tbody > tr > td > input").bind('click', function(){
		var row = $(this).closest("tr").get(0);
		if( row.className.indexOf("clicked")==-1 )
		{
			row.className+="clicked";
			$(row).closest("tbody").append( "<tr>"+$(row).html()+"</tr>" );
		}
	});
});
</script>
</head>
<body>
<table id="myTable">
	<tbody>
		<tr>
			<td><input type="text" name="somename1[]" value="" /></td>
			<td><input type="text" name="somename2[]" value="" /></td>
			<td><input type="text" name="somename3[]" value="" /></td>
		</tr>
	</tbody>
</table>
</body>
</html>

Open in new window

Commented:
hielo's solution only duplicates the row once, the following minor change will duplicate the row when clicking in the new rows.
<script type="text/javascript">
$( function(){
	$("#myTable > tbody > tr > td > input").bind('click', function(){
		var row = $(this).closest("tr").get(0);
		if( row.className.indexOf("clicked")==-1 )
		{
			$(row).closest("tbody").append($(row).clone(true));
			row.className+="clicked";
		}
	});
});
</script>

Open in new window

Author

Commented:
Thanks to you both!
Expert of the Year 2008
Top Expert 2008

Commented:
>>hielo's solution only duplicates the row once
he said "..., without adding one each time one of the text fields is clicked in"

Commented:
I see your point. I took that to mean no more rows should be added if you click in other inputs in the same row, or if you click on the same input a few times. I assumed he'd want to add a new row each time you clicked in the last row.

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial