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

Question

  

我在定位最后一个标签时遇到问题。在第五个，我放了   输入类型文本。如何在此文本字段中添加事件和值   最后一个（ave）应该自动更新吗？这里有任何帮助   非常感谢。

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

Answer 1

首先要做的事情。 我不知道你选择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>

using System;

{
    class Menu
    {
        public void DrawMainMenu()
        {
            Console.WriteLine("Trial");
        }
    }
    class Program
    {
        static void Main(string[] args)
        {
            Console.ForegroundColor = ConsoleColor.Green;
            Console.WriteLine("               MasterMind's Main Menu");
            Console.WriteLine("                    1: Play");
            Console.WriteLine("                    2: Help");
            Console.WriteLine("                    0: Exit");
            string userInput = Console.ReadKey().KeyChar.ToString();
            if (userInput == "2")
            {
                DrawMainMenu();
            }
            else
            {
                Console.Clear();
                Console.WriteLine("This is not a number 2");
                Console.ReadLine();
            }
        }
    }

}