将输入框中的值乘以表格中的固定值 (HTML)

【问题标题】：Multiply value from input box to a fixed value in a table (HTML)将输入框中的值乘以表格中的固定值 (HTML)
【发布时间】：2016-12-31 21:57:55
【问题描述】：

我正在尝试创建一个表，其中行中第一个单元格的值将乘以表中第二个单元格的值（同一行）。

当我有两个输入框时，我完成了这项工作。但是当我有一个输入框和一个固定值时它不起作用。这是有效的 sn-p ：

 $(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>

【问题讨论】：

  • 你应该使用 text() 而不是 val() var $val2 = $('.val2', this).text();

标签： javascript jquery html multiplication


【解决方案1】：

您应该在 javascript 代码中使用 text() 而不是 val()，因为不再有输入字段，因此不存在相同的值。

使用var $val2 = $('.odds', this).text(); 而不是var $val2 = $('.val2', this).val();

如果子元素在标签内是动态的，并且可以两者都是

&lt;td class="odds"&gt;&lt;input class="val2"/&gt;&lt;/td&gt; 或 &lt;td class="odds"&gt;2.2&lt;/td&gt;

你可以试试这个来获取正确的值

var val2 = $('.odds .val2')?$('.odds .val2').val():$('.odds').text();

【讨论】：

    【解决方案2】：

    只需使用text() 而不是val()。

    val() 仅用于具有value 属性的表单控件

    【讨论】：

      【解决方案3】：

      如果元素可以是输入或跨度，并且您需要同时处理两者，则可以针对 undefined 测试该值：

      var $val2 = $('.val2', this).val();
if ($val2 === undefined)
   $val2 = $('.val2', this).text();

      例子：

      $(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();
      if ($val2 === undefined)
        $val2 = $('.val2', this).text();
      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://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<table>
    <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>
    <tr id="Memory2" 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>
    </tbody>
</table>

      【讨论】：

        猜你喜欢
        • 1970-01-01
        • 2012-05-16
        • 2012-08-01
        • 2021-01-08
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 2011-05-07
        相关资源
        最近更新 更多
        热门标签
        Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode