php - 如何使用 Javascript 对输入字段值求和并将其显示到 html 表中？

Question

我是 Javascript 的新手，请 Javascript 专家帮助我解决这个问题。 我有一个包含上述字段的注册表。在此表单中，当我单击“添加新注册行”时，它将像上面一样插入新的插入字段。从这些中，我想添加这些突出显示的输入字段值并将其显示在 html 表中。当我选中复选框时，值应显示在 invoicable 字段中，同样，当我取消选中复选框时，值应显示在 Non-Voicable 字段中。我的意思是选中值的总和应该显示在 Invoicable 字段中，未选中值的总和应该显示在 Non-invoicable 字段中。 这是我正在尝试的问题的代码部分:

    <script type="text/javascript">  
$(function() {
var i = 8 + 1;
$('input#add').click(function() {
//store in hidden value for total row
document.getElementById("consinvoice").value=i;

$("<span style='margin-left:126px;'>:&nbsp;<select name='RegistrationType_"+i+"' id='RegistrationType_"+i+"' onchange=\"register('Invoicable_"+i+"',this.value,ConsultancyHours_"+i+".value)\"><option value='CH'>Consultancy Hours</option><option value='LH'>Lunch Hours</option><option value='TH'>Transportation Hours</option><option value='OH'>Other Hours</option></select>&nbsp;<input name='ConsultancyHours_"+i+"' type='text' id='ConsultancyHours_"+i+"' size='5' onkeyup=\"invotable(this.id,this.value);\"  /><label for='Hourprice'> Std. Hourprice</label>&nbsp;<input name='Hourprice_"+i+"' type='text' id='Hourprice_"+i+"' size='5' />&nbsp;<label for='Hourprice'>- Discount Hourprice</label>&nbsp;<input name='Hourprice2_"+i+"' type='text' id='Hourprice2_"+i+"' size='5' /><br /><span style='margin-left:652px;'><input name='Invoicable_"+i+"' type='checkbox' id='Invoicable_"+i+"' checked='checked' onclick=\"register('Invoicable_"+i+"',RegistrationType_"+i+".value,ConsultancyHours_"+i+".value)\" /><label for='Invoicable'> Invoicable</label></span><br /></span>").appendTo('dd');
i++;
}); 
});  
</script>
<script  type="text/javascript">
//register('Invoicable_"+i+"',RegistrationType_"+i+".value,this.value);
function invotable(getid,getvalue){
var getinvoicetbl = 'invoice_cons';
var previnvoice = document.getElementById(getinvoicetbl).innerHTML;
var dgetid = getid.split("_"); 
var getcount = document.getElementById("consinvoice").value;
//alert(getcount);
totalterm =0;
for (j=8;j<=getcount;j++)
{
totalterm += parseInt(document.getElementById("ConsultancyHours_"+j).value);
//register('Invoicable_'+j,document.getElementById("RegistrationType_"+j).value,document.getElementById("ConsultancyHours_"+j).value);
}
document.getElementById(getinvoicetbl).innerHTML = totalterm;

}


function register(getvoice,gettype,getvalue){
//alert(getvoice);
var checkbox = document.getElementById(getvoice).checked;
var getinvoice = 'invoice_cons';
var getnovoice = 'ninvoice_cons';
switch (gettype)
{
case "CH":
        if(checkbox ==true){
        //alert("true");
        document.getElementById(getinvoice).innerHTML = parseInt(document.getElementById("invoice_cons").innerHTML)+parseInt(getvalue);
        document.getElementById("totinvoice").value = document.getElementById(getinvoice).innerHTML;


        document.getElementById(getnovoice).innerHTML = document.getElementById("totinvoice").value - getvalue;
        alert(document.getElementById("totinvoice").value);
        alert(document.getElementById(getnovoice).innerHTML);
        } else {
                alert(document.getElementById("totinvoice").value);

        document.getElementById(getnovoice).innerHTML = parseInt(getvalue);


        document.getElementById("totinvoice").value = document.getElementById(getnovoice).innerHTML;
        document.getElementById(getinvoice).innerHTML = document.getElementById("invoice_cons").innerHTML - getvalue;
        }
break;
case "LH":
        if(checkbox ==true ){
        //alert("true");
        document.getElementById(getinvoice).innerHTML = parseInt(document.getElementById("invoice_cons").innerHTML)+parseInt(getvalue);
        document.getElementById("totinvoice").value = document.getElementById(getinvoice).innerHTML;


        document.getElementById(getnovoice).innerHTML = document.getElementById("invoice_cons").innerHTML - getvalue;

        } else {
        document.getElementById(getnovoice).innerHTML = parseInt(document.getElementById("invoice_cons").value)+parseInt(getvalue);


        document.getElementById("totinvoice").value = document.getElementById(getnovoice).innerHTML;
        document.getElementById(getinvoice).innerHTML = document.getElementById("invoice_cons").innerHTML - getvalue;
        }
default:
        if(checkbox ==true){
        //alert("true");
        document.getElementById(getinvoice).innerHTML = parseInt(document.getElementById("invoice_cons").innerHTML)+parseInt(getvalue);
        document.getElementById("totinvoice").value = document.getElementById(getinvoice).innerHTML;


        document.getElementById(getnovoice).innerHTML = document.getElementById("invoice_cons").innerHTML - getvalue;

        } else {
        document.getElementById(getnovoice).innerHTML = parseInt(document.getElementById("invoice_cons").value)+parseInt(getvalue);


        document.getElementById("totinvoice").value = document.getElementById(getnovoice).innerHTML;
        document.getElementById(getinvoice).innerHTML = document.getElementById("invoice_cons").innerHTML - getvalue;
        }
}
}
</script>
<input type="hidden" name="consinvoice" id="consinvoice" value="8" />
<input type="hidden" name="totinvoice" id="totinvoice" value="0" />
<input type="hidden" name="fromtinvoice" id="fromtinvoice" value="0" />
<td width="220">
<span id="insert_table">
<table class="" id="invtable" width="150" border="1">
<tr>
    <td align="right">
    </td>
    <td align="right"  style="padding-left:15px; padding-bottom:10px;">
        Invoicable
    </td>
    <td align="right" style="padding-left:15px; padding-bottom:10px;">
        Non-Invoicable
    </td>
    <td align="right" style="padding-left:15px; padding-bottom:10px;">
        Total
    </td>
</tr>
<tr>
    <td style="padding-bottom:10px;">Consultancy</td>
    <td align="right" id="invoice_cons">-</td>
    <td align="right" id="ninvoice_cons">-</td>
    <td align="right" >-</td>
</tr>
<tr>
    <td style="padding-bottom:10px;">Transportation</td>
    <td align="right" id="invoice_trans">-</td>
    <td align="right" id="ninvoice_trans">-</td>
    <td align="right" >-</td>
</tr>
<tr>
    <td style="padding-bottom:10px;">Lunch</td>
    <td align="right" id="invoice_lun">-</td>
    <td align="right" id="ninvoice_lun">-</td>
    <td align="right" >-</td>
</tr>
<tr>
    <td style="padding-bottom:10px;">Total</td>
    <td align="right" id="invoice_tot">-</td>
    <td align="right" id="ninvoice_tot">-</td>
    <td align="right" >-</td>
</tr>
<tr>
</table>
</span>
</table>
<p>
<label for="RegistrationType">
    Type
</label>
<span style="margin-left:92px;">
:&nbsp;<select name="RegistrationType_8" id="RegistrationType_8" onchange="register('Invoicable_8',this.value,ConsultancyHours_8.value)">
<option value="CH">Consultancy Hours</option>
<option value="LH">Lunch Hours</option>
<option value="TH">Transportation Hours</option>
<option value="OH">Other Hours</option>
</select>
<input name="ConsultancyHours_8" type="text" id="ConsultancyHours_8" size="5" onkeyup="invotable(this.id,this.value); " />
<label for="Hourprice"> 
    Std. Hourprice
</label>
<input name="Hourprice_8" type="text" id="Hourprice_8" size="5" />
<label for="Hourprice">
    - Discount Hourprice
</label>
<input name="Hourprice2_8" type="text" id="Hourprice2_8" size="5" />
<input name="Invoicable_8" type="checkbox" id="Invoicable_8" onclick="register('Invoicable_8',RegistrationType_8.value,ConsultancyHours_8.value)" checked="checked" />
<label for="Invoicable">
    Invoicable
</label>
<dd id="insert_row">
</dd>
</span>
</p>
<p>
<span style="margin-left:132px;">
<input type="button" id="add"  value="Add new registration line" />
</span>
</p>
<div style="margin-left:324px;">
</div>
<br />
<p>
<span style="margin-left:132px;">
<input type="submit" name="Submit" id="Submit" value="Save registration" />
</span>
</p>

Answer 1

您可以创建一个动态添加新行的函数和其他通过扫描表单计算小时的函数，然后在加载窗口时调用添加行函数以启动。这是我创建的源代码:

<!DOCTYPE html>
<style>
body{margin:0}
body,th,td{font:16px Arial, Helvetica, sans-serif}
table{border-spacing:0;border-collapse:collapse;table-layout:fixed}
th,td{white-space:nowrap;overflow:hidden}
th{font-weight:700}
#invtable{width:500px;margin:10px auto;border:1px solid #000}
#invtable th, #invtable td{border:1px solid #000}
#registrationForm{width:100%}
#registrationForm td{text-align:center}
#registrationForm input[type="number"]{width:140px}
</style>
<table id="invtable" width="150">
<tr>
<th>Type</th>
<th>Invoicable</th>
<th>Non-Invoicable</th>
<th>Total</th>
</tr>
<tr id="consultancy">
<th>Consultancy</th>
<td>0</td>
<td>0</td>
<td>0</td>
</tr>
<tr id="transportation">
<th>Transportation</th>
<td>0</td>
<td>0</td>
<td>0</td>
</tr>
<tr id="lunch">
<th>Lunch</th>
<td>0</td>
<td>0</td>
<td>0</td>
</tr>
<tr id="other">
<th>Other</th>
<td>0</td>
<td>0</td>
<td>0</td>
</tr>
<tr id="total">
<th>Total</th>
<td>0</td>
<td>0</td>
<td>0</td>
</tr>
</table>
<table id="registrationForm"></table>
<p><input type="button" id="addNewRegistrationLine" value="Add new registration line"></p>
<p><input type="submit" id="saveRegistration" value="Save registration"></p>
<script>
var doc = document;
function calculateHour() {
  var registrationForm = doc.getElementById('registrationForm');
  var registrationFormRows = registrationForm.rows
  var typeValue = {'CH' : [0,0], 'LH' : [0,0], 'TH' : [0,0], 'OH' : [0,0]};
  for (var i = 0, registrationFormRowsLength = registrationFormRows.length, typeSelect, inputs, hourInput, isInvoicable; i < registrationFormRowsLength; ++i) {
    typeSelect = registrationFormRows[i].getElementsByTagName('SELECT')[0];
    inputs = registrationFormRows[i].getElementsByTagName('INPUT');
    hourInput = inputs[0];
    isInvoicable = inputs[inputs.length - 1].checked ? 0 : 1;
    typeValue[typeSelect.value][isInvoicable] += hourInput.value - 0;
  }

  var total = [0, 0]

  var consultancyCells = doc.getElementById('consultancy').cells;
  consultancyCells[1].innerHTML = typeValue['CH'][0];
  total[0] += typeValue['CH'][0];
  consultancyCells[2].innerHTML = typeValue['CH'][1];
  total[1] += typeValue['CH'][1];
  consultancyCells[3].innerHTML = typeValue['CH'][0] + typeValue['CH'][1];

  var transportationCells = doc.getElementById('transportation').cells;
  transportationCells[1].innerHTML = typeValue['TH'][0];
  total[0] += typeValue['TH'][0];
  transportationCells[2].innerHTML = typeValue['TH'][1];
  total[1] += typeValue['TH'][1];
  transportationCells[3].innerHTML = typeValue['TH'][0] + typeValue['TH'][1];

  var lunchCells = doc.getElementById('lunch').cells;
  lunchCells[1].innerHTML = typeValue['LH'][0];
  total[0] += typeValue['LH'][0];
  lunchCells[2].innerHTML = typeValue['LH'][1];
  total[1] += typeValue['LH'][1];
  lunchCells[3].innerHTML = typeValue['LH'][0] + typeValue['LH'][1];

  var otherCells = doc.getElementById('other').cells;
  otherCells[1].innerHTML = typeValue['OH'][0];
  total[0] += typeValue['OH'][0];
  otherCells[2].innerHTML = typeValue['OH'][1];
  total[1] += typeValue['OH'][1];
  otherCells[3].innerHTML = typeValue['OH'][0] + typeValue['OH'][1];

  var totalCells = doc.getElementById('total').cells;
  totalCells[1].innerHTML = total[0];
  totalCells[2].innerHTML = total[1];
  totalCells[3].innerHTML = total[0] + total[1];
}

function addNewRegistrationLine() {
  var registrationForm = doc.getElementById('registrationForm');
  var row = registrationForm.insertRow(registrationForm.rows.length);
  var typeSelectCell = row.insertCell(0);
  var type = [['CH', 'Consultancy Hours'], ['LH', 'Lunch Hours'], ['TH', 'Transportation Hours'], ['OH', 'Other Hours']];
  var typeSelect = doc.createElement('SELECT');
  for (var i = 0, typeLength = type.length, option; i < typeLength; ++i) {
    option = doc.createElement('OPTION');
    option.value = type[i][0];
    option.innerHTML = type[i][1];
    typeSelect.appendChild(option);
  }
  typeSelect.onchange = calculateHour;
  var typeLabel = doc.createElement('LABEL');
  typeLabel.innerHTML = 'Type';
  typeLabel.appendChild(typeSelect);
  typeSelectCell.appendChild(typeLabel);
  var hourInput = doc.createElement('INPUT');
  hourInput.type = 'number';
  hourInput.onkeyup = calculateHour;
  typeSelectCell.appendChild(hourInput);
  var hourPriceInputCell = row.insertCell(1);
  var hourPriceInput = doc.createElement('INPUT');
  hourPriceInput.type = 'number';
  var hourPriceLabel = doc.createElement('LABEL');
  hourPriceLabel.innerHTML = 'Std. Hourprice';
  hourPriceLabel.appendChild(hourPriceInput);
  hourPriceInputCell.appendChild(hourPriceLabel);
  var discountInputCell = row.insertCell(2);
  var discountInput = doc.createElement('INPUT');
  discountInput.type = 'number';
  var discountLabel = doc.createElement('LABEL');
  discountLabel.innerHTML = '- Discount Hourprice';
  discountLabel.appendChild(discountInput);
  discountInputCell.appendChild(discountLabel);
  var invoicableCheckBoxCell = row.insertCell(3);
  var invoicableCheckBox = doc.createElement('INPUT');
  invoicableCheckBox.type = 'checkbox';
  invoicableCheckBox.onclick = calculateHour;
  var invoicableLabel = doc.createElement('LABEL');
  invoicableLabel.appendChild(invoicableCheckBox);
  invoicableLabel.appendChild(document.createTextNode('Invoicable');
  invoicableCheckBoxCell.appendChild(invoicableLabel);
}
doc.getElementById('addNewRegistrationLine').onclick = addNewRegistrationLine;
window.onload = function() {
  addNewRegistrationLine();
};
</script>

Live example