使用javascript計算輸入值（新字段）

Question

 <script> var ex=1; function add1(){ a1=Number(document.form.present_+ex.value); a2=Number(document.form.total_+ ex.value); g1=(a1/a2)*100; document.form. percentage_ex. value=g1; } </script> <script language="javascript" type="text/javascript" > var ex=1; function Add() { var tbl = document.getElementById('tab'); var lastRow = tbl.rows.length; var iteration = lastRow - 1; var row = tbl.insertRow(lastRow); var firstCell = row.insertCell(0); var e=document.createElement('input'); e.type='text'; e.name='register_'+ex; e.id='register_'+ex; e.placeholder='Register Num'; e.className='form-control'; firstCell.appendChild(e); var secondCell = row.insertCell(1); var eve=document.createElement('input'); eve.type='text'; eve.name='present_'+ex; eve.id='present_'+ex; eve.placeholder='Present Hours'; eve.className='form-control'; secondCell.appendChild(eve); var thirdCell = row.insertCell(2); var e1 = document.createElement('input'); e1.type='text'; e1.name='total_'+ex; e1.id='total_'+ex; e1.placeholder='Total Hours'; e1.className='form-control'; thirdCell.appendChild(e1); var fourthCell = row.insertCell(3); var e2 = document.createElement('input'); e2.type='text'; e2.name='percentage_'+ex; e2.id='percentage_'+ex; e2.placeholder='Percentage'; e2.readOnly="true" e2.className='form-control'; fourthCell.appendChild(e2); ex++; sampleform.ex.value=ex; } </script> 

  <form action="" method="post" name="sampleform"> <table id="tab" class="table table-responsive" <tr> <td><input type="text" name="register_0" id="register_0" placeholder="Register Num" class="form-control" required></td> <td><input type="text" name="present_0" id="present_0" placeholder="Present Hours" class="form-control" autocomplete="off" ></td> <td> <input type="text" name="total_0" id="total_0" placeholder="Total Hours" class="form-control" autocomplete="off" > </td> <td> <input type="text" name="percentage_0" id="percentage_0" placeholder="Percentage" class="form-control" autocomplete="off" readonly> </td> <td><button type="button" name="add" onclick="Add();" class="btn btn-block btn-sm" width="50px;">ADD</button></td> </tr> </table> </center> <lable> <input name="ex" type="hidden" id="ex" value="1"> </lable> <br /> <button type="button" onclick="javascript:add1();" class=" btn btn-info">Cal..</button> <input type ="submit" name="submit" value="submit" class="btn btn-danger"> </center> </form> 

輸出屏幕。 百分比計算顯示為空白。 我在Javascript中不是很完美。.我想顯示在下一個名為“百分比”的輸入框中的輸入框中輸入的百分比。 誰能幫我弄清楚嗎？

Answer 1

我編輯了您的腳本。 使用document.forms ['formname'] ['formvalue']。

例如：document.forms ['sampleform'] ['present _'+ ex]

並將“ ex”變量更改為0，因為字段的名稱為“ present_0”，“ total_0” ...

var ex=0; 
function add1(){
a1=Number(document.forms['sampleform']['present_'+ex].value);
a2=Number(document.forms['sampleform']['total_'+ex].value);

g1=(a1/a2)*100;

document.forms['sampleform']['percentage_' + ex].value=g1;

}

更新：固定的Add（）函數：

function Add() { 
ex++; //this must be executed at the beginning.
var tbl = document.getElementById('tab'); 
var lastRow = tbl.rows.length; 
var iteration = lastRow - 1; 
var row = tbl.insertRow(lastRow); 

 var firstCell = row.insertCell(0); 
 var e=document.createElement('input');
e.type='text';
e.name='register_'+ex;
e.id='register_'+ex;
e.placeholder='Register Num';
e.className='form-control'; 

firstCell.appendChild(e);


var secondCell = row.insertCell(1); 
var eve=document.createElement('input');
eve.type='text';
eve.name='present_'+ex;
eve.id='present_'+ex;
eve.placeholder='Present Hours';
eve.className='form-control'; 
secondCell.appendChild(eve);


var thirdCell = row.insertCell(2); 
var e1 = document.createElement('input');
e1.type='text';
e1.name='total_'+ex;
e1.id='total_'+ex;
e1.placeholder='Total Hours';
e1.className='form-control'; 
thirdCell.appendChild(e1);


var fourthCell = row.insertCell(3); 
var e2 = document.createElement('input');
e2.type='text';
e2.name='percentage_'+ex;
e2.id='percentage_'+ex;
e2.placeholder='Percentage';
e2.readOnly="true"
e2.className='form-control'; 
fourthCell.appendChild(e2);

sampleform.ex.value=ex; 
 }

JsFiddle： https ：//jsfiddle.net/8h3rv3jh/1/