那些遇到过的问题

如何将输入字段值相加并使用Javascript将其显示到html表中？

Par*_*thi 5 html javascript php forms

在此输入图像描述

我是Javascript的新手,请帮我解决这个问题Javascript专家.我有一个注册表格,上面有这些字段.在此表单中,当我单击"添加新注册行"时,它将插入新的插入字段,如上所示.从这些,我想添加这些高亮的输入字段值并将其显示在html表中.当我选中复选框时,值应显示在可用字段中.同样,当我取消选中该复选框时,值应显示在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>
Run Code Online (Sandbox Code Playgroud)

raj*_*504 0

因为看来您正在使用Jquery 框架，您可以使用模板功能，该功能将允许您使用 javascript 数据并从中创建 html，但我个人还没有使用它。但是因为您也使用 PHP 标记了它。为什么不直接用 PHP 来做呢？

\n\n

例如：

\n\n
$formData[];\nforeach($_POST AS $field => $value) {\n   $formData[$field] = $value;   \n}\n
Run Code Online (Sandbox Code Playgroud)\n\n

然后你的所有数据都在一个数组中，并且更容易使用。只需确保放入表单标签并使用该method=\xe2\x80\x9cpost\xe2\x80\x9d属性即可。

\n

归档时间：

查看次数：

2467 次

最近记录：

13 年，5 月 前
相关归档
如何在PHP中使用bcrypt进行散列密码？ 1230
PHP函数来获取URL的子域 104
你如何跨域使用window.postMessage？ 81
在迭代器上使用map() 64
如何使用javascript从<input type ='file'... />(间接)获取文件 29
使用HTTP-Basic身份验证发出HTTP GET请求 27
使HTML5可拖动项滚动页面？ 20
ckeditor数据未通过jQuery验证进行验证 17
Adding Marketo Form to Gatsby/JSX 3
optgroup获取与php标签关联 1
难疑归档
Python有三元条件运算符吗？ 5591
403 Forbidden vs 401 Unauthorized HTTP响应 2544
2048游戏的最佳算法是什么？ 1893
如何检查变量是否是JavaScript中的数组？ 1713
如何一致地跨浏览器对齐复选框及其标签 1668
用64位替换32位循环计数器会引入疯狂的性能偏差 1370
在Android上旋转活动重启 1341
Django会扩展吗？ 1101
按属性排序自定义对象的ArrayList 1093
什么是首选的Bash shebang？ 1051