我有这个添加按钮，可以在表中添加行。我有一列显示所选元素的价格。但是在添加新行之后，我想在“单价”列和“总计”列中显示所选项目的价格。
我试图将值存储在数组中，但是单价部分和总计部分未显示我想要的内容。
HTML
<div class="container">
<div class="table-wrapper">
<div class="table-title">
<div class="row">
<h2><u>Select <b>Products</b></h2></u>
<div class="col-sm-6 col-lg-12">
<button type="button" class="btn btn-success add-new pull-right"><i class="fa fa-plus"></i> Add New</button>
</div>
</div>
</div>
<form action="">
<div class="table-responsive">
<table class="table table-bordered">
<thead>
<tr>
<th>P N</th>
<th>H.C</th>
<th>So</th>
<th>Qt</th>
<th>Unit Price ₹ Per kg</th>
<th>Total ₹</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<div class="dropdown">
<select id="myInput " class="browser-default custom-select form-control">
<option selected>Open this select menu</option>
<option value="one">One</option>
<option value="two">Two</option>
<option value="three">Three</option>
</select>
</div>
<button class="btn pull-right" onclick="myFunction()" type="button">See Price</button>
</td>
<td>
<Auto Generated>
</td>
<td>
<div class="dropdown ">
<select class=" browser-default custom-select form-control ">
<option selected>Open this select menu</option>
<option value="p1 ">Water</option>
<option value="p2 ">Oil </option>
</select>
</div>
</td>
<td><input class="form-control" id="myQty" type="number" value="" defauft="0"></td>
<td>
<p id="price ">₹ 00/kg</p>
</td>
<td>
<p id="total" value="">₹ 00/Kg</p>
</td>
<td>
<a class="add " title="Add " data-toggle="tooltip "><i class="material-icons "></i></a>
<a class="delete " title="Delete " data-toggle="tooltip "><i class="material-icons "></i></a>
</td>
</tr>
</tbody>
</table>
</div>
<div>
<a href="thanks.html "><button class="btn btn--radius-2 btn-warning sp pull-right " type="button ">Place Order <i class="fa fa-angle-double-right "></i></button></a>
</div>
</form>
</div>
</div>
JavaScript
function myFunction() {
var text;
var price = document.getElementById("myInput ");
var strProducts = price.options[price.selectedIndex].text;
switch (strProducts) {
case "One":
text = 500;
break;
case "Two":
text = 400;
break;
case "Three":
text = 300;
break;
default:
text = 00;
}
document.getElementById("price ").innerHTML = text;
var number = document.getElementById("myQty").value;
if (number == "") {
var totall = 1 * text;
} else {
var totall = number * text;
}
document.getElementById("total").innerHTML = totall;
}
答案 0 :(得分：0)
以下是您查询的解决方案：
您在为输入var选择错误的元素时犯了错误，该元素应该是数字类型而不是type = text
var input = $(this).parents("tr").find('input[type="number"]');
// Add row on add button click
$(document).on("click", ".add", function() {
var empty = false;
var input = $(this).parents("tr").find('input[type="number"]');
input.each(function() {
if (!$(this).val()) {
$(this).addClass("error");
empty = true;
} else {
$(this).removeClass("error");
}
});
$(this).parents("tr").find(".error").first().focus();
if (!empty) {
console.log(input.length);
input.each(function(index,value) {
$(this).parent("td").html($(this).val());
});
$(this).parents("tr").find(".add, .edit").toggle();
$(".add-new").removeAttr("disabled");
}
});
// Edit row on edit button click
$(document).on("click", ".edit", function() {
$(this).parents("tr").find(".add, .edit").toggle();
$(".add-new").attr("disabled", "disabled");
});
// Delete row on delete button click
$(document).on("click", ".delete", function() {
$(this).parents("tr").remove();
$(".add-new").removeAttr("disabled");
});
function myFunction() {
var text;
var price = document.getElementById("myInput ");
var strProducts = price.options[price.selectedIndex].text;
switch (strProducts) {
case "One":
text = 500;
break;
case "Two":
text = 400;
break;
case "Three":
text = 300;
break;
default:
text = 00;
}
document.getElementById("price").innerHTML = text;
var number = document.getElementById("myQty").value;
if (number == "") {
var totall = 1 * text;
} else {
var totall = number * text;
}
document.getElementById("total").innerHTML = totall;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
<div class="table-wrapper">
<div class="table-title">
<div class="row">
<h2><u>Select <b>Products</b></h2></u>
<div class="col-sm-6 col-lg-12">
<button type="button" class="btn btn-success add-new pull-right"><i class="fa fa-plus"></i> Add New</button>
</div>
</div>
</div>
<form action="">
<div class="table-responsive">
<table class="table table-bordered">
<thead>
<tr>
<th>P N</th>
<th>H.C</th>
<th>So</th>
<th>Qt</th>
<th>Unit Price ₹ Per kg</th>
<th>Total ₹</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<div class="dropdown">
<select id="myInput " class="browser-default custom-select form-control">
<option selected>Open this select menu</option>
<option value="one">One</option>
<option value="two">Two</option>
<option value="three">Three</option>
</select>
</div>
<button class="btn pull-right" onclick="myFunction()" type="button">See Price</button>
</td>
<td>
<Auto Generated>
</td>
<td>
<div class="dropdown ">
<select class=" browser-default custom-select form-control ">
<option selected>Open this select menu</option>
<option value="p1 ">Water</option>
<option value="p2 ">Oil </option>
</select>
</div>
</td>
<td><input class="form-control" id="myQty" type="number" value="" defauft="0"></td>
<td>
<p id="price">₹ 00/kg</p>
</td>
<td>
<p id="total" value="">₹ 00/Kg</p>
</td>
<td>
<a class="add " title="Add " data-toggle="tooltip "><i class="material-icons "></i></a>
<a class="delete " title="Delete " data-toggle="tooltip "><i class="material-icons "></i></a>
</td>
</tr>
</tbody>
</table>
</div>
<div>
<a href="thanks.html "><button class="btn btn--radius-2 btn-warning sp pull-right " type="button ">Place Order <i class="fa fa-angle-double-right "></i></button></a>
</div>
</form>
</div>
</div>