Dynamically creating table on click event

Who is online? 0 guests and 0 members

home » forums » codeasp.net community » test forums » Dynamically creating table on click event

Dynamically creating table on click event

Posts under the topic: Dynamically creating table on click event

Posted: 10/23/2009

Preeti Deshpande

5 points Lurker

Joined on: 10/23/2009
Posts: 1

Hello...

I want to create a table dynamically when i click on a link..

Say if i have created a table and inside i have this....and a link outside the table..

username (label) Textbox1

password(label) Textbox2

Button

when i click the link the same table should be replicated in the page...

by using javascript...please help me out in this...

Thank you

Posted: 10/24/2009

Raghav Khunger

16813 points Guru

Joined on: 4/19/2009
Posts: 490

Hi,

Try the below code. On click of link the table will be replicated.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
	<title></title>
</head>
<body>
	<table id="SourceTable">
		<tr>
			<td>
				<label>
					UserName
				</label>
			</td>
			<td>
				<input id="txtUserName" type="text" />
			</td>
		</tr>
		<tr>
			<td>
				<label>
					Passsword
				</label>
			</td>
			<td>
				<input id="txtPassword" type="password" />
			</td>
		</tr>
	</table>
	<br />
	<a href="#" id="testLink" onclick="replicate();">Replicate</a>
	<br />
	<div id="TargetDiv">
	</div>
</body>

<script type="text/javascript">



	function replicate()
	{

		var sourceTable = document.getElementById('SourceTable');

		var targetPanel = document.getElementById('TargetDiv');

		targetPanel.innerHTML = '<table>' + sourceTable.innerHTML + '</table>';

	}

 

</script>

</html>

Thanks,

Raghav

tags javascript

[<a href="https://mvp.support.microsoft.com/profile/Raghav">ASP.NET MVP</a>] [<a href="https://www.microsoftcommunitycontributor.com">Microsoft® Community Contributor</a>] [<a href="http://www.dzone.com/aboutmvb">Dzone MVB</a>] [<a href="https://twitter.com/#!/RaghavKhunger">Follow me on Twitter</a>] [<a href="http://codeasp.net/wiki/view/10/how-to-ask-questions-on-forums">How to ask questions on forums</a>] "Success does not come to those who wait . . . and it does not wait for anyone to come to it." Anonymous "Success is simply a matter of luck. Ask any failure." Anonymous

Posted: 10/25/2009

Shaitender Singh

1543 points Starter

Joined on: 12/22/2008
Posts: 46

Hello Preets ,
You can replicate your table using Jquery as well . Try This

<html xmlns="http://www.w3.org/1999/xhtml">   
<head runat="server">   
    <title></title>   
  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
</head>   
<body>   
    <table id="Table">   
        <tr>   
            <td>   
                <label>   
                    UserName   
                </label>   
            </td>   
            <td>   
                <input id="txtUserName" type="text" />   
            </td>   
        </tr>   
        <tr>   
            <td>   
                <label>   
                    Passsword   
                </label>   
            </td>   
            <td>   
                <input id="txtPassword" type="password" />   
            </td>   
        </tr>   
    </table>   
    <br />   
    <a href="#" id="Replicate" >Replicate</a>
    <a href="#" id="Revert" >Revert Back</a>
   
</body>   
  
<script type="text/javascript">

    $(document).ready(function()
    {
        $('#Revert').hide();
        $('#Replicate').click(function()
        {
            $(document.body).append($('#Table').clone().attr('id', 'table2'));
            $(this).hide();
            $('#Revert').show();
        });

        $('#Revert').click(function()
        {
            $('#table2').remove();
            $(this).hide();
            $('#Replicate').show();
        });
    });
  
</script>   
  
</html>

Thanks

Page 1 of 1 (3 items)