gpt4 book ai didi

javascript - 在 javascript 中输入带有事件的文本字段并在目标元素中自动填充值

转载 作者:行者123 更新时间:2023-12-03 04:30:01 25 4
gpt4 key购买 nike

I have a problem in targetting the last th tag.In the fifth th, i put input type text.How to add event in this text field and the value of the last th(ave) should be updated automatically?Any help here is much appreciated.

<tr>                 
<th colspan="3">Learning Areas</th>
<th colspan="2">Term 1</th>
<th colspan="2">Term 2</th>
<th colspan="2">Term 3</th>
<th colspan="2">Term 4</th>
<th>Ave</th>
</tr>
</thead>
<tbody>
@foreach($card['AllGrade'] as $subject)
{!! Form::hidden('grade_id[]',$subject['grade_id']) !!}
<tr>
<th colspan="3">{!! $subject->subject !!}</th>
<th colspan="2">{!! $subject->term_1 !!}</th>
<th colspan="2">{!! $subject->term_2 !!}</th>
<th colspan="2">{!! $subject->term_3 !!}</th>
<th colspan="2"><input text="term_4" value="{!! $subject->term_4 !!}"
class="form-control" name="term_4"></th>

<th colspan="2" name ="ave" id ="ave" value=""> total</th>


</tr>
@endforeach


<script type="text/javascript">
$("tbody tr").each(function() {
var total = 0;
var ave = 0;
var count = 1;
$(this).children('th').not(':first').not(':last').each(function () {
//"this" is the current element in the loop
var number = ($(this).children('input').length == 0) ? $(this).html() :
$(this).children('input').first().val();
total += parseInt(number);
ave = total/count;
count++;
});
$(this).children('th').last().html(ave);
});
</script>

最佳答案

首先要做的事情。我不知道你选择th是否有原因,但是tbody里面的应该最好是td,比如:

<td colspan="3">{!! $subject->subject !!}</td>

稍后您可以从此更改此行

$(this).children('th').not(':first').not(':last').each(function () {

$(this).children('td').not(':first').not(':last').each(function () {

现在是最后一部分

 function calculateAve() {
var aveValues = 0;
$("tbody tr").each(function() {
var total = 0;
var ave = 0;
var count = 1;
$(this).children('td').not(':first').not(':last').each(function () {
//"this" is the current element in the loop
var number = ($(this).children('input').length == 0) ? $(this).html() : $(this).children('input').first().val();
total += parseInt(number);
ave = total/count;
count++;
});
$(this).children('td').last().html(ave);
aveValues = aveValues+ave;
});
$('#totalAve').html(aveValues/2);

}
calculateAve();
$('#myTable').on('keyup', 'input', function(){
calculateAve();
});
table#myTable th {
background: #8BC34A;
color: #fff;
}
table#myTable, table#myTable td, table#myTable th {
border: solid #efefef;
border-collapse: collapse;
padding: 10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="myTable">
<thead>
<tr>
<th colspan="3">Subject</th>
<th colspan="2">Term 1</th>
<th colspan="2">Term 2</th>
<th colspan="2">Term 3</th>
<th colspan="2">Term 4</th>
<th>Ave</th>
</tr>
</thead>
<tbody>
<tr>
<td colspan="3">Math</td>
<td colspan="2">81</td>
<td colspan="2">87</td>
<td colspan="2">81</td>
<td colspan="2"><input text="term_4" value="80" class="form-control" name="term_4"></td>
<td colspan="2" name ="ave" id ="ave" value=""> total</td>
</tr>
<tr>
<td colspan="3">Science</td>
<td colspan="2">89</td>
<td colspan="2">83</td>
<td colspan="2">81</td>
<td colspan="2"><input text="term_4" value="80" class="form-control" name="term_4"></td>
<td colspan="2" name ="ave" id ="ave" value=""> total</td>
</tr>
<tr>
<td colspan="11">Total Average</td>
<td id="totalAve" colspan="2"></td>
</tr>
</tbody>
</table>

关于javascript - 在 javascript 中输入带有事件的文本字段并在目标元素中自动填充值,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43530324/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com