Reputation: 3750

How to get html table position

I've an aspx page and that page has a table like below

<table id="tbl1" runat="server">
<tr>
<td>
Hello world
</td>
</tr>
</table>

Now I want to get the position of the table (x,y coordinates) from code behind (C#).

Is there any way to get it?

Upvotes: 0

Answers (2)

Sam

Reputation: 71

You can achieve this with many ways

add a placeholder and put your table at runtime:-

<asp:placeholder id="PlaceHolder1" runat="server" xmlns:asp="#unknown">
</asp:placeholder>

set CSS at runtime

style1
{
position:absolute;
left:100px; //Example
top:150px; //Example
}

in CS code, use

Table.CssClass = "style1";

You can use Control.Style Property to set style of a control:

Table tbl = new Table();
tbl.Style[HtmlTextWriterStyle.Position] = "Absolute";
tbl.Style[HtmlTextWriterStyle.Top] = "10px";

If you want it in complete JavaScript. For example:

<!DOCTYPE html>
<head>
<title>Overlapping tables</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />

<style type="text/css" media="all">
table.first
{
    position: absolute;
    margin: 0;
    padding: 0;

    color: #000000;
    background-color: #ff0000;
    text-align: center;
}

table.second
{
    margin: 0;
    padding: 0;
    position: relative;

    text-align: center;
    color: #00ff00;
    background-color: transparent;
}

</style>

<script type="text/javascript"><!--

onload = setPos;

function setPos ()
{
    var table_1 = new namedTable ('first_table');
    var table_2 = new namedTable ('second_table');

    table_2.style.top = table_1.style.top - 1;
    table_2.style.left = table_1.style.left - 1;
}


function namedTable(name)
{

    if (document.getElementById)
    {
        this.obj = document.getElementById(name);
        this.style = document.getElementById(name).style;
    }
    else if (document.all)
    {
        this.obj = document.all[name];
        this.style = document.all[name].style;
    }
    else if (document.layers)
    {
        this.obj = document.layers[name];
        this.style = document.layers[name];
    }
}

//--></script>

</head>
<body>

<table class="first" id="first_table">
<tr>
    <td>
        <h1>TABLE</h1>
    </td>
</tr>
</table>

<table class="second" id="second_table">
<tr>
    <td>
        <h1>TABLE</h1>
    </td>
</tr>
</table>

</body>
</html>

Notes:

1) The document still validates (both CSS and HTML) at w3.org.

2) It is tested in Mozilla and Internet Explorer.

3) By force of habit I use the doc-type xhtml1-strict.dtd, but you should not use this doctype when publishing for Mozilla. Use HTML transitional instead - or simply put in no header (which will let the browsers run in Quirk mode, and be more lenient towards scripting errors).

4) If you further want to study this topic, here is a link to the most precise and lightweight Javascript Positioning techniques I know of:

http://www.quirksmode.org/

Good luck!

Upvotes: 1

Nitin S

Reputation: 7600

Try this

ASPX:

    <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_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>Demo</title>
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script>
    <script type="text/javascript">
        function getPosition(elmID) {
            var elmPosition = $("#"+elmID).position();
            $("#<%= hdnPosition.ClientID%>").val(elmPosition.left + "," + elmPosition.top);
        }

        $(document).ready(function () {
            $("#<%= btnGetPosition.ClientID %>").click(function () {
                getPosition("tbl1");
            });
        });
    </script>
</head>
<body>
    <form id="frmMain" runat="server">
    <table id="tbl1" runat="server">
        <tr>
            <td>
                Hello world
            </td>
        </tr>
    </table>
    <asp:HiddenField ID="hdnPosition" runat="server" />
    <asp:Button ID="btnGetPosition" runat="server" Text="Get position" 
        onclick="btnGetPosition_Click"/>
    </form>
</body>
</html>

Codebehind:

protected void btnGetPosition_Click(object sender, EventArgs e)
{
    string position = hdnPosition.Value;
}

Upvotes: 2

How to get html table position

Answers (2)

Related Questions