Solved

Deep clone of a HTML Table

Posted on 2011-09-30
5
351 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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 56

Expert Comment

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

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 56

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

Free Tool: ZipGrep

ZipGrep is a utility that can list and search zip (.war, .ear, .jar, etc) archives for text patterns, without the need to extract the archive's contents.

One of a set of tools we're offering as a way to say 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

ASP.Net to Oracle Connectivity Recently I had to develop an ASP.NET application connecting to an Oracle database.As I am doing it first time ,I had to solve several problems. This article will help to such developers  to develop an ASP.NET client…
Problem Hi all,    While many today have fast Internet connection, there are many still who do not, or are connecting through devices with a slower connect, so light web pages and fast load times are still popular.    If your ASP.NET page …
In this brief tutorial Pawel from AdRem Software explains how you can quickly find out which services are running on your network, or what are the IP addresses of servers responsible for each service. Software used is freeware NetCrunch Tools (https…
Do you want to know how to make a graph with Microsoft Access? First, create a query with the data for the chart. Then make a blank form and add a chart control. This video also shows how to change what data is displayed on the graph as well as form…

623 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