我的jsp页面包含一个表，下面给出了相同的代码：
<table width="400" border="1" cellpadding="0" cellspacing="1" id="student_table">
<thead>
<tr>
<th scope="row">ID</th>
<th scope="row">Name</th>
<th scope="row">Country</th>
<th scope="row">Marks</th>
<th scope="row">Rank</th>
</tr>
<tbody>
<tr>
<td>1</td>
<td>Smith</td>
<td>US</td>
<td><input type="text" name="marks" value="40"/></td>
<td>20</td>
</tr>
<tr>
<td>2</td>
<td>John</td>
<td>England</td>
<td><input type="text" name="marks" value="80"/></td>
<td>29</td>
</tr>
<tr>
<td>3</td>
<td>William</td>
<td>Australia</td>
<td><input type="text" id="nm" name="marks" value="60" onblur="return(myFunction1())"/></td>
<td>33</td>
</tr>
<tr>
<td>4</td>
<td>Michael</td>
<td>Germany</td>
<td><input type="text" name="marks" value="90"/></td>
<td>29</td>
</tr>
我有一个javascript函数，用于比较两个单元格中的值。但是javascript函数不起作用。我找不到原因。请任何人帮我解决问题。我知道还有其他方法可以验证。但我需要这样做。这是一个大型程序的例子，我需要以这种方式完成。请帮忙
function myfunction11(){
var myTable = document.getElementById('student_table').tBodies[0];
// first loop for each row
for (var r=0, n = myTable.rows.length; r < n; r++) {
// this loop is getting each colomn/cells
for (var c = 0, m = myTable.rows[r].cells.length; c < m; c++) {
if(myTable.rows[r].cells[c].childNodes[0].value){
var rank = myTable.rows[r].cells[4].innerText;
var marks = myTable.rows[r].cells[c].childNodes[0].value;
if(rank>marks){
alert("rank cannot be greater than marks:"+marks);
myTable.rows[r].cells[c].childNodes[0].value="0";
return false;
}
}
}
}
return true;
}
答案 0 :(得分：1)
在您的HTML中，您有：
onblur="return(myFunction1())
但您的实际功能名称是：
myfunction11()
匹配名称后，您的功能就会运行。但是，您的代码确实存在一个（至少）问题。您正在比较rank > marks，但marks来自输入字段。所有HTML数据都是字符串，因此您必须将该字符串转换为数字，以对其执行任何类型的数学运算。此外，innerText是非标准代码，请改用textContent。请参阅代码中的注释。
function myFunction1(){
var myTable = document.getElementById('student_table').tBodies[0];
// first loop for each row
for (var r=0, n = myTable.rows.length; r < n; r++) {
// this loop is getting each colomn/cells
for (var c = 0, m = myTable.rows[r].cells.length; c < m; c++) {
if(myTable.rows[r].cells[c].childNodes[0].value){
// All HTML data is strings. If you expect a number, you have to convert it.
// Also, use textContent to get the text of an element. innerText is non-standard
var rank = parseInt(myTable.rows[r].cells[4].textContent,10);
var marks = parseInt(myTable.rows[r].cells[c].childNodes[0].value, 10);
if(rank > marks){
alert("rank cannot be greater than marks: " + marks);
myTable.rows[r].cells[c].childNodes[0].value = "0";
return false;
}
}
}
}
return true;
}<table width="400" border="1" cellpadding="0" cellspacing="1" id="student_table">
<thead>
<tr>
<th scope="row">ID</th>
<th scope="row">Name</th>
<th scope="row">Country</th>
<th scope="row">Marks</th>
<th scope="row">Rank</th>
</tr>
<tbody>
<tr>
<td>1</td>
<td>Smith</td>
<td>US</td>
<td><input type="text" name="marks" value="40"/></td>
<td>20</td>
</tr>
<tr>
<td>2</td>
<td>John</td>
<td>England</td>
<td><input type="text" name="marks" value="80"/></td>
<td>29</td>
</tr>
<tr>
<td>3</td>
<td>William</td>
<td>Australia</td>
<td><input type="text" id="nm" name="marks" value="60" onblur="return(myFunction1())"/></td>
<td>33</td>
</tr>
<tr>
<td>4</td>
<td>Michael</td>
<td>Germany</td>
<td><input type="text" name="marks" value="90"/></td>
<td>29</td>
</tr>
</table>
现在，为了纠正您的代码并让它使用现代标准，以便在您离开任何字段时它起作用，我们写下：
// Don't use inline HTML event handling attributes like "onclick", "onblur", etc.
// Instead, use modern standards of separating all your JavaScript from your HTML
// Get a collection of all the input fields. There are many ways to do this, but here
// we are getting all the elements that use the marks class (HTML adjusted above)
var inputs = document.querySelectorAll(".marks");
// Loop through the collection and assign the checkMarks function as the blur event
// callback funciton to each of them.
for(var i = 0; i < inputs.length; i++){
inputs[i].addEventListener("blur", checkMarks);
}
function checkMarks(evt){
// Just check the marks and the rank next to it
// All HTML data is strings. If you expect a number, you have to convert it.
// The parseInt() function can extract numbers from a string.
// Also, use textContent to get the text of an element. innerText is non-standard
// All event handling functions automatically recieve an argument representing the
// event that they are responding to (evt in this case). That event object, in turn,
// has a property (target) that references the element that triggered the event in the
// first place. To get to the table cell that comes after an input field, we start at
// the input field (evt.target) and then get the parent element of that (the <td> element
// that the input is inside of) and then the next element that is a sibling of that (the <td>
// that contains the rank.
var rank = parseInt(evt.target.parentNode.nextElementSibling.textContent, 10);
// To get the value of the input, just look at evt.target's value
var marks = parseInt(evt.target.value, 10);
if(rank > marks){
alert("rank cannot be greater than marks: " + marks);
evt.target.value = "0";
}
}<table width="400" border="1" cellpadding="0" cellspacing="1" id="student_table">
<thead>
<tr>
<th scope="row">ID</th>
<th scope="row">Name</th>
<th scope="row">Country</th>
<th scope="row">Marks</th>
<th scope="row">Rank</th>
</tr>
<tbody>
<!-- Form elements should generally have unique names so you can tell them apart when
they submit their data. -->
<tr>
<td>1</td>
<td>Smith</td>
<td>US</td>
<td><input type="text" class="marks" name="US_Marks" value="40"/></td>
<td>20</td>
</tr>
<tr>
<td>2</td>
<td>John</td>
<td>England</td>
<td><input type="text" class="marks" name="England_Marks" value="80"/></td>
<td>29</td>
</tr>
<tr>
<td>3</td>
<td>William</td>
<td>Australia</td>
<td><input type="text" id="nm" class="marks" name="Austrailia_Marks" value="60"></td>
<td>33</td>
</tr>
<tr>
<td>4</td>
<td>Michael</td>
<td>Germany</td>
<td><input type="text" class="marks" name="Germany_Marks" value="90"/></td>
<td>29</td>
</tr>
</table>
答案 1 :(得分：0)
尝试将onblur="return(myFunction1())"更改为onblur="return(myFunction11())"