将输入转换为变量并在计算中使用它

时间:2016-03-31 00:16:30

标签: javascript

我有一个计算输入值的表格...... 我为一些变量创建了一个输入,并希望在计算中使用它们。 但我不知道该怎么做 它是函数计算...如所见#res1a我想要硬数字(16,9,25和15)是我输入var1,2,3和&的变量。 4

这是我的例子

<!DOCTYPE html/>
<html>

<head></head>

<body>
  <style type="text/css">
    .tg {
      border-collapse: collapse;
      border-spacing: 0;
      border-color: #aabcfe;
    }
    .tg td {
      font-family: Arial, sans-serif;
      font-size: 14px;
      padding: 10px 5px;
      border-style: solid;
      border-width: 1px;
      overflow: hidden;
      word-break: normal;
      border-color: #aabcfe;
      color: #669;
      background-color: #e8edff;
    }
    .tg th {
      font-family: Arial, sans-serif;
      font-size: 14px;
      font-weight: normal;
      padding: 10px 5px;
      border-style: solid;
      border-width: 1px;
      overflow: hidden;
      word-break: normal;
      border-color: #aabcfe;
      color: #039;
      background-color: #b9c9fe;
    }
    .tg .tg-baqh {
      text-align: center;
      vertical-align: top
    }
    .tg .tg-mb3i {
      background-color: #D2E4FC;
      text-align: right;
      vertical-align: top
    }
    .tg .tg-lqy6 {
      text-align: right;
      vertical-align: top
    }
    .tg .tg-6k2t {
      background-color: #D2E4FC;
      vertical-align: top
    }
    .tg .tg-yw4l {
      vertical-align: top
    }
    input[ID=res1],
    textarea {
      background-color: #e8edff;
    }
    input[ID=res1a],
    textarea {
      background-color: #e8edff;
    }
    .vis1 {
      visibility: visible
    }
    .vis2 {
      visibility: hidden
    }
  </style>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
  <script type="text/javascript">
    $(function checkbox() {
      $('#checkbox1, #checkbox2, #checkbox3, #checkbox4, #checkbox5, #checkbox6, #checkbox7, #checkbox8, #checkbox9, #checkbox10').change(function() {
        var row = $(this).closest('tr').next();

        if (!this.checked)
          row.fadeOut('Fast');
        else
          row.fadeIn('fast');

      }).change();
    });
  </script>
  <!--hide and show SBinfo-->
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
  <script>
    $(document).ready(function disapear() {
      $("button").click(function reapear() {
        $("#res1a, #res2a, #res3a, #res4a, #res5a, #res6a, #res7a, #res8a, #res9a, #res10a").toggle();
      });
    });
  </script>
  <button id="hide sbinfo" VALUE="SBInfo" onclick="toggleDisplay();">
    SBinfo
  </button>

  <button id="refreshpage" VALUE="refresh" onclick="history.go(0)">
    refresh
  </button>
  <table class="tg">

    <tr id="row20">
      <td style="width:90px " class="tg-6k2t">A:</td>
      <td style="width:90px " class="tg-6k2t">B:</td>
      <td style="width:90px " class="tg-6k2t">C:</td>
      <td style="width:90px " class="tg-6k2t">D:</td>
      <td style="width:90px " class="tg-6k2t">E:</td>
      <td style="width:90px " class="tg-6k2t">F:</td>
      <td style="width:90px " class="tg-6k2t">G:</td>
      <td style="width:90px " class="tg-6k2t">H:</td>
      <td style="width:90px " class="tg-6k2t">I:</td>
      <td style="width:90px " class="tg-6k2t">J:</td>
    </tr>

    <tr id="row1">
      <td class="tg-baqh" style="height: 59px">
        <input type="checkbox" id="checkbox1">1<sup>st</sup> Row
        <br>
        <input id="res1" style="border-style: none; border-color: inherit; border-width: medium; width: 40px; height: 14px;" readonly="readonly">
        <input id="res1a" style="display:none; border-style: none; border-color: inherit; border-width: medium; width: 40px; height: 14px;" readonly="readonly">
        <td class="tg-lqy6" style="height: 59px">
          <input id="b1" type="text" name="txt" style="width:90px;">
        </td>
        <td class="tg-lqy6" style="height: 59px">
          <input id="c1" type="text" name="txt" style="width:90px;">
        </td>
        <td class="tg-lqy6" style="height: 59px">
          <input id="d1" type="text" name="txt" style="width:90px;">
        </td>
        <td class="tg-lqy6" style="height: 59px">
          <input id="e1" type="text" name="txt" style="width:90px;">
        </td>
        <td class="tg-lqy6" style="height: 59px">
          <input id="f1" type="text" name="txt" style="width:90px;">
        </td>
        <td class="tg-lqy6" style="height: 59px">
          <input id="g1" type="text" name="txt" style="width:90px;">
        </td>
        <td class="tg-lqy6" style="height: 59px">
          <input id="h1" type="text" name="txt" style="width:90px;">
        </td>
        <td class="tg-lqy6" style="height: 59px">
          <input id="i1" type="text" name="txt" style="width:90px;">
        </td>
        <td class="tg-lqy6" style="height: 59px">
          <input id="j1" type="text" name="txt" style="width:90px;">
        </td>
    </tr>

  </table>
  <div id="layer1" style="position: absolute; width: 151px; height: 376px; z-index: 1; left: 1114px; top: 109px">
    <table class="1stinput">
      <tr>
        <th style="height: 23px; width: 30px;">var1</th>
        <th style="height: 23px">var2</th>
        <th style="height: 23px">var3</th>
        <th style="height: 23px">var4</th>
      </tr>
      <tr>
        <td>
          <input class="2ndinput" id="z1" type="text" name="txt" style="width: 30px">
        </td>
        <td>
          <input class="2ndinput" id="z2" type="text" name="txt" style="width: 30px">
        </td>
        <td>
          <input class="2ndinput" id="z3" type="text" name="txt" style="width: 30px">
        </td>
        <td>
          <input class="2ndinput" id="z4" type="text" name="txt" style="width: 30px">
        </td>
      </tr>
    </table>

    <script type="text/javascript">
      $(document).ready(function() {
        $('#b1').keyup(calculate);
        $('#c1').keyup(calculate);
        $('#d1').keyup(calculate);
        $('#e1').keyup(calculate);
        $('#f1').keyup(calculate);
        $('#g1').keyup(calculate);
        $('#h1').keyup(calculate);
        $('#i1').keyup(calculate);
        $('#j1').keyup(calculate);
      });

      function calculate(e) {
        $('#res1').val(
          ($('#b1').val() * $('#c1').val()) +
          ($('#d1').val() * $('#e1').val()) +
          ($('#f1').val() * $('#g1').val()) -
          ($('#b1').val() * $('#j1').val()) +
          ($('#i1').val() - $('#h1').val()) * $('#b1').val());


        $('#res1a').val(
          ($('#b1').val() * (16 + 9 - $('#c1').val()) +
            ($('#d1').val() * (25 - $('#e1').val())) +
            ($('#f1').val() * (15 - $('#g1').val())) +
            ($('#i1').val() - $('#h1').val()) * $('#b1').val()));
      }
    </script>

</body>

</html>

0 个答案:

没有答案