如何在同一個表中的不同文本框的'onblur'事件中的表中填充文本框？

-1

我有一個表如下。我必須使用Buy Quantity和Market Price字段填充Amount字段。 Amount = Buy Quantity*Market Price。我做的事 -如何在同一個表中的不同文本框的'onblur'事件中的表中填充文本框？

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"  "http://www.w3.org/TR/html4/loose.dtd"> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"> 
<title>Buy Stocks</title> 

<script> 
(function(){ 

var table = document.getElementById("mytable"); 
var tbody = table.getElementsByTagName("tbody")[0]; 
var rows = tbody.getElementsByTagName("tr"); 
function populateRow(index, addBlurEvent){ 
    var row = rows[index]; 
var cells = row.getElementsByTagName("td") 
    var textboxes = row.getElementsByTagName("input"); 
var amountTextbox = textboxes[0]; 
    var totalTextbox = textboxes[1]; 
    var costCell = cells[2]; 
    var amount = amountTextbox.value.length>0 ? parseFloat(amountTextbox.value) : 0; 
    var cost = parseFloat(costCell.innerHTML); 
var total = amount * cost; 
    totalTextbox.value = total; 
if (addBlurEvent) { 
     amountTextbox.onblur = function(){ populateRow(index,false); }; 
    } 
} 
for(i=0;i<rows.length;i++){ 
    populateRow(i,true);  
} 
})(); 


</script> 
</head> 
<body> 
<center> 

<h5>Buy Stocks Here</h5> 
    <form > 
    <table border="1" cellpadding="5" id="mytable"> 
    <thead> 
     <tr> 
     <th>Stock Name</th> 
     <th>Buy Quantity</th> 
     <th>Market Price</th> 
     <th>Amount</th> 
     </tr> 
    </thead> 
    <tbody> 
<tr> 
     <td>Stock Name</td> 
     <td><input type="text" name="quantity" ></td> 
     <td>122</td> 
     <td><input type="text" name="amount"></td> 
     </tr> 

     <tr> 
     <td>Stock Name</td> 
     <td><input type="text" name="quantity" ></td> 
     <td>111</td> 
     <td><input type="text" name="amount"></td> 
     </tr> 

    </tbody> 
    </table> 
</form> 
</center>

javascript函數應該很好地工作上面的HTML的，我不能夠處理「的onblur」事件。我該怎麼做，在哪裏做？請提出一個不會修改腳本的答案。謝謝。

參考圖片：

enter image description here

來源

2012-09-27 Nihal Sharma

你是什麼意思_「我無法處理'onblur'事件'_？ –

@ nihal-sharma我已經添加了一個例子小提琴。覈實。 –

@jim - 我的意思是我不知道如何處理自調用函數，然後將onblur附加到它。 –

看到這個：http://jsfiddle.net/picklespy/cxUz9/

如果你想，而不是jQuery的一個，我上面給使用你的代碼，請使用此：

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"  "http://www.w3.org/TR/html4/loose.dtd"> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"> 
<title>Buy Stocks</title> 
</head> 
<body> 
<center> 

<h5>Buy Stocks Here</h5> 
    <form > 
    <table border="1" cellpadding="5" id="mytable"> 
    <thead> 
     <tr> 
     <th>Stock Name</th> 
     <th>Buy Quantity</th> 
     <th>Market Price</th> 
     <th>Amount</th> 
     </tr> 
    </thead> 
    <tbody> 
<tr> 
     <td>Stock Name</td> 
     <td><input type="text" name="quantity" ></td> 
     <td>122</td> 
     <td><input type="text" name="amount"></td> 
     </tr> 

     <tr> 
     <td>Stock Name</td> 
     <td><input type="text" name="quantity" ></td> 
     <td>111</td> 
     <td><input type="text" name="amount"></td> 
     </tr> 

    </tbody> 
    </table> 
</form> 
</center> 
<script type="text/javascript"> 
(function(){ 

var table = document.getElementById("mytable"); 
var tbody = table.getElementsByTagName("tbody")[0]; 
var rows = tbody.getElementsByTagName("tr"); 
function populateRow(index, addBlurEvent){ 
    var row = rows[index]; 
var cells = row.getElementsByTagName("td") 
    var textboxes = row.getElementsByTagName("input"); 
var amountTextbox = textboxes[0]; 
    var totalTextbox = textboxes[1]; 
    var costCell = cells[2]; 
    var amount = amountTextbox.value.length>0 ? parseFloat(amountTextbox.value) : 0; 
    var cost = parseFloat(costCell.innerHTML); 
var total = amount * cost; 
    totalTextbox.value = total; 
if (addBlurEvent) { 
     amountTextbox.onblur = function(){ populateRow(index,false); }; 
    } 
} 
for(i=0;i<rows.length;i++){ 
    populateRow(i,true);  
} 
})(); 
</script> 
</body> 
</html>

來源

2012-09-27 06:04:43

如何在同一個表中的不同文本框的'onblur'事件中的表中填充文本框？

回答

相關問題