如何获得html表的位置
本文关键字:位置 html 何获得 | 更新日期: 2023-09-27 18:15:23
我有一个aspx页面,这个页面有一个像下面这样的表
<table id="tbl1" runat="server">
<tr>
<td>
Hello world
</td>
</tr>
</table>
现在我想从后面的代码(c#)中获得表的位置(x,y坐标)。
有办法得到它吗?
试试这个
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;
}
可以通过多种方式实现
-
添加一个占位符并在运行时放置您的表:-
<asp:placeholder id="PlaceHolder1" runat="server" xmlns:asp="#unknown"> </asp:placeholder>
-
在运行时设置CSS
在CS代码中,使用style1 { position:absolute; left:100px; //Example top:150px; //Example }
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中测试。
根据习惯,我使用文档类型xhtml1-strict。不,但你应该在为Mozilla发布时不要使用此文档类型。使用HTML代替过渡-或者简单地不添加标题(这将让浏览器以Quirk模式运行,并且对脚本编写更宽松错误).4)如果你想进一步研究这个话题,这里有一个链接我所知道的精确和轻量级的Javascript定位技术:
http://www.quirksmode.org/祝你好运!