Question

我的代码是：

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

从我的代码中，我相信你可以看到我想要的东西。我希望能够点击我的“a”div。当他们点击'Hi'时，第一张桌子会进入可见区域，第二张桌子就会消失。单击“Hi2”时，第一个表格会消失，第二个表格会转到可视区域。我知道onclick不适用于<style>，所以我尝试使用ParseInt方法，但这将继续移动。请注意，我的完整代码中将包含四个表，以及四个按钮。我不这样做，如果你点击'嗨'，然后'嗨3'，你必须点击'Hi2'或'Hi4'来显示他们各自的表。

简而言之，我希望能够点击按钮或<a>，并将四个表格移动到我自己指定的坐标，而不使用<style>。

Answer 1

解决问题的方法是了解基本javascript的使用方法。你不能改变这样的元素风格

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";

MOST样式可以放在elem.style.top之后，使用它们的正常样式名称，例如top，height，color等。除了z-index，可以定义为zIndex

将HTML格式的表格作为div移动到某些坐标和从某些坐标移动

1 个答案: