如何獲得HTML表位置

我有一個aspx頁面，該頁面有一個像下面如何獲得HTML表位置

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

現在我想表的位置（X，Y座標）從後面的代碼表（ C＃）。

有沒有什麼辦法得到它？

來源

2013-05-27 jestges

試試這個

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>

代碼隱藏：

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

來源

2013-05-27 07:07:04

您可以通過多種方式實現這一

添加一個佔位符，並且把你的表在運行時： - 在運行時

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

在CS代碼

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

一套CSS，使用
```
Table.CssClass = "style1"; 
```

你可以使用Control.Style屬性來設置控件的樣式：

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

如果你想在完整的JavaScript。例如：

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

注：

1）文檔仍然驗證（在w3.org CSS和HTML）。

2）它在Mozilla和Internet Explorer中測試。

3）通過強制習慣，我使用doc-type xhtml1-strict.dtd，但是應該在發佈Mozilla時不要使用這個doctype。改爲使用HTML 過渡 - 或者簡單地放入沒有標題（這會讓瀏覽器以Quirk模式運行，並且對腳本編寫錯誤更加寬鬆）。

4）如果您想進一步研究這個課題，這裏是我所知道的最精確和輕便的Javascript定位技術的鏈接：

http://www.quirksmode.org/

祝你好運！

來源

2013-05-27 07:41:37 Sam

如何獲得HTML表位置

回答

相關問題