Question

我有一张篮球统计表，我有一个篮球场的图像，后来会包含一个投篮图。它最初是隐藏的。我希望图像仅在用户单击按钮时显示。并且图像应该出现在表格的顶部。（大部分表格都在图片后面）我似乎无法操纵CSS或Jquery位置来允许这种情况发生。部分问题是我希望表本身居中（margin：0px auto;）

我在这里开始了一个JSFiddle：https://jsfiddle.net/Thread7/f7g9dtxt/来解决它。如果单击“显示法庭”，您将看到现在发生的事情。图像位于底部和左侧。而不是顶部和中部。

以下代码：

<button id='showimg'>
Show Court
</button>
<table class='mytable'>
<tr><th>Name</th><th>FGA</th><th>FGM</th><th>Rebounds</th><th>Fouls</th>    </tr>
<tr><td>Michael Jordan</td><td>5</td><td>10</td><td>12</td><td>3</td></tr>
<tr><td>LeBron James</td><td>3</td><td>7</td><td>5</td><td>4</td></tr>
<tr><td>Kobe Bryant</td><td>1</td><td>8</td><td>7</td><td>3</td></tr>
<tr><td>Magic Johnson</td><td>6</td><td>11</td><td>3</td><td>3</td></tr>
<tr><td>Draymond Green</td><td>6</td><td>11</td><td>3</td><td>3</td></tr>
<tr><td>Zach Randolph</td><td>6</td><td>11</td><td>3</td><td>3</td></tr>
</table>
<img src='http://exchangedownloads.smarttech.com/public/content/2c/2c4cb6ee-579f-4404-b573-c554ba6bf7f4/previews/medium/0001.png' class='myimg' id='court'>

CSS：

.mytable {
  margin: 0px auto;
}
.mytable td {
  text-align: left;
  border: solid;
  padding: 5px;
  margin: 0px;
}

.myimg {
  display: none;
  margin: 0px auto;
}

JQuery的：

$("#showimg").click(function(e) {
  $("#court").show();
});

Answer 1

您应该将表包装在具有相对位置的元素中，而不是放置图像（也在具有绝对位置的容器中）。这样你就可以更好地控制这些元素。看看：

＆＃13;

$("#showimg").click(function(e) {
    $(".myimg").toggle();
});

＆＃13;

.mytable {
    margin: 0px auto;
}

.mytable td {
    text-align: left;
    border: solid;
    padding: 5px;
    margin: 0px;
}

.myimg {
    display: none;
    position: absolute;
    top: 0;
    width: 100%;
    text-align: center;
}

.table_container {
    position: relative;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id='showimg'>
    Show/Hide Court
</button>
<div class="table_container">
    <table class='mytable'>
        <tr>
            <td>Michael</td>
            <td>Jordan</td>
            <td>5</td>
            <td>10</td>
        </tr>
        <tr>
            <td>LeBron</td>
            <td>James</td>
            <td>3</td>
            <td>7</td>
        </tr>
        <tr>
            <td>Kobe</td>
            <td>Bryant</td>
            <td>1</td>
            <td>8</td>
        </tr>
        <tr>
            <td>Magic</td>
            <td>Johnson</td>
            <td>6</td>
            <td>11</td>
        </tr>
    </table>
    <div class="myimg">
        <img src='http://exchangedownloads.smarttech.com/public/content/2c/2c4cb6ee-579f-4404-b573-c554ba6bf7f4/previews/medium/0001.png' id='court' />
    </div>

</div>

＆＃13;

同样在 updated fiddle

Answer 2

试试这个：https://jsfiddle.net/f7g9dtxt/3/

$('.yourImage').toggle();
$("#showimg").click(function(e) {
	$('.yourImage').toggle();
});

.mytable td {
  text-align: left;
  border: solid;
  padding: 2px;
  margin: 0px;
}
.mytable {
  position: absolute;
  z-index: 0;
}
.yourImage {
  position: absolute;
  z-index: 1;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id='showimg'>
Show Court
</button>
<table class='mytable'>
<tr><td>Michael</td><td>Jordan</td><td>5</td><td>10</td></tr>
<tr><td>LeBron</td><td>James</td><td>3</td><td>7</td></tr>
<tr><td>Kobe</td><td>Bryant</td><td>1</td><td>8</td></tr>
<tr><td>Magic</td><td>Johnson</td><td>6</td><td>11</td></tr>
</table>
<span class="yourImage">
  Put an img tag here!
</span>

将图像叠加在桌面上

2 个答案: