Fatal编程技术网
  • javascript/
  • Javascript 如何在'；onblur'；同一表格中不同文本框的事件？

Javascript 如何在'；onblur'；同一表格中不同文本框的事件？

javascript html

Javascript 如何在'；onblur'；同一表格中不同文本框的事件？,javascript,html,onblur,Javascript,Html,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

我有一张如下的桌子。我必须使用
购买数量
和
市场价格
字段填充
金额
字段<代码>金额=购买数量*市场价格。我正在做一些类似的事情-

<!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>


买股票
（功能（）{
var table=document.getElementById（“mytable”）；
var tbody=table.getElementsByTagName（“tbody”）[0]；
var rows=tbody.getElementsByTagName（“tr”）；
函数populateRow（索引，addBlurEvent）{
var行=行[索引]；
var cells=row.getElementsByTagName（“td”）
var textboxs=row.getElementsByTagName（“输入”）；
var amountTextbox=textboxs[0]；
var totalTextbox=文本框[1]；
var-costCell=细胞[2]；
var amount=amountTextbox.value.length>0？parseFloat（amountTextbox.value）：0；
var cost=parseFloat（costCell.innerHTML）；
风险价值总额=金额*成本；
totalTextbox.value=总计；
如果（添加事件）{
amountTextbox.onblur=function（）{populateRow（index，false）；}；
}
}
对于（i=0；i见下表：

如果您只想使用您的代码，而不是我上面给出的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>




买股票
在这里买股票
股票名称
购买数量
市场价格
数量
股票名称
122
股票名称
111
（功能（）{
var table=document.getElementById（“mytable”）；
var tbody=table.getElementsByTagName（“tbody”）[0]；
var rows=tbody.getElementsByTagName（“tr”）；
函数populateRow（索引，addBlurEvent）{
var行=行[索引]；
var cells=row.getElementsByTagName（“td”）
var textboxs=row.getElementsByTagName（“输入”）；
var amountTextbox=textboxs[0]；
var totalTextbox=文本框[1]；
var-costCell=细胞[2]；
var amount=amountTextbox.value.length>0？parseFloat（amountTextbox.value）：0；
var cost=parseFloat（costCell.innerHTML）；
风险价值总额=金额*成本；
totalTextbox.value=总计；
如果（添加事件）{
amountTextbox.onblur=function（）{populateRow（index，false）；}；
}
}

对于（i=0；i“我无法处理‘onblur’事件”是什么意思？@nihal sharma我添加了一个提琴示例。请检查。@jim-我的意思是我不知道如何处理自调用函数，然后将onblur附加到它。@NihalSharma-您使用的自调用函数在html解析之前运行，因此不会向代码中添加任何处理程序。请在结束体标记之前添加javascript。@pushpesh-以上建议有效。非常感谢。