2
我有兩個表格，我已經放在兩個divs垂直分爲兩半的屏幕。這些表格具有可摺疊的行，可以通過單擊進行擴展。HTML如何定位一個按鈕相對於兩個div？
在表格底部，我放置了一個相對於div1定位的提交按鈕。所以當div1中的表展開時，該按鈕按預期向下移動。但是當div2中的表擴展時，按鈕將保持在它的位置。
我的問題是，我可以使這個按鈕相對於這兩個div，所以它應該移動任何表，無論是從div1或div2擴大。
addPlusSign();
$(".btn1").click(function() {
$(".expand1").toggle();
var btn1Text = $(".btn1").text();
if (btn1Text.indexOf("+") > -1) {
var temp = btn1Text.replace(/\+|\-/ig, '-');
$(".btn1").text(temp);
} else if (btn1Text.indexOf("-") > -1) {
var temp = btn1Text.replace(/\+|\-/ig, '+');
$(".btn1").text(temp);
}
});
$(".btn2").click(function() {
$(".expand2").toggle();
var btn1Text = $(".btn2").text();
if (btn2Text.indexOf("+") > -1) {
var temp = btn2Text.replace(/\+|\-/ig, '-');
$(".btn2").text(temp);
} else if (btn2Text.indexOf("-") > -1) {
var temp = btn2Text.replace(/\+|\-/ig, '+');
$(".btn2").text(temp);
}
});
})
function addPlusSign() {
if ($(".expand1")) {
var btn1Text = $(".btn1").text();
$(".btn1").text(btn1Text + " [+]");
}
if ($(".expand2")) {
var btn2Text = $(".btn2").text();
$(".btn2").text(btn1Text + " [+]");
}
}
$(function() {
$('.admin-form')
//we need to save values from all inputs with class 'admin-input'
.find(':input.admin-input')
.each(function() {
//save old value in each input's data cache
$(this).data('oldValue', $(this).val())
})
.end()
.submit(function(ev) {
var changed = false;
$(':input.admin-input', this).filter(function() {
if ($(this).val() != $(this).data('oldValue')) {
changed = true;
}
});
if ($(this).hasClass('changed') && (!changed)) {
alert("None of the thresholds were changed!");
ev.preventDefault()
}
if ($(this).hasClass('changed') && changed) {
var allowSubmit = window.confirm("You have set a unique threshold for one or more sub-elements below. Are you sure you want to reset them all?")
if (!allowSubmit)
ev.preventDefault()
}
});
});
$(document).on('input', '.admin-input', function() {
$(this).closest('form').addClass('changed');
});.expand1 {
display: none;
}
.btn1 {
cursor: pointer;
}
.expand2 {
display: none;
}
.btn2 {
cursor: pointer;
}
body {
background-color: rgb(255, 255, 255);
font: 15px Verdana, Helvetica, sans-serif;
}
table#t02,
#t02 th,
#t02 td {
border: none;
border-collapse: collapse;
font-size: 90%;
font-weight: normal;
}
table#t03,
#t03 th,
#t03 td {
border: none;
border-collapse: collapse;
font-size: 90%;
font-weight: normal;
}
#button1 {
position: relative;
top: 20px;
left: 85%;
color: white;
background-color: rgb(0, 89, 132);
font-weight: bold;
}
html {
overflow-y: scroll;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="form1" method="post" class="admin-form">
<div style="float:left; width:50%">
<table id="t02" class="table2">
<tr>
<th style="padding:0 30px 0 0;"></th>
<th></th>
<th style="padding:0 10px 0 0;">Green</th>
<th colspan="3" style="padding:0 10px 0 0">Yellow</th>
<th></th>
<th style="padding:0 10px 0 0">Red</th>
</tr>
<tr>
<td class="btn1" style="padding:0 30px 0 0;"><b>Collapsible Row1</b>
</td>
<td><</td>
<td style="padding:0 10px 0 0">
<input type="text" , class="admin-input" , name="acd_call_volume_good_high" , value="50" , size="3" , maxlength="3">
</td>
<td>
<input type="text" , class="admin-input" , name="acd_call_volume_warning_low" , value="50" , size="3" , maxlength="3">
</td>
<td>to</td>
<td style="padding:0 10px 0 0">
<input type="text" , class="admin-input" , name="acd_call_volume_warning_high" , value="100" , size="3" , maxlength="3">
</td>
<td>></td>
<td style="padding:0 10px 0 0">
<input type="text" , class="admin-input" , name="acd_call_volume_critical_low" , value="100" , size="3" , maxlength="3">
</td>
</tr>
<tr>
<td align="center" class="expand1">Hidden Row1</td>
<td class="expand1"><</td>
<td class="expand1">
<input type="text" , name="acd_call_volume_good_high_Hidden Row1" , value="50" , size="3" , maxlength="3">
</td>
<td class="expand1">
<input type="text" , name="acd_call_volume_warning_low_Hidden Row1" , value="50" , size="3" , maxlength="3">
</td>
<td class="expand1">to</td>
<td class="expand1">
<input type="text" , name="acd_call_volume_warning_high_Hidden Row1" , value="100" , size="3" , maxlength="3">
</td>
<td class="expand1">></td>
<td class="expand1">
<input type="text" , name="acd_call_volume_critical_low_Hidden Row1" , value="100" , size="3" , maxlength="3">
</td>
</tr>
<tr>
<td align="center" class="expand1">Hidden Row2</td>
<td class="expand1"><</td>
<td class="expand1">
<input type="text" , name="acd_call_volume_good_high_Hidden Row2" , value="50" , size="3" , maxlength="3">
</td>
<td class="expand1">
<input type="text" , name="acd_call_volume_warning_low_Hidden Row2" , value="50" , size="3" , maxlength="3">
</td>
<td class="expand1">to</td>
<td class="expand1">
<input type="text" , name="acd_call_volume_warning_high_Hidden Row2" , value="100" , size="3" , maxlength="3">
</td>
<td class="expand1">></td>
<td class="expand1">
<input type="text" , name="acd_call_volume_critical_low_Hidden Row2" , value="100" , size="3" , maxlength="3">
</td>
</tr>
<tr>
<td align="center" class="expand1">Hidden Row3</td>
<td class="expand1"><</td>
<td class="expand1">
<input type="text" , name="acd_call_volume_good_high_Hidden Row3" , value="50" , size="3" , maxlength="3">
</td>
<td class="expand1">
<input type="text" , name="acd_call_volume_warning_low_Hidden Row3" , value="50" , size="3" , maxlength="3">
</td>
<td class="expand1">to</td>
<td class="expand1">
<input type="text" , name="acd_call_volume_warning_high_Hidden Row3" , value="100" , size="3" , maxlength="3">
</td>
<td class="expand1">></td>
<td class="expand1">
<input type="text" , name="acd_call_volume_critical_low_Hidden Row3" , value="100" , size="3" , maxlength="3">
</td>
</tr>
<tr>
<td align="center" class="expand1">Hidden Row4</td>
<td class="expand1"><</td>
<td class="expand1">
<input type="text" , name="acd_call_volume_good_high_Hidden Row4" , value="50" , size="3" , maxlength="3">
</td>
<td class="expand1">
<input type="text" , name="acd_call_volume_warning_low_Hidden Row4" , value="50" , size="3" , maxlength="3">
</td>
<td class="expand1">to</td>
<td class="expand1">
<input type="text" , name="acd_call_volume_warning_high_Hidden Row4" , value="100" , size="3" , maxlength="3">
</td>
<td class="expand1">></td>
<td class="expand1">
<input type="text" , name="acd_call_volume_critical_low_Hidden Row4" , value="100" , size="3" , maxlength="3">
</td>
</tr>
<tr>
<td align="center" class="expand1">Hidden Row5</td>
<td class="expand1"><</td>
<td class="expand1">
<input type="text" , name="acd_call_volume_good_high_Hidden Row5" , value="50" , size="3" , maxlength="3">
</td>
<td class="expand1">
<input type="text" , name="acd_call_volume_warning_low_Hidden Row5" , value="50" , size="3" , maxlength="3">
</td>
<td class="expand1">to</td>
<td class="expand1">
<input type="text" , name="acd_call_volume_warning_high_Hidden Row5" , value="100" , size="3" , maxlength="3">
</td>
<td class="expand1">></td>
<td class="expand1">
<input type="text" , name="acd_call_volume_critical_low_Hidden Row5" , value="100" , size="3" , maxlength="3">
</td>
</tr>
<tr>
<td align="center" class="expand1">Hidden Row6</td>
<td class="expand1"><</td>
<td class="expand1">
<input type="text" , name="acd_call_volume_good_high_Hidden Row6" , value="50" , size="3" , maxlength="3">
</td>
<td class="expand1">
<input type="text" , name="acd_call_volume_warning_low_Hidden Row6" , value="50" , size="3" , maxlength="3">
</td>
<td class="expand1">to</td>
<td class="expand1">
<input type="text" , name="acd_call_volume_warning_high_Hidden Row6" , value="100" , size="3" , maxlength="3">
</td>
<td class="expand1">></td>
<td class="expand1">
<input type="text" , name="acd_call_volume_critical_low_Hidden Row6" , value="100" , size="3" , maxlength="3">
</td>
</tr>
<tr>
<td align="center" class="expand1">Hidden Row7</td>
<td class="expand1"><</td>
<td class="expand1">
<input type="text" , name="acd_call_volume_good_high_Hidden Row7" , value="50" , size="3" , maxlength="3">
</td>
<td class="expand1">
<input type="text" , name="acd_call_volume_warning_low_Hidden Row7" , value="50" , size="3" , maxlength="3">
</td>
<td class="expand1">to</td>
<td class="expand1">
<input type="text" , name="acd_call_volume_warning_high_Hidden Row7" , value="100" , size="3" , maxlength="3">
</td>
<td class="expand1">></td>
<td class="expand1">
<input type="text" , name="acd_call_volume_critical_low_Hidden Row7" , value="100" , size="3" , maxlength="3">
</td>
</tr>
<tr>
<td align="center" class="expand1">Hidden Row8</td>
<td class="expand1"><</td>
<td class="expand1">
<input type="text" , name="acd_call_volume_good_high_Hidden Row8" , value="50" , size="3" , maxlength="3">
</td>
<td class="expand1">
<input type="text" , name="acd_call_volume_warning_low_Hidden Row8" , value="50" , size="3" , maxlength="3">
</td>
<td class="expand1">to</td>
<td class="expand1">
<input type="text" , name="acd_call_volume_warning_high_Hidden Row8" , value="100" , size="3" , maxlength="3">
</td>
<td class="expand1">></td>
<td class="expand1">
<input type="text" , name="acd_call_volume_critical_low_Hidden Row8" , value="100" , size="3" , maxlength="3">
</td>
</tr>
<tr>
<td align="center" class="expand1">Hidden Row9</td>
<td class="expand1"><</td>
<td class="expand1">
<input type="text" , name="acd_call_volume_good_high_Hidden Row9" , value="50" , size="3" , maxlength="3">
</td>
<td class="expand1">
<input type="text" , name="acd_call_volume_warning_low_Hidden Row9" , value="50" , size="3" , maxlength="3">
</td>
<td class="expand1">to</td>
<td class="expand1">
<input type="text" , name="acd_call_volume_warning_high_Hidden Row9" , value="100" , size="3" , maxlength="3">
</td>
<td class="expand1">></td>
<td class="expand1">
<input type="text" , name="acd_call_volume_critical_low_Hidden Row9" , value="100" , size="3" , maxlength="3">
</td>
</tr>
<tr>
<td align="center" class="expand1">Hidden Row10</td>
<td class="expand1"><</td>
<td class="expand1">
<input type="text" , name="acd_call_volume_good_high_Hidden Row10" , value="50" , size="3" , maxlength="3">
</td>
<td class="expand1">
<input type="text" , name="acd_call_volume_warning_low_Hidden Row10" , value="50" , size="3" , maxlength="3">
</td>
<td class="expand1">to</td>
<td class="expand1">
<input type="text" , name="acd_call_volume_warning_high_Hidden Row10" , value="100" , size="3" , maxlength="3">
</td>
<td class="expand1">></td>
<td class="expand1">
<input type="text" , name="acd_call_volume_critical_low_Hidden Row10" , value="100" , size="3" , maxlength="3">
</td>
</tr>
</table>
<input type="submit" name="submitButton" value="Submit" id="button1" style="height:50px; width:100px" />
</div>
<div style="float:left; width:50%">
<table id="t03" class="table3">
<tr>
<th style="padding:0 30px 0 0;"></th>
<th></th>
<th style="padding:0 10px 0 0;">Green</th>
<th colspan="3" style="padding:0 10px 0 0">Yellow</th>
<th></th>
<th style="padding:0 10px 0 0">Red</th>
</tr>
<tr>
<td class="btn2" style="padding:0 30px 0 0;"><b>Collapsible Row1</b>
</td>
<td><</td>
<td style="padding:0 10px 0 0">
<input type="text" , class="admin-input" , name="acd_call_volume_good_high" , value="50" , size="3" , maxlength="3">
</td>
<td>
<input type="text" , class="admin-input" , name="acd_call_volume_warning_low" , value="50" , size="3" , maxlength="3">
</td>
<td>to</td>
<td style="padding:0 10px 0 0">
<input type="text" , class="admin-input" , name="acd_call_volume_warning_high" , value="100" , size="3" , maxlength="3">
</td>
<td>></td>
<td style="padding:0 10px 0 0">
<input type="text" , class="admin-input" , name="acd_call_volume_critical_low" , value="100" , size="3" , maxlength="3">
</td>
</tr>
<tr>
<td align="center" class="expand2">Hidden Row1</td>
<td class="expand2"><</td>
<td class="expand2">
<input type="text" , name="acd_call_volume_good_high_Hidden Row1" , value="50" , size="3" , maxlength="3">
</td>
<td class="expand2">
<input type="text" , name="acd_call_volume_warning_low_Hidden Row1" , value="50" , size="3" , maxlength="3">
</td>
<td class="expand2">to</td>
<td class="expand2">
<input type="text" , name="acd_call_volume_warning_high_Hidden Row1" , value="100" , size="3" , maxlength="3">
</td>
<td class="expand2">></td>
<td class="expand2">
<input type="text" , name="acd_call_volume_critical_low_Hidden Row1" , value="100" , size="3" , maxlength="3">
</td>
</tr>
<tr>
<td align="center" class="expand2">Hidden Row2</td>
<td class="expand2"><</td>
<td class="expand2">
<input type="text" , name="acd_call_volume_good_high_Hidden Row2" , value="50" , size="3" , maxlength="3">
</td>
<td class="expand2">
<input type="text" , name="acd_call_volume_warning_low_Hidden Row2" , value="50" , size="3" , maxlength="3">
</td>
<td class="expand2">to</td>
<td class="expand2">
<input type="text" , name="acd_call_volume_warning_high_Hidden Row2" , value="100" , size="3" , maxlength="3">
</td>
<td class="expand2">></td>
<td class="expand2">
<input type="text" , name="acd_call_volume_critical_low_Hidden Row2" , value="100" , size="3" , maxlength="3">
</td>
</tr>
<tr>
<td align="center" class="expand2">Hidden Row3</td>
<td class="expand2"><</td>
<td class="expand2">
<input type="text" , name="acd_call_volume_good_high_Hidden Row3" , value="50" , size="3" , maxlength="3">
</td>
<td class="expand2">
<input type="text" , name="acd_call_volume_warning_low_Hidden Row3" , value="50" , size="3" , maxlength="3">
</td>
<td class="expand2">to</td>
<td class="expand2">
<input type="text" , name="acd_call_volume_warning_high_Hidden Row3" , value="100" , size="3" , maxlength="3">
</td>
<td class="expand2">></td>
<td class="expand2">
<input type="text" , name="acd_call_volume_critical_low_Hidden Row3" , value="100" , size="3" , maxlength="3">
</td>
</tr>
<tr>
<td align="center" class="expand2">Hidden Row4</td>
<td class="expand2"><</td>
<td class="expand2">
<input type="text" , name="acd_call_volume_good_high_Hidden Row4" , value="50" , size="3" , maxlength="3">
</td>
<td class="expand2">
<input type="text" , name="acd_call_volume_warning_low_Hidden Row4" , value="50" , size="3" , maxlength="3">
</td>
<td class="expand2">to</td>
<td class="expand2">
<input type="text" , name="acd_call_volume_warning_high_Hidden Row4" , value="100" , size="3" , maxlength="3">
</td>
<td class="expand2">></td>
<td class="expand2">
<input type="text" , name="acd_call_volume_critical_low_Hidden Row4" , value="100" , size="3" , maxlength="3">
</td>
</tr>
<tr>
<td align="center" class="expand2">Hidden Row5</td>
<td class="expand2"><</td>
<td class="expand2">
<input type="text" , name="acd_call_volume_good_high_Hidden Row5" , value="50" , size="3" , maxlength="3">
</td>
<td class="expand2">
<input type="text" , name="acd_call_volume_warning_low_Hidden Row5" , value="50" , size="3" , maxlength="3">
</td>
<td class="expand2">to</td>
<td class="expand2">
<input type="text" , name="acd_call_volume_warning_high_Hidden Row5" , value="100" , size="3" , maxlength="3">
</td>
<td class="expand2">></td>
<td class="expand2">
<input type="text" , name="acd_call_volume_critical_low_Hidden Row5" , value="100" , size="3" , maxlength="3">
</td>
</tr>
<tr>
<td align="center" class="expand2">Hidden Row6</td>
<td class="expand2"><</td>
<td class="expand2">
<input type="text" , name="acd_call_volume_good_high_Hidden Row6" , value="50" , size="3" , maxlength="3">
</td>
<td class="expand2">
<input type="text" , name="acd_call_volume_warning_low_Hidden Row6" , value="50" , size="3" , maxlength="3">
</td>
<td class="expand2">to</td>
<td class="expand2">
<input type="text" , name="acd_call_volume_warning_high_Hidden Row6" , value="100" , size="3" , maxlength="3">
</td>
<td class="expand2">></td>
<td class="expand2">
<input type="text" , name="acd_call_volume_critical_low_Hidden Row6" , value="100" , size="3" , maxlength="3">
</td>
</tr>
<tr>
<td align="center" class="expand2">Hidden Row7</td>
<td class="expand2"><</td>
<td class="expand2">
<input type="text" , name="acd_call_volume_good_high_Hidden Row7" , value="50" , size="3" , maxlength="3">
</td>
<td class="expand2">
<input type="text" , name="acd_call_volume_warning_low_Hidden Row7" , value="50" , size="3" , maxlength="3">
</td>
<td class="expand2">to</td>
<td class="expand2">
<input type="text" , name="acd_call_volume_warning_high_Hidden Row7" , value="100" , size="3" , maxlength="3">
</td>
<td class="expand2">></td>
<td class="expand2">
<input type="text" , name="acd_call_volume_critical_low_Hidden Row7" , value="100" , size="3" , maxlength="3">
</td>
</tr>
<tr>
<td align="center" class="expand2">Hidden Row8</td>
<td class="expand2"><</td>
<td class="expand2">
<input type="text" , name="acd_call_volume_good_high_Hidden Row8" , value="50" , size="3" , maxlength="3">
</td>
<td class="expand2">
<input type="text" , name="acd_call_volume_warning_low_Hidden Row8" , value="50" , size="3" , maxlength="3">
</td>
<td class="expand2">to</td>
<td class="expand2">
<input type="text" , name="acd_call_volume_warning_high_Hidden Row8" , value="100" , size="3" , maxlength="3">
</td>
<td class="expand2">></td>
<td class="expand2">
<input type="text" , name="acd_call_volume_critical_low_Hidden Row8" , value="100" , size="3" , maxlength="3">
</td>
</tr>
<tr>
<td align="center" class="expand2">Hidden Row9</td>
<td class="expand2"><</td>
<td class="expand2">
<input type="text" , name="acd_call_volume_good_high_Hidden Row9" , value="50" , size="3" , maxlength="3">
</td>
<td class="expand2">
<input type="text" , name="acd_call_volume_warning_low_Hidden Row9" , value="50" , size="3" , maxlength="3">
</td>
<td class="expand2">to</td>
<td class="expand2">
<input type="text" , name="acd_call_volume_warning_high_Hidden Row9" , value="100" , size="3" , maxlength="3">
</td>
<td class="expand2">></td>
<td class="expand2">
<input type="text" , name="acd_call_volume_critical_low_Hidden Row9" , value="100" , size="3" , maxlength="3">
</td>
</tr>
<tr>
<td align="center" class="expand2">Hidden Row10</td>
<td class="expand2"><</td>
<td class="expand2">
<input type="text" , name="acd_call_volume_good_high_Hidden Row10" , value="50" , size="3" , maxlength="3">
</td>
<td class="expand2">
<input type="text" , name="acd_call_volume_warning_low_Hidden Row10" , value="50" , size="3" , maxlength="3">
</td>
<td class="expand2">to</td>
<td class="expand2">
<input type="text" , name="acd_call_volume_warning_high_Hidden Row10" , value="100" , size="3" , maxlength="3">
</td>
<td class="expand2">></td>
<td class="expand2">
<input type="text" , name="acd_call_volume_critical_low_Hidden Row10" , value="100" , size="3" , maxlength="3">
</td>
</tr>
</table>
</div>
</form>
謝謝ian_sawyer，威廉·奧斯汀和A. R.威廉和奧斯汀，無論你的建議的工作非常適合我。 ian_sawyer，當我嘗試你的建議，按鈕水平移動，所以我不能使用它。 – 300