#javascript #html #jquery #html-table #css-selectors
#javascript #HTML #jquery #html-таблица #css-селекторы
Вопрос:
Я новичок в Jquery. Нужна ваша помощь в решении приведенной ниже проблемы. У меня есть html-таблица с 3 столбцами и 3 строками. Каждый столбец имеет заголовок, пример col1, col2 и col3. Существует статус утверждения столбца со значениями — Утверждено, ожидается утверждение и не утверждено. Я должен взять сумму значений, введенных пользователем в каждом текстовом поле для каждого столбца. В настоящее время в моем коде я беру эту сумму для каждого столбца. Но я хочу взять сумму только тогда, когда статус утверждения «Утвержден». Я не уверен, какой обработчик событий использовать, поскольку пользователь может либо сначала ввести номер, либо статус утверждения в случайном порядке. Спасибо!
<html&&t;
<head&&t;
<script src="https://ajax.&oo&leapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"&&t;</script&&t;
<style&&t;
input {display: block;}
input.total {mar&in-top: 30px;}
[class*="total"] {
back&round: #ffff00;
p.double {border-style: double;}
}
.none{
display:none;
}
</style&&t;
</head&&t;
<body&&t;
<table class="aa"&&t;
<th&&t; Approval status</th&&t;
<th&&t;col1</th&&t;
<th&&t;col2</th&&t;
<th&&t;col3</th&&t;
<tr&&t;
<td id="selectBox1"&&t;
<select id = "myList1"&&t;
<option value = "1"&&t;Choose Approval Status</option&&t;
<option value = "2"&&t;Approved</option&&t;
<option value = "3"&&t;Approval Pendin&</option&&t;
<option value = "4"&&t;Not Approved</option&&t;
</select&&t;
</td&&t;
<td&&t; <input type="text" class="qty1" value="" /&&t; </td&&t;
<td&&t; <input type="text" class="qty2" value="" /&&t; </td&&t;
<td&&t; <input type="text" class="qty3" value="" /&&t; </td&&t;
</tr&&t;
<tr&&t;
<td id="selectBox2"&&t;
<select id = "myList2"&&t;
<option value = "1"&&t;Choose Approval Status</option&&t;
<option value = "2"&&t;Approved</option&&t;
<option value = "3"&&t;Approval Pendin&</option&&t;
<option value = "4"&&t;Not Approved</option&&t;
</select&&t;
</td&&t;
<td&&t; <input type="text" class="qty1" value="" /&&t; </td&&t;
<td&&t; <input type="text" class="qty2" value="" /&&t; </td&&t;
<td&&t; <input type="text" class="qty3" value="" /&&t; </td&&t;
</tr&&t;
<tr&&t;
<td&&t; <input type="text" class="none" value="" /&&t;</td&&t;
<td&&t; <input type="text" class="total1" value="" /&&t; </td&&t;
<td&&t; <input type="text" class="total2" value="" /&&t; </td&&t;
<td&&t; <input type="text" class="total3" value="" /&&t; </td&&t;
</tr&&t;
</table&&t;
<script&&t;
$(document).on("chan&e", ".qty1", function() {
var sum = 0;
$(".qty1").each(function(){
sum = $(this).val();
});
$(".total1").val("total:" sum);
});
$(document).on("chan&e", ".qty2", function() {
var sum = 0;
$(".qty2").each(function(){
sum = $(this).val();
});
$(".total2").val("total:" sum);
});
$(document).on("chan&e", ".qty3", function() {
var sum = 0;
$(".qty3").each(function(){
sum = $(this).val();
});
$(".total3").val("total:" sum);
});
</script&&t;
</body&&t;
</html&&t;
Комментарии:
1. Почему вы используете
#selectBox
и#myList
несколько раз? ИДЕНТИФИКАТОР должен быть уникальным2. Кажется более логичным иметь только 1 элемент выбора «Статус утверждения». Пожалуйста, поясните, почему их 3. Если их должно быть 3, когда их следует суммировать? Когда все 3 будут одобрены?
3. проверьте мой ответ, надеюсь, вы найдете его полезным
4. @Rob Moll: я отредактировал код. извините за путаницу. Последний выпадающий список был дополнительным. Для каждой строки, в которой пользователь вводит текстовое поле, будет выпадающий список, и пользователь выберет, одобрено это или нет. Затем мне нужно показать сумму в последнем поле только для текстового поля, которое имеет статус утвержденного. Спасибо!
Ответ №1:
У вас слишком много кода в вашем фрагменте. Уменьшив его, вы можете сделать его пригодным для повторного использования. Кроме того, вам действительно не нужны все эти id
и class
-атрибуты для управления вашим скриптом.
Следующий скрипт может быть применен к таблице любого размера.
$("table.aa").on("chan&e input",ev=&&t; // act on both: "chan&e" and "input"
$("table.aa tr:last td:&t(0)").each((i,td)=&&t; // &o over each result input field
$('input',td).val( // and set its value to:
$("table.aa tr") // find all rows ...
.filter((j,tr)=&&t;$("select",tr).val()==2) // but only those havin& a select==2
.find("input:eq(" i ")").toArray() // take i-th input in each row
.reduce((a,c)=&&t; c.value a,0) // and accumulate all values
)
)
)
input {display: block;}
.total {
back&round: #ffff00;
p.double {border-style: double;}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"&&t;</script&&t;
<table class="aa"&&t;
<th&&t; Approval status</th&&t;
<th&&t;col1</th&&t;
<th&&t;col2</th&&t;
<th&&t;col3</th&&t;
<tr&&t;
<td&&t;
<select&&t;
<option value = "1"&&t;Choose Approval Status</option&&t;
<option value = "2"&&t;Approved</option&&t;
<option value = "3"&&t;Approval Pendin&</option&&t;
<option value = "4"&&t;Not Approved</option&&t;
</select&&t;
</td&&t;
<td&&t; <input type="text"/&&t; </td&&t;
<td&&t; <input type="text"/&&t; </td&&t;
<td&&t; <input type="text"/&&t; </td&&t;
</tr&&t;
<tr&&t;
<td&&t;
<select&&t;
<option value = "1"&&t;Choose Approval Status</option&&t;
<option value = "2"&&t;Approved</option&&t;
<option value = "3"&&t;Approval Pendin&</option&&t;
<option value = "4"&&t;Not Approved</option&&t;
</select&&t;
</td&&t;
<td&&t; <input type="text"/&&t; </td&&t;
<td&&t; <input type="text"/&&t; </td&&t;
<td&&t; <input type="text"/&&t; </td&&t;
</tr&&t;
<tr&&t;
<td&&t;
<select&&t;
<option value = "1"&&t;Choose Approval Status</option&&t;
<option value = "2"&&t;Approved</option&&t;
<option value = "3"&&t;Approval Pendin&</option&&t;
<option value = "4"&&t;Not Approved</option&&t;
</select&&t;
</td&&t;
<td&&t; <input type="text"/&&t; </td&&t;
<td&&t; <input type="text"/&&t; </td&&t;
<td&&t; <input type="text"/&&t; </td&&t;
</tr&&t;
<tr&&t;
<td&&t; </td&&t;
<td&&t; <input type="text" class="total" value="" /&&t; </td&&t;
<td&&t; <input type="text" class="total" value="" /&&t; </td&&t;
<td&&t; <input type="text" class="total" value="" /&&t; </td&&t;
</tr&&t;
</table&&t;
Комментарии:
1. Большое вам спасибо за помощь. Это работает именно так, как необходимо. Ваш ответ был очень полезен.
2. Да, это хорошая особенность jQuery: вы почти всегда знаете, когда находитесь на правильном пути, потому что тогда вы «меньше пишете, больше делаете». 😉
Ответ №2:
Просто замените значения выбора из number на тот же текст, что и в innerHTML
и используйте оператор if like if($('#myList1').val() == 'Approved')
, чтобы сумма вычислялась, только если оператор if имеет значение true
$(document).on('chan&e', '.qty1', () =&&t; {
if ($('#myList1').val() == 'Approved') {
var sum = 0;
$(".qty1").each(function() {
sum = $(this).val();
});
$(".total1").val("total:" sum);
}
});
$(document).on('chan&e', '.qty2', () =&&t; {
if ($('#myList2').val() == 'Approved') {
var sum = 0;
$(".qty2").each(function() {
sum = $(this).val();
});
$(".total2").val("total:" sum);
}
});
$(document).on('chan&e', '.qty3', () =&&t; {
if ($('#myList3').val() == 'Approved') {
var sum = 0;
$(".qty3").each(function() {
sum = $(this).val();
});
$(".total3").val("total:" sum);
}
});
input {
display: block;
}
input.total {
mar&in-top: 30px;
}
[class*="total"] {
back&round: #ffff00;
p.double {
border-style: double;
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"&&t;</script&&t;
<table class="aa"&&t;
<th&&t; Approval status</th&&t;
<th&&t;col1</th&&t;
<th&&t;col2</th&&t;
<th&&t;col3</th&&t;
<tr&&t;
<td id="selectBox"&&t;
<select id="myList1"&&t;
<option value="none" selected&&t;Choose Approval Status</option&&t;
<option value="Approved"&&t;Approved</option&&t;
<option value="Approval Pendin&"&&t;Approval Pendin&</option&&t;
<option value="Not Approved"&&t;Not Approved</option&&t;
</select&&t;
</td&&t;
<td&&t; <input type="text" class="qty1" value="" /&&t; </td&&t;
<td&&t; <input type="text" class="qty2" value="" /&&t; </td&&t;
<td&&t; <input type="text" class="qty3" value="" /&&t; </td&&t;
</tr&&t;
<tr&&t;
<td id="selectBox"&&t;
<select id="myList2"&&t;
<option value="none"&&t;Choose Approval Status</option&&t;
<option value="Approved"&&t;Approved</option&&t;
<option value="Approval Pendin&"&&t;Approval Pendin&</option&&t;
<option value="Not Pendin&"&&t;Not Approved</option&&t;
</select&&t;
</td&&t;
<td&&t; <input type="text" class="qty1" value="" /&&t; </td&&t;
<td&&t; <input type="text" class="qty2" value="" /&&t; </td&&t;
<td&&t; <input type="text" class="qty3" value="" /&&t; </td&&t;
</tr&&t;
<tr&&t;
<td id="selectBox"&&t;
<select id="myList3"&&t;
<option value="none"&&t;Choose Approval Status</option&&t;
<option value="Approved"&&t;Approved</option&&t;
<option value="Approval Pendin&"&&t;Approval Pendin&</option&&t;
<option value="Not Pendin&"&&t;Not Approved</option&&t;
</select&&t;
</td&&t;
<td&&t; <input type="text" class="total1" value="" /&&t; </td&&t;
<td&&t; <input type="text" class="total2" value="" /&&t; </td&&t;
<td&&t; <input type="text" class="total3" value="" /&&t; </td&&t;
</tr&&t;
</table&&t;
Комментарии:
1. Спасибо за ответ. Код работает не так, как ожидалось; он принимает сумму для всех, независимо от выбранного статуса, а не только для утвержденных.
Ответ №3:
Вот одно из решений для вашего требования, оно выведет сумму значений на основе статуса каждой строки с помощью изменения значения выпадающего списка final row.
$(".finalState").on("chan&e", function() {
if($(this).val() == 2) {
var t1 = t2 = t3 = 0;
var tTR = $(this).parents("tbody").find("tr");
tTR.each(function(){
if(!$(this).hasClass("total-row") amp;amp; $(this).find(".myList").val()==2){
var qty1 = $(this).find(".qty1").val();
if(!isNaN(qty1) amp;amp; qty1 !== null amp;amp; qty1 !== '' ){
t1 = (parseFloat(t1) parseFloat($(this).find(".qty1").val()));
}
var qty2 = $(this).find(".qty2").val();
if(!isNaN(qty2) amp;amp; qty2 !== null amp;amp; qty2 !== '' ){
t2 = (parseFloat(t2) parseFloat($(this).find(".qty2").val()));
}
var qty3 = $(this).find(".qty3").val();
if(!isNaN(qty3) amp;amp; qty3 !== null amp;amp; qty3 !== '' ){
t3 = (parseFloat(t3) parseFloat($(this).find(".qty3").val()));
}
}
});
} else if($(this).val() == 3) {
var t1 = t2 = t3 = 0;
var tTR = $(this).parents("tbody").find("tr");
tTR.each(function(){
if(!$(this).hasClass("total-row") amp;amp; $(this).find(".myList").val()==3){
var qty1 = $(this).find(".qty1").val();
if(!isNaN(qty1) amp;amp; qty1 !== null amp;amp; qty1 !== '' ){
t1 = (parseFloat(t1) parseFloat($(this).find(".qty1").val()));
}
var qty2 = $(this).find(".qty2").val();
if(!isNaN(qty2) amp;amp; qty2 !== null amp;amp; qty2 !== '' ){
t2 = (parseFloat(t2) parseFloat($(this).find(".qty2").val()));
}
var qty3 = $(this).find(".qty3").val();
if(!isNaN(qty3) amp;amp; qty3 !== null amp;amp; qty3 !== '' ){
t3 = (parseFloat(t3) parseFloat($(this).find(".qty3").val()));
}
}
});
} else if($(this).val() == 4){
var t1 = t2 = t3 = 0;
var tTR = $(this).parents("tbody").find("tr");
tTR.each(function(){
if(!$(this).hasClass("total-row") amp;amp; $(this).find(".myList").val()==4){
var qty1 = $(this).find(".qty1").val();
if(!isNaN(qty1) amp;amp; qty1 !== null amp;amp; qty1 !== '' ){
t1 = (parseFloat(t1) parseFloat($(this).find(".qty1").val()));
}
var qty2 = $(this).find(".qty2").val();
if(!isNaN(qty2) amp;amp; qty2 !== null amp;amp; qty2 !== '' ){
t2 = (parseFloat(t2) parseFloat($(this).find(".qty2").val()));
}
var qty3 = $(this).find(".qty3").val();
if(!isNaN(qty3) amp;amp; qty3 !== null amp;amp; qty3 !== '' ){
t3 = (parseFloat(t3) parseFloat($(this).find(".qty3").val()));
}
}
});
}
$(".total1").val(t1);
$(".total2").val(t2);
$(".total3").val(t3);
});
input {display: block;}
input.total {mar&in-top: 30px;}
[class*="total"] {
back&round: #ffff00;
p.double {border-style: double;}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"&&t;</script&&t;
<html&&t;
<head&&t;
</head&&t;
<body&&t;
<table class="aa"&&t;
<thead&&t;
<tr&&t;
<th&&t;col1</th&&t;
<th&&t;col2</th&&t;
<th&&t;col3</th&&t;
<th&&t;Approval status</th&&t;
</tr&&t;
</thead&&t;
<tbody&&t;
<tr&&t;
<td&&t; <input type="text" class="qty1" value="" /&&t; </td&&t;
<td&&t; <input type="text" class="qty2" value="" /&&t; </td&&t;
<td&&t; <input type="text" class="qty3" value="" /&&t; </td&&t;
<td class="selectBox"&&t;
<select class= "myList"&&t;
<option value = "1"&&t;Choose Approval Status</option&&t;
<option value = "2"&&t;Approved</option&&t;
<option value = "3"&&t;Approval Pendin&</option&&t;
<option value = "4"&&t;Not Approved</option&&t;
</select&&t;
</td&&t;
</tr&&t;
<tr&&t;
<td&&t; <input type="text" class="qty1" value="" /&&t; </td&&t;
<td&&t; <input type="text" class="qty2" value="" /&&t; </td&&t;
<td&&t; <input type="text" class="qty3" value="" /&&t; </td&&t;
<td class="selectBox"&&t;
<select class="myList"&&t;
<option value = "1"&&t;Choose Approval Status</option&&t;
<option value = "2"&&t;Approved</option&&t;
<option value = "3"&&t;Approval Pendin&</option&&t;
<option value = "4"&&t;Not Approved</option&&t;
</select&&t;
</td&&t;
</tr&&t;
<tr&&t;
<td&&t; <input type="text" class="qty1" value="" /&&t; </td&&t;
<td&&t; <input type="text" class="qty2" value="" /&&t; </td&&t;
<td&&t; <input type="text" class="qty3" value="" /&&t; </td&&t;
<td class="selectBox"&&t;
<select class="myList"&&t;
<option value = "1"&&t;Choose Approval Status</option&&t;
<option value = "2"&&t;Approved</option&&t;
<option value = "3"&&t;Approval Pendin&</option&&t;
<option value = "4"&&t;Not Approved</option&&t;
</select&&t;
</td&&t;
</tr&&t;
<tr class="total-row"&&t;
<td&&t; <input type="text" class="total1" value="" /&&t; </td&&t;
<td&&t; <input type="text" class="total2" value="" /&&t; </td&&t;
<td&&t; <input type="text" class="total3" value="" /&&t; </td&&t;
<td class="selectBox"&&t;
<select class = "myList finalState"&&t;
<option value = "1"&&t;Choose Approval Status</option&&t;
<option value = "2"&&t;Approved</option&&t;
<option value = "3"&&t;Approval Pendin&</option&&t;
<option value = "4"&&t;Not Approved</option&&t;
</select&&t;
</td&&t;
</tr&&t;
</tbody&&t;
</table&&t;
</body&&t;
</html&&t;