Solved

Deep clone of a HTML Table

Posted on 2011-09-30
5
345 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

Gigs: Get Your Project Delivered by an Expert

Select from freelancers specializing in everything from database administration to programming, who have proven themselves as experts in their field. Hire the best, collaborate easily, pay securely and get projects done right.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

I have developed many web applications with asp & asp.net and to add and use a dropdownlist was always a very simple task, but with the new asp.net, setting the value is a bit tricky and its not similar to the old traditional method. So in this a…
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…
Microsoft Active Directory, the widely used IT infrastructure, is known for its high risk of credential theft. The best way to test your Active Directory’s vulnerabilities to pass-the-ticket, pass-the-hash, privilege escalation, and malware attacks …
The Email Laundry PDF encryption service allows companies to send confidential encrypted  emails to anybody. The PDF document can also contain attachments that are embedded in the encrypted PDF. The password is randomly generated by The Email Laundr…

776 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