Javascript 将HTML中的表格作为div在特定坐标之间移动
我的代码是：Javascript 将HTML中的表格作为div在特定坐标之间移动,javascript,html,html-table,position,coordinates,Javascript,Html,Html Table,Position,Coordinates,我的代码是： <!DOCTYPE html> <html> <head> <meta charset=utf-8> <title>Inventory-Tags</title> <script src="http://www.kryogenix.org/code/browser/sorttable/sorttable.js"></script> <style> /* Appe
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8>
<title>Inventory-Tags</title>
<script src="http://www.kryogenix.org/code/browser/sorttable/sorttable.js"></script>
<style>
/* Appearance */
body, table { font-family: sans-serif; }
table { border-collapse: collapse; }
td, th { padding: 6px; }
th { background: #333; color: white; }
tbody tr:nth-child(odd) { background: #dfdfdf; }
table { border: 1px solid red; }
/* Scrollability of table */
table { width: 610px; } /* fixed width table */
thead tr { display: block; } /* makes it sizeable */
tbody {
display: block; /* makes it sizeable */
height: 262px; /* height of scrollable area */
overflow: auto; /* scroll rather than overflow */
width: 100%; /* fill the box */
}
thead th { width: 197px; } /* fixed width for THs */
tbody td { width: 185px; } /* fixed width for TDs */
</style>
</head>
<body>
<script>
function myFunction(Move2) {
document.getElementById("table1").style = "position: absolute; top: 40px"
document.getElementById("table2").style ="position:absolute; top: -9999px"
}
</script>
<script>
function myFunction(Move2) {
document.getElementById("table1").style = "position: absolute; top: -9999px"
document.getElementById("table2").style ="position:absolute; top: 40px"
}
</script>
<a onclick="function(Move)">Hi</a>
<div style="left: 40px">
<a onclick="function(Move2)">Hi2</a>
</div>
<div id="table1"; style="position: absolute; top: 40px">
<h1><div id=user_name>'s Inventory- Tags</h1>
<table class="sortable">
<thead><tr><th>Name</th><th>Explanation</th><th>Rarity</th></thead>
<tbody>
<tr><td>(the Halfbaked)</td><td>It looks kinda... under-cooked</td><td>R2</td></tr>
<tr><td>(Ninja)</td><td>Hiding in the night, you approach.</td><td>R6</td></tr>
<tr><td>(the Foul)</td><td>Foresee the future.</td><td>R7</td></tr>
<tr><td>(the Master)</td><td>Make le gold.</td><td>R6</td></tr>
<tr><td>(the Photographer)</td><td>Where's the camera?</td><td>R5</td></tr>
<tr><td>(the Canonical)</td><td>We all ship it.</td><td>R5</td></tr>
<tr><td>(the Punching Bag)</td><td>Looks like that hurt.</td><td>R3</td></tr>
<tr><td>(the Fancy)</td><td>I swear, if you start singing that song...</td><td>R5</td></tr>
<tr><td>(the Knight)</td><td>You live by the code of chivalry.</td><td>R6</td></tr>
<tr><td>(the Samurai)</td><td>Your enemy is the ninja.</td><td>R6</td></tr>
<tr><td>(the Loser)</td><td>You're not a winner.</td><td>R2</td></tr>
<tr><td>(the Outlaw)</td><td>You done somethin' bad, son.</td><td>Unique</td></tr>
<tr><td>(the Lord)</td><td>We bow to you humbly.</td><td>R9</td></tr>
<tr><td>(the Fugitive)</td><td>Always running, always hiding.</td><td>Unique</td></tr>
<tr><td>(the Egg)</td><td>Yes, that's right. An egg.</td><td>R4</td></tr>
</tbody>
</table>
</div>
<div id="table2"; style="position: absolute; top: -9999px">
<h1><div id=user_name>'s Inventory- Specials</h1>
<table class="sortable">
<thead><tr><th>Name</th><th>Explanation</th><th>Rarity</th></thead>
<tbody>
<tr><td>/slap</td><td>Allows you to slap any player for up to 15 damage.</td><td>R8</td> </tr>
<tr><td>/heal</td><td>Allows you to automatically heal yourself.</td><td>R9</td></tr>
<tr><td>/buildmode</td><td>Grants immunity to damage and permanent lighting; meant for use during building.</td><td>R9</td></tr>
<tr><td>/buff</td><td>Allows you to give yourself buffs.</td><td>R4</td></tr>
<tr><td>/invasion</td><td>Allows you to start an invasion.</td><td>R8</td></tr>
<tr><td>/gbuff</td><td>Allows you to give buffs to all players.</td><td>R9</td></tr>
<tr><td>/spawnmob</td><td>Allows you to spawn in any mob.</td><td>R9</td></tr>
<tr><td>/command1</td><td>Allows you to use /command1.</td><td>R8</td></tr>
<tr><td>/command2</td><td>Allows you to use /command2.</td><td>R8</td></tr>
<tr><td>HouseName</td><td>Gives ownership to HouseName.</td><td>House</td></tr>
<tr><td>HouseName2</td><td>Gives ownership to HouseName2.</td><td>House</td></tr>
</tbody>
</table>
</div>
</body>
</html>
库存标签
/*外表*/
正文，表{字体系列：无衬线；}
表{边框折叠：折叠；}
td，th{padding:6px；}
{背景：#333；颜色：白色；}
tbody tr:n个孩子（奇数）{背景：#dfdfdf；}
表{边框：1px实心红色；}
/*表格的滚动性*/
表{宽度：610px；}/*固定宽度表*/
ad tr{display:block；}/*使其相当大*/
tbody{
display:block；/*使其具有相当大的规模*/
高度：262px；/*可滚动区域的高度*/
溢出：自动；/*滚动而不是溢出*/
宽度：100%；/*填充框*/
}
THAD th{宽度：197px；}/*THs的固定宽度*/
tbody td{width:185px；}/*TDs的固定宽度*/
函数myFunction（Move2）{
document.getElementById（“表1”）.style=“位置：绝对；顶部：40px”
document.getElementById（“表2”）.style=“位置：绝对；顶部：-9999px”
}
函数myFunction（Move2）{
document.getElementById（“表1”）.style=“位置：绝对；顶部：-9999px”
document.getElementById（“表2”）.style=“位置：绝对；顶部：40px”
}
你好
Hi2
的库存标签
名称解释稀有性
（半生不熟的）看起来有点。。。欠熟的2
（忍者）躲在夜里，你靠近了
（犯规）预见未来
（大师）做黄金
（摄影师）照相机在哪里
（圣典）我们都会发货
（出气筒）看起来很疼
（幻想）我发誓，如果你开始唱那首歌…R5
（骑士）你以骑士精神为准则
（武士）你的敌人是忍者
（失败者）你不是赢家
（歹徒）你做了坏事，孩子，独一无二
（主）我们谦卑地向你鞠躬
（逃犯）总是跑，总是躲。独一无二
（鸡蛋）是的，没错。鸡蛋
的库存-特价商品
名称解释稀有性
/拍打允许你拍打任何玩家，最多造成15点伤害。R8
/heal允许您自动治愈自己。R9
/BuildMode提供对损坏和永久照明的免疫力；用于建筑期间。R9
/buff允许你给自己buff。R4
/入侵允许您启动入侵。R8
/gbuffAllows允许您为所有玩家提供增益。R9
/SpawnMob允许您在任何mob中生成。R9
/command1允许您使用/command1.R8
/command2允许您使用/command2.R8
HouseName赋予HouseName所有权
房屋名称2将所有权转让给房屋名称2.房屋
简而言之，我希望能够单击一个按钮或一个
document.getElementById("table1").style = "position: absolute; top: -9999px"
document.getElementById("table2").style ="position:absolute; top: 40px"
document.getElementById("table1").style.top = "-9999px"; //also don't forget the semicolon
var elem = document.getElementById("table1");
elem.style.position = "absolute";
elem.style.top = "-9999px";
大多数样式都可以使用其常规样式名称（如顶部、高度、颜色等）放置在元素style.top之后。。除了可以定义为zIndex的
z-index