Làm thế nào để tổng hợp các giá trị trường đầu vào và hiển thị nó vào bảng html bằng cách sử dụng Javascript?

Question

Tôi mới sử dụng Javascript, Xin hãy giúp tôi giải quyết vấn đề này Chuyên gia Javascript. Tôi có một mẫu đăng ký có các trường trên. Trong biểu mẫu này, khi tôi nhấp vào "Thêm dòng đăng ký mới", nó sẽ chèn trường chèn mới như trên. Từ đây, tôi muốn thêm các giá trị trường đầu vào được hiển thị màu này và hiển thị nó trong bảng html. Khi tôi chọn hộp kiểm, các giá trị sẽ được hiển thị trong trường có thể lập hóa đơn, Tương tự như vậy khi tôi bỏ chọn hộp kiểm, các giá trị sẽ được hiển thị trong trường Không thể đọc được. Ý tôi là tổng giá trị đã chọn sẽ được hiển thị trong trường Có thể lập hóa đơn và tổng giá trị không được chọn sẽ được hiển thị trong trường Không thể lập hóa đơn. Đây là phần mã của vấn đề tôi đang cố gắng:

<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

vì có vẻ như bạn đang sử dụng Jquery Framework bạn có thể sử dụng template feature mà sẽ cho phép bạn sử dụng dữ liệu javascript của bạn và tạo ra html từ nó, tôi cá nhân đã không sử dụng nó mặc dù.But kể từ khi bạn cũng được gắn thẻ này với PHP. Tại sao không chỉ làm điều đó trong PHP?

Ví dụ:

$formData[]; 
foreach($_POST AS $field => $value) { 
    $formData[$field] = $value; 
} 

Sau đó tất cả dữ liệu của bạn trong một mảng và dễ dàng hơn để làm việc với. Chỉ cần đảm bảo đưa vào thẻ biểu mẫu và sử dụng thuộc tính method=“post”.

Answer 2

Bạn có thể tạo hàm để thêm hàng mới động và chức năng khác để tính giờ bằng cách quét biểu mẫu, sau đó khi cửa sổ được tải, hãy gọi hàm thêm hàng để bắt đầu. Có mã nguồn mà tôi tạo ra:

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