Solved

Deep clone of a HTML Table

Posted on 2011-09-30
5
335 Views
Last Modified: 2012-06-22
Hi,

See the ASP.NET page below:

<%@ Page Language="vb" AutoEventWireup="false" CodeBehind="Default.aspx.vb" Inherits="TBOrder._Default" %>

<!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>Untitled Page</title>
    <script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript" ></script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <table id="SourceTable" runat="server" border="0" cellpadding="0" cellspacing="0" style="width: 300px; height: 90px;">
            <tr>
                <td style="width: 100px; height: 30px; background-color: #ccffff">
                </td>
                <td style="width: 100px; height: 30px; background-color: #ccffff">
                </td>
                <td style="width: 100px; height: 30px; background-color: #ccffff">
                </td>
            </tr>
            <tr>
                <td style="width: 100px; height: 30px; background-color: #ccffff">
                </td>
                <td style="vertical-align: middle; width: 100px; height: 30px; background-color: #ccffff; text-align: center">
                    Source Table
                </td>
                <td style="width: 100px; height: 30px; background-color: #ccffff">
                </td>
            </tr>
            <tr>
                <td style="width: 100px; height: 30px; background-color: #ccffff">
                </td>
                <td style="width: 100px; height: 30px; background-color: #ccffff">
                </td>
                <td style="width: 100px; height: 30px; background-color: #ccffff">
                </td>
            </tr>
        </table>
    
    </div>
    </form>
</body>
</html>

Open in new window


How can I do a deep clone of the HTML Table "SourceTable" in VB.NET? My intention is duplicate it.

Thanks in advance, Camarate
0
Comment
Question by:Marcelo Camarate
  • 3
5 Comments
 
LVL 12

Expert Comment

by:jagssidurala
ID: 36895396

Dim str as StringBuilder = "<table id=""SourceTable"" runat=""server"" border=""0"" cellpadding=""0"" cellspacing=""0"" style=""width: 300px; height: 90px;"">"

For i = 0 To 2
      str.Append(" <tr>")
      str.Append("<td style=""width: 100px; height: 30px; background-color: #ccffff""></td>")
      str.Append("<td style=""width: 100px; height: 30px; background-color: #ccffff""></td>")
      str.Append("<td style=""width: 100px; height: 30px; background-color: #ccffff""></td>")
      str.Append(" </tr>")
Next

str.Append(" </table>")
divMain.InnerHtml = str.Tostring()
         
             
place a divMain in your aspx
0
 
LVL 51

Expert Comment

by:HainKurt
ID: 36895630
whats the purpose of this cloning?
0
 
LVL 51

Accepted Solution

by:
HainKurt earned 250 total points
ID: 36895637
maybe you should just use jQuery :)

here is a sample
<html>
<head>
			<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript" ></script>

<script>
$(document).ready(function() {
	var tbl = $("#SourceTable");
	var tblCount = $("#myTables table").length;
	alert(tblCount);
});
function addTable(){
	var tbl = $("#SourceTable");
	var tblCount = $("#myTables table").length;
	var newTbl = tbl.clone();
	newTbl.id = "SourceTable"+tblCount;
	newTbl.appendTo("#myTables");
}
</script>
</head>

<div id=myTables>
        <table id="SourceTable" runat="server" border="0" cellpadding="0" cellspacing="0" style="width: 300px; height: 90px;">
            <tr>
                <td style="width: 100px; height: 30px; background-color: #ccffff">
                </td>
                <td style="width: 100px; height: 30px; background-color: #ccffff">
                </td>
                <td style="width: 100px; height: 30px; background-color: #ccffff">
                </td>
            </tr>
            <tr>
                <td style="width: 100px; height: 30px; background-color: #ccffff">
                </td>
                <td style="vertical-align: middle; width: 100px; height: 30px; background-color: #ccffff; text-align: center">
                    Source Table
                </td>
                <td style="width: 100px; height: 30px; background-color: #ccffff">
                </td>
            </tr>
            <tr>
                <td style="width: 100px; height: 30px; background-color: #ccffff">
                </td>
                <td style="width: 100px; height: 30px; background-color: #ccffff">
                </td>
                <td style="width: 100px; height: 30px; background-color: #ccffff">
                </td>
            </tr>
        </table>
</div>

<button onClick="addTable()">add</button>
<body>
</body>
</html>

Open in new window

0
 
LVL 51

Expert Comment

by:HainKurt
ID: 36895644
or maybe you cfreate a new literalControl with html = SourceTable.InnerHtml and add that one to divs control collection (give an id to div and add runat=server)

<div id=myTables runat=server>
  <table id="SourceTable" runat="server"..>...</table>
</div>

myTables.controls.add (new LiteralContrrol(SourceTable.innerHTML));

may have some syntax issues, not tested...
0
 

Author Closing Comment

by:Marcelo Camarate
ID: 36896371
Hi HainKurt,

Thanks for you reply.

Although not exactly what I wanted (to do this in a VB.NET code), your solution is very simple and smart. I will use it to get my target.

In relation to my purpose of this cloning is change, depending on certain conditions, the presentation order of HTML objects on the page. To illustrate, see the code below.

<%@ Page Language="vb" AutoEventWireup="false" CodeBehind="Default.aspx.vb" Inherits="TBOrder._Default" %>

<!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>Untitled Page</title>
    
    <script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript" ></script>
    
    <script type ="text/javascript">
        
        function BlueFirstFunction()
        {
	        var tbl = $("#RedTable");
	        var tblCount = $("#myTables table").length;
	        var newTbl = tbl.clone();
	        tbl.remove();
	        newTbl.id = "RedTable";
	        newTbl.appendTo("#myTables");
	        
	        return false;
        }
        
        function RedFirstFunction()
        {
	        var tbl = $("#BlueTable");
	        var tblCount = $("#myTables table").length;
	        var newTbl = tbl.clone();
	        tbl.remove();
	        newTbl.id = "BlueTable";
	        newTbl.appendTo("#myTables");
	        
	        return false;
        }
        
    </script>
    
</head>
<body>
    <form id="form1" runat="server">
    <div>
    <div id="myTables">
        <table id="BlueTable" runat="server" border="0" cellpadding="0" cellspacing="0" style="width: 300px; height: 90px;">
            <tr>
                <td style="width: 100px; height: 30px; background-color: blue">
                </td>
                <td style="width: 120px; height: 30px; background-color: blue">
                </td>
                <td style="width: 100px; height: 30px; background-color: blue">
                </td>
            </tr>
            <tr>
                <td style="width: 100px; height: 30px; background-color: blue">
                </td>
                <td style="vertical-align: middle; width: 120px; height: 30px; background-color: blue; text-align: center; color: #ffffff; font-weight: bold;">
                    BLUE TABLE</td>
                <td style="width: 100px; height: 30px; background-color: blue">
                </td>
            </tr>
            <tr>
                <td style="width: 100px; height: 30px; background-color: blue">
                </td>
                <td style="width: 120px; height: 30px; background-color: blue">
                </td>
                <td style="width: 100px; height: 30px; background-color: blue">
                </td>
            </tr>
        </table>
        <table id="RedTable" runat="server" border="0" cellpadding="0" cellspacing="0" style="width: 300px; height: 90px;">
            <tr>
                <td style="width: 100px; height: 30px; background-color: red">
                </td>
                <td style="width: 120px; height: 30px; background-color: red">
                </td>
                <td style="width: 100px; height: 30px; background-color: red">
                </td>
            </tr>
            <tr>
                <td style="width: 100px; height: 30px; background-color: red">
                </td>
                <td style="vertical-align: middle; width: 120px; height: 30px; background-color: red; text-align: center; font-weight: bold; color: #ffffff;">
                    RED TABLE</td>
                <td style="width: 100px; height: 30px; background-color: red">
                </td>
            </tr>
            <tr>
                <td style="width: 100px; height: 30px; background-color: red">
                </td>
                <td style="width: 120px; height: 30px; background-color: red">
                </td>
                <td style="width: 100px; height: 30px; background-color: red">
                </td>
            </tr>
        </table>
        </div>
        <br />
        <asp:Button ID="Button1" runat="server" Text="Blue First" OnClientClick="return BlueFirstFunction();" Width="110px" />
        &nbsp;
        <asp:Button ID="Button2" runat="server" Text="Red First" OnClientClick="return RedFirstFunction();" Width="110px" />
    
    </div>
    </form>
</body>
</html>

Open in new window

0

Featured Post

How to run any project with ease

Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
- Combine task lists, docs, spreadsheets, and chat in one
- View and edit from mobile/offline
- Cut down on emails

Join & Write a Comment

Suggested Solutions

Sometimes in DotNetNuke module development you want to swap controls within the same module definition.  In doing this DNN (somewhat annoyingly) swaps the Skin and Container definitions to the default admin selections.  To get around this you need t…
In .NET 2.0, Microsoft introduced the Web Site.  This was the default way to create a web Project in Visual Studio 2005.  In Visual Studio 2008, the Web Application has been restored as the default web Project in Visual Studio/.NET 3.x The Web Si…
Illustrator's Shape Builder tool will let you combine shapes visually and interactively. This video shows the Mac version, but the tool works the same way in Windows. To follow along with this video, you can draw your own shapes or download the file…
This video shows how to remove a single email address from the Outlook 2010 Auto Suggestion memory. NOTE: For Outlook 2016 and 2013 perform the exact same steps. Open a new email: Click the New email button in Outlook. Start typing the address: …

757 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

20 Experts available now in Live!

Get 1:1 Help Now