使用javascript(新字段）计算输入值

calculating input values using javascript ( new fields )

本文关键字：计算 输入 javascript 新字段 使用 字段      更新时间：2023-09-26

<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并不完美。。我想在下一个名为百分比的输入框中显示在输入框中输入的百分比。有人能帮我弄清楚吗？

我编辑了您的脚本。使用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;
}

UPDATE：fixed 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; 
 }

Js报价：https://jsfiddle.net/8h3rv3jh/1/

相关文章：