我正在尝试创建一个表格,其中行中第一个单元格的值将乘以表格第二个单元格(同一行)的值。
当我有两个输入框时,我完成了这项工作。但当我只有一个输入框和一个固定值时,它不起作用。这是有效的代码片段:
$(document).ready(function () {
$(".txtMult input").keyup(multInputs);
function multInputs() {
var mult = 0;
$("tr.txtMult").each(function () {
var $val1 = $('.val1', this).val();
var $val2 = $('.val2', this).val();
var $total = ($val1 * 1) * ($val2 * 1) - ($val1 * 1)
$('.multTotal',this).text($total.toPrecision(2));
mult += $total;
});
$("#grandTotal").text(mult);
}
});
h1{
font-size: 30px;
color: #fff;
text-transform: uppercase;
font-weight: 300;
text-align: center;
margin-bottom: 15px;
}
table{
width:100%;
table-layout: fixed;
}
.tbl-header{
background-color: rgba(255,255,255,0.3);
}
.tbl-content{
height:300px;
overflow-x:auto;
margin-top: 0px;
border: 1px solid rgba(255,255,255,0.3);
}
th{
padding: 20px 15px;
text-align: left;
font-weight: 500;
font-size: 12px;
color: #fff;
text-transform: uppercase;
}
td{
padding: 15px;
text-align: left;
vertical-align:middle;
font-weight: 300;
font-size: 12px;
color: #fff;
border-bottom: solid 1px rgba(255,255,255,0.1);
}
/* demo styles */
@import url(http://fonts.googleapis.com/css?family=Roboto:400,500,300,700);
body{
background: #fb887c;
font-family: 'Roboto', sans-serif;
}
section{
margin: 50px;
}
*,
*:after,
*::before {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.ac-custom {
padding: 0 1em;
max-width: 900px;
margin: 0 auto;
}
.ac-custom h2 {
font-size: 1em;
font-weight: 300;
padding: 0 0 0.5em;
margin: 0 0 30px;
color:#000;
}
.ac-custom ul,
.ac-custom ol {
list-style: none;
padding: 0;
margin: 0 auto;
max-width: 800px;
}
.ac-custom li {
margin: 0 auto;
padding: 0.5em 0;
position: relative;
}
.ac-custom label {
display: inline-block;
position: relative;
font-size: 1em;
padding: 0 0 0 80px;
vertical-align: top;
color: #000;
cursor: pointer;
-webkit-transition: color 0.3s;
transition: color 0.3s;
}
.ac-custom input[type="checkbox"],
.ac-custom input[type="radio"],
.ac-custom label::before {
width: 20px;
height: 20px;
top: 50%;
left: 0;
margin-top: -12px;
position: absolute;
cursor: pointer;
}
.ac-custom input[type="checkbox"],
.ac-custom input[type="radio"] {
opacity: 0;
-webkit-appearance: none;
display: inline-block;
vertical-align: middle;
z-index: 100;
}
.ac-custom label::before {
content: '';
border: 1px solid #000;
-webkit-transition: opacity 0.3s;
transition: opacity 0.3s;
}
.ac-radio label::before {
border-radius: 50%;
}
.ac-custom input[type="checkbox"]:checked + label,
.ac-custom input[type="radio"]:checked + label {
color: #fff;
}
.ac-custom input[type="checkbox"]:checked + label::before,
.ac-custom input[type="radio"]:checked + label::before {
opacity: 0.8;
}
/* General SVG and path styles */
.ac-custom svg {
position: absolute;
width: 20px;
height: 20px;
top: 50%;
margin-top: -12px;
left: 0px;
pointer-events: none;
}
.ac-custom svg path {
stroke: #fdfcd3;
stroke-width: 13px;
stroke-linecap: round;
stroke-linejoin: round;
fill: none;
}
/* Specific input, SVG and path styles */
/* Circle */
.ac-circle input[type="checkbox"],
.ac-circle input[type="radio"],
.ac-circle label::before {
width: 30px;
height: 30px;
margin-top: -15px;
left: 10px;
position: absolute;
}
.ac-circle label::before {
background-color: #fff;
border: none;
}
.ac-circle svg {
width: 70px;
height: 70px;
margin-top: -35px;
left: -10px;
}
.ac-circle svg path {
stroke-width: 5px;
}
/* Box Fill */
.ac-boxfill svg path {
stroke-width: 8px;
}
/* Swirl */
.ac-swirl svg path {
stroke-width: 8px;
}
/* List */
.ac-list ol {
list-style: decimal;
list-style-position: inside;
}
.ac-list ol li {
font-size: 2em;
padding: 1em 1em 0 2em;
text-indent: -40px;
}
.ac-list ol li label {
font-size: 0.5em;
text-indent: 0;
padding-left: 30px;
}
.ac-list label::before {
display: none;
}
.ac-list svg {
width: 100%;
height: 80px;
left: 0;
top: 1.2em;
margin-top: 0px;
}
.ac-list svg path {
stroke-width: 4px;
}
.row {
margin-left: -15px;
margin-right: -15px;
}
.col-sm-4 {
position: relative;
min-height: 1px;
padding-left: 15px;
padding-right: 15px;
padding-bottom: 30px;
}
@media (min-width: 768px) {
.col-sm-4 {
float: left;
}
.col-sm-4 {
width: 33.33333333%;
}
.filter-columns {
background-color:#fdb5ad;
}
.filter-columns-alt {
background-color:#fecbc6;
}
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<tbody>
<tr id="Memory1" class="part_detail txtMult">
<td class="stake"><input class="val1"/></td>
<td class="odds"><input class="val2"/></td>
<td class="profit"><span class="multTotal">0.00</span></td>
</tr>
</tbody>
当我将 HTML 更改为:
<tbody>
<tr id="Memory1" class="part_detail txtMult">
<td class="stake"><input class="val1"/></td>
<td class="odds">2.2</td>
<td class="profit"><span class="multTotal">0.00</span></td>
</tr>
最佳答案
您应该在 JavaScript 代码中使用 text() 而不是 val(),因为不再有输入字段,因此不存在相同的值。
使用var $val2 = $('.odds', this).text();
而不是var $val2 = $('.val2', this).val();
如果子元素在标签内是动态的并且可以是两者
<td class="odds"><input class="val2"/></td>
或<td class="odds">2.2</td>
您可以尝试此方法来获取正确的值
var val2 = $('.odds .val2')?$('.odds .val2').val():$('.odds').text();
关于javascript - 将输入框中的值乘以表中的固定值 (HTML),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41411971/