Solved

Deep clone of a HTML Table

Posted on 2011-09-30
5
347 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:Huseyin KAHRAMAN
ID: 36895630
whats the purpose of this cloning?
0
 
LVL 51

Accepted Solution

by:
Huseyin KAHRAMAN 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:Huseyin KAHRAMAN
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

Free Tool: Path Explorer

An intuitive utility to help find the CSS path to UI elements on a webpage. These paths are used frequently in a variety of front-end development and QA automation tasks.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

Question has a verified solution.

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

User art_snob (http://www.experts-exchange.com/M_6114203.html) encountered strange behavior of Android Web browser on his Mobile Web site. It took a while to find the true cause. It happens so, that the Android Web browser (at least up to OS ver. 2.…
Introduction This article shows how to use the open source plupload control to upload multiple images. The images are resized on the client side before uploading and the upload is done in chunks. Background I had to provide a way for user…
A short tutorial showing how to set up an email signature in Outlook on the Web (previously known as OWA). For free email signatures designs, visit https://www.mail-signatures.com/articles/signature-templates/?sts=6651 If you want to manage em…

740 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