asked on

Deep clone of a HTML Table

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

jagssidurala

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

HainKurt

whats the purpose of this cloning?

ASKER CERTIFIED SOLUTION

HainKurt

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

HainKurt

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

Marcelo Camarate

ASKER

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