같은 테이블에있는 다른 텍스트 상자의 '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>

위의 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'이벤트에서 테이블의 텍스트 상자를 채우는 방법은 무엇입니까?

답변

관련 문제