我添加了 ca、part_a、part_b 数字，并直接在 Total 字段中写入总计，并通过 JavaScript 计算 GPA。在我的第一行中，我通过 javascript 获取了 Total 和 GPA 值，但在第二行和下一行中，我没有获取 Total 和 GPA 值，我该如何解决这个问题？
<div>
<ul class="breadcrumb">
<li>
<a href="#">Home</a> <span class="divider">/</span>
</li>
<li>
<a href="#">Forms</a>
</li>
</ul>
</div>
<div class="row-fluid sortable">
<div class="box span12">
<div class="box-header well" data-original-title>
<h2><i class="icon-edit"></i>Add All Student Mark</h2>
<h3>
</h3>
<div class="box-icon">
<a href="#" class="btn btn-setting btn-round"><i class="icon-cog"></i></a>
<a href="#" class="btn btn-minimize btn-round"><i class="icon-chevron-up"></i></a>
<a href="#" class="btn btn-close btn-round"><i class="icon-remove"></i></a>
</div>
</div>
<div class="box-content">
<form class="form-horizontal" action="<?php echo base_url();?>super_admin/save_all_student_mark" method="post" enctype="multipart/form-data">
<fieldset>
<legend>Add all Student Mark</legend>
<h3>
<?php
$msg = $this->session->userdata('message');
if ($msg) {
echo $msg;
$this->session->unset_userdata('message');
}
?>
</h3>
<div class="box-content">
<table class="table table-striped table-bordered bootstrap-datatable">
<thead>
<tr>
<th>Student Roll</th>
<th>CA</th>
<th>Part A</th>
<th>Part B</th>
<th>Total</th>
<th>GPA</th>
</tr>
</thead>
<tbody>
<?php $i=0;?>
<?php foreach($student_info_by_session as $student_info){?>
<tr>
<td>
<input type="text" class="span12 typeahead" value="<?php echo $student_info->student_roll; ?>">
<input type="hidden" class="span12 typeahead" name="data\[<?php echo $i; ?>\]\[student_id\]" value="<?php echo $student_info->student_id; ?>">
<input type="hidden" class="span12 typeahead" name="data\[<?php echo $i; ?>\]\[subject_id\]" value="<?php echo 11; ?>">
</td>
<td>
<input type="text" class="span12 typeahead" id="ca\[\]" name="data\[<?php echo $i; ?>\]\[ca\]" onkeyup="copy_text();" >
</td>
<td>
<input type="text" class="span12 typeahead" id="part_a\[\]" name="data\[<?php echo $i; ?>\]\[part_a\]" onkeyup="copy_text();" >
</td>
<td>
<input type="text" class="span12 typeahead" id="part_b\[\]" name="data\[<?php echo $i; ?>\]\[part_b\]" onkeyup="copy_text();" >
</td>
<script>
function copy_text()
{
var total_mark=+document.getElementById('ca\[\]').value + +document.getElementById('part_a\[\]').value + +document.getElementById('part_b\[\]').value;
document.getElementById('total\[\]').value=total_mark;
if(total_mark>=80){
document.getElementById('grade\[\]').value=4.0;
}
else if(total_mark>=75){
document.getElementById('grade\[\]').value=3.75;
}
else if(total_mark>=70){
document.getElementById('grade\[\]').value=3.5;
}
else if(total_mark>=65){
document.getElementById('grade\[\]').value=3.25;
}
else if(total_mark>=60){
document.getElementById('grade\[\]').value=3.0;
}
else if(total_mark>=55){
document.getElementById('grade\[\]').value=2.75;
}
else if(total_mark>=50){
document.getElementById('grade\[\]').value=2.5;
}
else if(total_mark>=45){
document.getElementById('grade\[\]').value=2.25;
}
else if(total_mark>=40){
document.getElementById('grade\[\]').value=2.0;
}
else{
document.getElementById('grade\[\]').value=0.0;
}
}
</script>
<td>
<input type="text" class="span12 typeahead" id="total\[\]" name="data\[<?php echo $i; ?>\]\[total\]" >
</td>
<td>
<input type="text" class="span12 typeahead" id="grade\[\]" name="data\[<?php echo $i; ?>\]\[grade\]" >
</td>
</tr>
<?php $i++;} ?>
<tr class="form-actions">
<button type="submit" class="btn btn-primary">Save changes</button>
<button type="reset" class="btn">Cancel</button>
</tr>
</tbody>
</table>
</div>
</fieldset>
</form>
</div>
</div><!--/span-->
</div><!--/row-->
最佳答案
对于问题的第一部分，您可以通过使用事件方法调用函数来完成此操作。
示例:
function myFunction() {
document.getElementById("demo").innerHTML = "Hello World";
}<p>Click the button to trigger a function that will output "Hello World" in a p element with id="demo".</p>
<button onclick="myFunction()">Click me</button>
<p id="demo"></p>或者使用 javascript 事件监听器。
示例:
document.getElementById("myBtn").addEventListener("click", displayDate);
function displayDate() {
document.getElementById("demo").innerHTML = Date();
}<p>This example uses the addEventListener() method to attach a click event to a button.</p>
<button id="myBtn">Try it</button>
<p id="demo"></p>或者使用 jquery 事件监听器。
示例:
$(document).ready(function(){
$("p").click(function(){
alert("The paragraph was clicked.");
});
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>Click on this paragraph.</p>对于问题的第二部分，您可以通过在调用函数时传递参数或在使用函数时获取参数来发送参数。
调用函数时发送参数示例:
function changeText(id) {
id.innerHTML = "Ooops!";
}<h1 onclick="changeText(this)">Click on this text!</h1>获取何时处于函数中的示例(JS):
function myFunction() {
var x = document.getElementById("myText").value;
document.getElementById("demo").innerHTML = x;
}First Name: <input type="text" id="myText" value="Mickey">
<p>Click the button to display the value of the value attribute of the text field.</p>
<button onclick="myFunction()">Try it</button>
<p id="demo"></p>获取何时处于函数中的示例(Jquery):
$(document).ready(function(){
$("button").click(function(){
var first_name = $("#user_f").val();
var last_name = $("#user_l").val();
var name = first_name + " " + last_name;
$("#user").val(name);
});
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p> First Name: <input type="text" id="user_f"></p>
<p> Last Name: <input type="text" id="user_l"></p>
<p>Name: <input type="text" id="user"></p>
<button>Set the value of the input field</button>如果您想要服务器端变量，可以使用此表单。在你的函数 js 中使用这个 var x = <?php echo $valor_x; ?>; 。当您的 PHP 和 JS 位于同一页面时，此方法有效。
关于javascript - 如何从html调用javascript函数并通过它传递参数，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/43976734/