我有一个计算输入值的表格...... 我为一些变量创建了一个输入,并希望在计算中使用它们。 但我不知道该怎么做 它是函数计算...如所见#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>