javascript - HTML 如何相对于两个 div 定位一个按钮？

标签 javascript jquery html css

我有两个表格，我将它们放在两个 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>&lt</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>&gt</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">&lt</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">&gt</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">&lt</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">&gt</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">&lt</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">&gt</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">&lt</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">&gt</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">&lt</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">&gt</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">&lt</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">&gt</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">&lt</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">&gt</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">&lt</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">&gt</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">&lt</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">&gt</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">&lt</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">&gt</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>&lt</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>&gt</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">&lt</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">&gt</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">&lt</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">&gt</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">&lt</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">&gt</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">&lt</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">&gt</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">&lt</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">&gt</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">&lt</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">&gt</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">&lt</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">&gt</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">&lt</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">&gt</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">&lt</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">&gt</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">&lt</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">&gt</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>

View on JSFiddle

最佳答案

您可以将您的提交按钮移到您的 html 代码底部并添加清除属性以重置 float 。

像这样...

        ...
        <div style="width:100%;clear:both">
            <input type="submit" name="submitButton" value="Submit" id="button1" style="height:50px; width:100px"/>
        </div>
    </form>
</body>

在这里 fiddle :https://jsfiddle.net/naL11ram/4/

关于javascript - HTML 如何相对于两个 div 定位一个按钮？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/33837303/

上一篇：javascript - 是否可以仅使用 JavaScript 而无需使用 HTML 将动态链接插入到电子邮件中？ (使用Google脚本发送电子邮件)

下一篇：jquery - 替换类中字符串中的文本+通配符数字

相关文章：

javascript - 使用 JavaScript 引用 CSS 类

javascript - 在 RaphaelJS 元素中添加 HTML

javascript - JQuery 代码在 Joomla 安装上不起作用

javascript - 谷歌地图 APIs v3 和 IE 6

Javascript : Get word after specific word?

javascript - JQuery 检查一个复选框是否被选中只检查工作 onload

javascript - JQuery UI - .resizable 不工作

javascript - 如何在javascript中找到最近的最高千位

javascript - qq.FileUploader 在 AJAX 弹出窗口中加载时不起作用

html - 处理具有相同名称的 CSS 类

©2024 IT工具网  联系我们