#javascript
#javascript
Вопрос:
Как мне заставить это утверждение повторяться несколько раз? Я попробовал, и это работает только для первой строки, но остальная часть строки не может быть выполнена.
!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="styles.css">
<title>Book Ordering System</title>
<style>
body{
background-image: linear-gradient(to right,#FF7F50,#008080);
}
thead,
tfoot {
background-color: skyblue;
}
tbody td:nth-child(5) input,
tbody td:nth-child(6) input,
tbody td:nth-child(7) input {
text-align: right;
}
tr:hover {
background-color: yellow;
}
td:last-of-type input {
background-color: silver;
}
tfoot,
tfoot input {
text-align: right;
}
tfoot td:last-of-type input {
font-size: 18pt;
}
table{
border-style: dashed;
border-width: medium;
border-color: #EEE8AA;
}
tbody td:nth-child(5) input,
tbody td:nth-child(6) input{
background-color: tomato;
}
tbody td:nth-child(2) input{
background-color: #00FF7F;
}
tbody td:nth-child(3) input{
background-color: #EE82EE;
}
tbody td > select{
background-color: #FFA500;
}
</style>
</head>
<body>
<h1>Book Ordering System</h1>
<form method="post">
<table border="2">
<thead>
<tr>
<th>No.</th>
<th>Book Title</th>
<th>Author</th>
<th>Category</th>
<th>Unit Price</th>
<th>Quantity</th>
<th>Total</th>
</tr>
</thead>
<tfoot>
<tr>
<td colspan="5">
<input type="button" onclick="multiply();" value="Calculate Grand Total Price">
</td>
<td colspan="2">
<input type="text" name="grandTotal" id="grandTotal" value="0.00" readonly="readonly">
</td>
</tr>
</tfoot>
<tbody>
<tr>
<td>1</td>
<td>
<label for="sec1"></label>
<input type="text" name="sec1" id="sec1" value="" />
</td>
<td>
<label for="sec2"></label>
<input type="text" name="sec2" id="sec2" value="" />
</td>
<td>
<select name="category" id="category">
<option value="choose">Please choose the category...</option>
<option value="biz">Business</option>
<option value="fiction">Fiction</option>
<option value="maths">Mathematics</option>
<option value="tech">Technology</option>
</select>
</td>
<td>
<label for="sec3"></label>
<input type="text" name="sec3" id="sec3" value="0.00" />
</td>
<td>
<label for="sec4"></label>
<input type="text" name="sec4" id="sec4" value="0" />
</td>
<td>
<label for="sec5"></label>
<input type="text" name="sec5" id="sec5" value="0.00" readonly="readonly" />
</td>
</tr>
<tr>
<td>2</td>
<td>
<label for="sec1"></label>
<input type="text" name="sec6" id="sec6" value="" />
</td>
<td>
<label for="sec2"></label>
<input type="text" name="sec7" id="sec7" value="" />
</td>
<td>
<select name="category" id="category">
<option value="choose">Please choose the category...</option>
<option value="biz">Business</option>
<option value="fiction">Fiction</option>
<option value="maths">Mathematics</option>
<option value="tech">Technology</option>
</select>
</td>
<td>
<label for="sec3"></label>
<input type="text" name="sec8" id="sec8" value="0.00" />
</td>
<td>
<label for="sec4"></label>
<input type="text" name="sec9" id="sec9" value="0" />
</td>
<td>
<label for="sec5"></label>
<input type="text" name="sec10" id="sec10" value="0.00" readonly="readonly" />
</td>
</tr>
<tr>
<td>3</td>
<td>
<label for="sec1"></label>
<input type="text" name="sec11" id="sec11" value="" />
</td>
<td>
<label for="sec2"></label>
<input type="text" name="sec12" id="sec12" value="" />
</td>
<td>
<select name="category" id="category">
<option value="choose">Please choose the category...</option>
<option value="biz">Business</option>
<option value="fiction">Fiction</option>
<option value="maths">Mathematics</option>
<option value="tech">Technology</option>
</select>
</td>
<td>
<label for="sec3"></label>
<input type="text" name="sec13" id="sec13" value="0.00" />
</td>
<td>
<label for="sec4"></label>
<input type="text" name="sec14" id="sec14" value="0" />
</td>
<td>
<label for="sec5"></label>
<input type="text" name="sec15" id="sec15" value="0.00" readonly="readonly" />
</td>
</tr>
<tr>
<td>4</td>
<td>
<label for="sec1"></label>
<input type="text" name="sec16" id="sec16" value="" />
</td>
<td>
<label for="sec2"></label>
<input type="text" name="sec17" id="sec17" value="" />
</td>
<td>
<select name="category" id="category">
<option value="choose">Please choose the category...</option>
<option value="biz">Business</option>
<option value="fiction">Fiction</option>
<option value="maths">Mathematics</option>
<option value="tech">Technology</option>
</select>
</td>
<td>
<label for="sec3"></label>
<input type="text" name="sec18" id="sec18" value="0.00" />
</td>
<td>
<label for="sec4"></label>
<input type="text" name="sec19" id="sec19" value="0" />
</td>
<td>
<label for="sec5"></label>
<input type="text" name="sec20" id="sec20" value="0.00" readonly="readonly" />
</td>
</tr>
<tr>
<td>5</td>
<td>
<label for="sec1"></label>
<input type="text" name="sec21" id="sec21" value="" />
</td>
<td>
<label for="sec2"></label>
<input type="text" name="sec22" id="sec22" value="" />
</td>
<td>
<select name="category" id="category">
<option value="choose">Please choose the category...</option>
<option value="biz">Business</option>
<option value="fiction">Fiction</option>
<option value="maths">Mathematics</option>
<option value="tech">Technology</option>
</select>
</td>
<td>
<label for="sec3"></label>
<input type="text" name="sec23" id="sec23" value="0.00" />
</td>
<td>
<label for="sec4"></label>
<input type="text" name="sec24" id="sec24" value="0" />
</td>
<td>
<label for="sec5"></label>
<input type="text" name="sec25" id="sec25" value="0.00" readonly="readonly" />
</td>
</tr>
</tbody>
</table>
</form>
<script>
function multiply(){
let num1 = document.getElementById("sec3").value ;
let num2 = document.getElementById("sec4").value ;
document.getElementById("sec5").value = num1 * num2;
num1 = document.getElementById("sec8").value ;
num2 = document.getElementById("sec9").value ;
document.getElementById("sec10").value = num1 * num2;
num1 = document.getElementById("sec13").value ;
num2 = document.getElementById("sec14").value ;
document.getElementById("sec15").value = num1 * num2;
num1 = document.getElementById("sec18").value ;
num2 = document.getElementById("sec19").value ;
document.getElementById("sec20").value = num1 * num2;
num1 = document.getElementById("sec23").value ;
num2 = document.getElementById("sec24").value ;
document.getElementById("sec25").value = num1 * num2;
total = document.getElementById("sec5").value document.getElementById("sec10").value document.getElementById("sec15").value
document.getElementById("sec20").value document.getElementById("sec25").value ;
document.getElementById("grandTotal").value = total;
}
</script>
</body>
</html> Как мне заставить это утверждение повторяться несколько раз? Я попробовал, и это работает только для первой строки, но остальная часть строки не может быть выполнена. Он работает только в 1-й строке
Комментарии:
1. возможно, вам также придется предоставить информацию о таблице, чтобы мы могли понять, о каких строках и столбцах вы говорите.
2. Кажется, здесь может помочь jQuery. Используйте
each()функцию наtable > tbody > trселекторе, чтобы применить вашуmultiply()функцию.3.
How do I make this statement repeat a few times ?как мы предполагаем понять, какое утверждение вы хотите повторить. вы упоминаете эту строку 2 раза, но никогда не указываете, какая строка кода.4. @WaytoDeveloper Я думаю, что вышеупомянутая проблема решена. Тем не менее, у меня все еще есть проблема с суммированием окончательной общей цены. Значение по-прежнему не изменится для окончательной общей цены.
Ответ №1:
я предлагаю вам применить кнопку перезагрузки
<FORM>
<INPUT TYPE="button" onClick="history.go(0)" VALUE="Refresh">
</FORM>
Ответ №2:
попробуйте заменить свой код этим:
!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="styles.css">
<title>Book Ordering System</title>
<style>
body{
background-image: linear-gradient(to right,#FF7F50,#008080);
}
thead,
tfoot {
background-color: skyblue;
}
tbody td:nth-child(5) input,
tbody td:nth-child(6) input,
tbody td:nth-child(7) input {
text-align: right;
}
tr:hover {
background-color: yellow;
}
td:last-of-type input {
background-color: silver;
}
tfoot,
tfoot input {
text-align: right;
}
tfoot td:last-of-type input {
font-size: 18pt;
}
table{
border-style: dashed;
border-width: medium;
border-color: #EEE8AA;
}
tbody td:nth-child(5) input,
tbody td:nth-child(6) input{
background-color: tomato;
}
tbody td:nth-child(2) input{
background-color: #00FF7F;
}
tbody td:nth-child(3) input{
background-color: #EE82EE;
}
tbody td > select{
background-color: #FFA500;
}
</style>
</head>
<body>
<h1>Book Ordering System</h1>
<form method="post">
<table border="2">
<thead>
<tr>
<th>No.</th>
<th>Book Title</th>
<th>Author</th>
<th>Category</th>
<th>Unit Price</th>
<th>Quantity</th>
<th>Total</th>
</tr>
</thead>
<tfoot>
<tr>
<td colspan="5">
<input type="button" onclick="multiply();" value="Calculate Grand Total Price">
</td>
<td colspan="2">
<input type="text" name="grandTotal" id="grandTotal" value="0.00" readonly="readonly">
</td>
</tr>
</tfoot>
<tbody>
<tr>
<td>1</td>
<td>
<label for="sec1"></label>
<input type="text" name="sec1" id="sec1" value="" />
</td>
<td>
<label for="sec2"></label>
<input type="text" name="sec2" id="sec2" value="" />
</td>
<td>
<select name="category" id="category">
<option value="choose">Please choose the category...</option>
<option value="biz">Business</option>
<option value="fiction">Fiction</option>
<option value="maths">Mathematics</option>
<option value="tech">Technology</option>
</select>
</td>
<td>
<label for="sec3"></label>
<input type="text" name="sec3" id="sec3" value="0.00" />
</td>
<td>
<label for="sec4"></label>
<input type="text" name="sec4" id="sec4" value="0" />
</td>
<td>
<label for="sec5"></label>
<input type="text" name="sec5" id="sec5" value="0.00" readonly="readonly" />
</td>
</tr>
<tr>
<td>2</td>
<td>
<label for="sec1"></label>
<input type="text" name="sec6" id="sec6" value="" />
</td>
<td>
<label for="sec2"></label>
<input type="text" name="sec7" id="sec7" value="" />
</td>
<td>
<select name="category" id="category">
<option value="choose">Please choose the category...</option>
<option value="biz">Business</option>
<option value="fiction">Fiction</option>
<option value="maths">Mathematics</option>
<option value="tech">Technology</option>
</select>
</td>
<td>
<label for="sec3"></label>
<input type="text" name="sec8" id="sec8" value="0.00" />
</td>
<td>
<label for="sec4"></label>
<input type="text" name="sec9" id="sec9" value="0" />
</td>
<td>
<label for="sec5"></label>
<input type="text" name="sec10" id="sec10" value="0.00" readonly="readonly" />
</td>
</tr>
<tr>
<td>3</td>
<td>
<label for="sec1"></label>
<input type="text" name="sec11" id="sec11" value="" />
</td>
<td>
<label for="sec2"></label>
<input type="text" name="sec12" id="sec12" value="" />
</td>
<td>
<select name="category" id="category">
<option value="choose">Please choose the category...</option>
<option value="biz">Business</option>
<option value="fiction">Fiction</option>
<option value="maths">Mathematics</option>
<option value="tech">Technology</option>
</select>
</td>
<td>
<label for="sec3"></label>
<input type="text" name="sec13" id="sec13" value="0.00" />
</td>
<td>
<label for="sec4"></label>
<input type="text" name="sec14" id="sec14" value="0" />
</td>
<td>
<label for="sec5"></label>
<input type="text" name="sec15" id="sec15" value="0.00" readonly="readonly" />
</td>
</tr>
<tr>
<td>4</td>
<td>
<label for="sec1"></label>
<input type="text" name="sec16" id="sec16" value="" />
</td>
<td>
<label for="sec2"></label>
<input type="text" name="sec17" id="sec17" value="" />
</td>
<td>
<select name="category" id="category">
<option value="choose">Please choose the category...</option>
<option value="biz">Business</option>
<option value="fiction">Fiction</option>
<option value="maths">Mathematics</option>
<option value="tech">Technology</option>
</select>
</td>
<td>
<label for="sec3"></label>
<input type="text" name="sec18" id="sec18" value="0.00" />
</td>
<td>
<label for="sec4"></label>
<input type="text" name="sec19" id="sec19" value="0" />
</td>
<td>
<label for="sec5"></label>
<input type="text" name="sec20" id="sec20" value="0.00" readonly="readonly" />
</td>
</tr>
<tr>
<td>5</td>
<td>
<label for="sec1"></label>
<input type="text" name="sec21" id="sec21" value="" />
</td>
<td>
<label for="sec2"></label>
<input type="text" name="sec22" id="sec22" value="" />
</td>
<td>
<select name="category" id="category">
<option value="choose">Please choose the category...</option>
<option value="biz">Business</option>
<option value="fiction">Fiction</option>
<option value="maths">Mathematics</option>
<option value="tech">Technology</option>
</select>
</td>
<td>
<label for="sec3"></label>
<input type="text" name="sec23" id="sec23" value="0.00" />
</td>
<td>
<label for="sec4"></label>
<input type="text" name="sec24" id="sec24" value="0" />
</td>
<td>
<label for="sec5"></label>
<input type="text" name="sec25" id="sec25" value="0.00" readonly="readonly" />
</td>
</tr>
</tbody>
</table>
</form>
<script>
function multiply(){
let total = 0;
let num1 = document.getElementById("sec3").value ;
let num2 = document.getElementById("sec4").value ;
document.getElementById("sec5").value = num1 * num2;
total = (num1 * num2);
num1 = document.getElementById("sec8").value ;
num2 = document.getElementById("sec9").value ;
document.getElementById("sec10").value = num1 * num2;
total = (num1 * num2);
num1 = document.getElementById("sec13").value ;
num2 = document.getElementById("sec14").value ;
document.getElementById("sec15").value = num1 * num2;
total = (num1 * num2);
num1 = document.getElementById("sec18").value ;
num2 = document.getElementById("sec19").value ;
document.getElementById("sec20").value = num1 * num2;
total = (num1 * num2);
num1 = document.getElementById("sec23").value ;
num2 = document.getElementById("sec24").value ;
document.getElementById("sec25").value = num1 * num2;
total = (num1 * num2);
document.getElementById("grandTotal").value = total;
}
</script>
</body>
</html> РЕДАКТИРОВАТЬ: это должно сработать к настоящему времени
Комментарии:
1. это сработает, но, пожалуйста, сравните эти коды с вашими и изучите их, каждый идентификатор должен быть уникальным (также имена, если возможно). Я просто изменил эти идентификаторы и добавил javascript.
2. это работает хорошо, но моя общая цена не может быть обновлена. Я попытался сложить его вместе, но общая цена превращается в строку вместо того, чтобы складывать ее вместе. Итак, я обновил свой код сверху, чтобы u проверил проблему
3. конечно, просто спросите в любое время, теперь вы можете принять это как действительный ответ. Спасибо @Kingdom452