Question

我无法在第二排获得onblur功能，请帮助我。这是我的代码。

javascript

function calc()
{
var fi = document.getElementById("one");
var se = document.getElementById("two");
var th = fi.value * 59.63;
document.getElementById("three").value=th;
} 
function addRow(){ 
//var table=document.getElementById('countTable');
var tbody=document.getElementsByTagName('TBODY')[0];
var row=document.createElement('TR');
var cell1=document.createElement('TD');
var cell2=document.createElement('TD');
var cell3=document.createElement('TD');

var cell1value='';
cell1value+='One <input type="text" name="one" id="one" value="">';
var cell2value='';
cell2value+='Two <input type="text" name="two" id="two" value="">';
var cell3value='';
cell3value+='Three <input type="text" name="three" id="three" value="">';

cell1.innerHTML=cell1value;
cell2.innerHTML=cell2value;
cell3.innerHTML=cell3value;

row.appendChild(cell1);
row.appendChild(cell2);
row.appendChild(cell3);

tbody.appendChild(row);
//alert(table+' '+row+' ');
}

HTML

<table name="entry" width="100%" id="countTable">
<TBODY>
<tr>
<td>One 
<input type="text" name="one" id="one" value="" onBlur="calc();">
</td>
<td>Two
<input type="text" name="two" id="two" value="" onBlur="calc();">
</td>
<td>Three
<input type="text" name="three" id="three" value="">
</td>
</tr>
</TBODY>
</table>

<input type="button" name="add" value="Add" onClick="addRow();">

Answer 1

请注意初始行中的input元素：

<input type="text" name="one" id="one" value="" onBlur="calc();">

后续行中的输入元素：

<input type="text" name="one" id="one" value="">

它们之间存在一个关键区别，这会阻止后续行使用onBlur事件。为了响应事件，就像在第一行中一样，您需要为该事件实际附加处理程序。像这样：

<input type="text" name="one" id="one" value="" onBlur="calc();">

但请注意，您的代码还有其他问题。即：

您正在重复使用id值，因此行为或使用这些id的任何内容（例如您的calc函数）都将是未定义的。 id需要在整个文档中保持唯一。
您正在重复使用name个值。虽然允许，但当您尝试使用此表单发布的值时，这可能会导致意外的副作用。后面的元素可能会模糊早期元素的值。

javascript onblur功能无法正常工作

1 个答案: