0
Я пытаюсь создать таблицу, в которой значение из первой ячейки в строке будет умножаться на значение второй ячейки таблицы (той же строки).Значение умножения из поля ввода в фиксированное значение в таблице (HTML)
Я сделал эту работу, когда у меня есть два ввода. Но это не работает, когда у меня есть один поле ввода и одно фиксированное значение. Вот фрагмент кода, который работает:
$(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 {
\t padding: 0 1em;
\t max-width: 900px;
\t margin: 0 auto;
}
.ac-custom h2 {
\t font-size: 1em;
\t font-weight: 300;
\t padding: 0 0 0.5em;
\t margin: 0 0 30px;
\t color:#000;
}
.ac-custom ul,
.ac-custom ol {
\t list-style: none;
\t padding: 0;
\t margin: 0 auto;
\t max-width: 800px;
}
.ac-custom li {
\t margin: 0 auto;
\t padding: 0.5em 0;
\t position: relative;
}
.ac-custom label {
\t display: inline-block;
\t position: relative;
\t font-size: 1em;
\t padding: 0 0 0 80px;
\t vertical-align: top;
\t color: #000;
\t cursor: pointer;
\t -webkit-transition: color 0.3s;
\t transition: color 0.3s;
}
.ac-custom input[type="checkbox"],
.ac-custom input[type="radio"],
.ac-custom label::before {
\t width: 20px;
\t height: 20px;
\t top: 50%;
\t left: 0;
\t margin-top: -12px;
\t position: absolute;
\t cursor: pointer;
}
.ac-custom input[type="checkbox"],
.ac-custom input[type="radio"] {
\t opacity: 0;
\t -webkit-appearance: none;
\t display: inline-block;
\t vertical-align: middle;
\t z-index: 100;
}
.ac-custom label::before {
\t content: '';
\t border: 1px solid #000;
\t -webkit-transition: opacity 0.3s;
\t transition: opacity 0.3s;
}
.ac-radio label::before {
\t border-radius: 50%;
}
.ac-custom input[type="checkbox"]:checked + label,
.ac-custom input[type="radio"]:checked + label {
\t color: #fff;
}
.ac-custom input[type="checkbox"]:checked + label::before,
.ac-custom input[type="radio"]:checked + label::before {
\t opacity: 0.8;
}
/* General SVG and path styles */
.ac-custom svg {
\t position: absolute;
\t width: 20px;
\t height: 20px;
\t top: 50%;
\t margin-top: -12px;
\t left: 0px;
\t pointer-events: none;
}
.ac-custom svg path {
\t stroke: #fdfcd3;
\t stroke-width: 13px;
\t stroke-linecap: round;
\t stroke-linejoin: round;
\t fill: none;
}
/* Specific input, SVG and path styles */
/* Circle */
.ac-circle input[type="checkbox"],
.ac-circle input[type="radio"],
.ac-circle label::before {
\t width: 30px;
\t height: 30px;
\t margin-top: -15px;
\t left: 10px;
\t position: absolute;
}
.ac-circle label::before {
\t background-color: #fff;
\t border: none;
}
.ac-circle svg {
\t width: 70px;
\t height: 70px;
\t margin-top: -35px;
\t left: -10px;
}
.ac-circle svg path {
\t stroke-width: 5px;
}
/* Box Fill */
.ac-boxfill svg path {
\t stroke-width: 8px;
}
/* Swirl */
.ac-swirl svg path {
\t stroke-width: 8px;
}
/* List */
.ac-list ol {
\t list-style: decimal;
\t list-style-position: inside;
}
.ac-list ol li {
\t font-size: 2em;
\t padding: 1em 1em 0 2em;
\t text-indent: -40px;
}
.ac-list ol li label {
\t font-size: 0.5em;
\t text-indent: 0;
\t padding-left: 30px;
}
.ac-list label::before {
\t display: none;
}
.ac-list svg {
\t width: 100%;
\t height: 80px;
\t left: 0;
\t top: 1.2em;
\t margin-top: 0px;
}
.ac-list svg path {
\t 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 {
\t background-color:#fdb5ad;
}
.filter-columns-alt {
\t 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>
\t \t \t <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>
вы должны использовать текст() вместо of val() 'var $ val2 = $ ('. val2', this) .text();' –