Javascript在atable中添加另一行以显示NAN值为唯一标识id

我有一个html表。里面是我的标记是这样Javascript在atable中添加另一行以显示NAN值为唯一标识id

<table id="invoices-product-detail"> 
    <tbody id="tableToModify"> 
    <?php 
     $i=1; 
     while($i<2){ 
    ?> 
    <tr> 
     <td> 
     <input type="hidden" name="prdid[]" id="prd_id<?php echo $i; ?>" /> 
     </td> 
     <td> 
     <input type="text" name="prdcost[]" id="prd_cost<?php echo $i; ?>" value="0" disabled="disabled" style="color:#333;" /> 
     </td> 
     <td> 
     <input type="text" name="prdquentity[]" id="prd_quentity<?php echo $i; ?>" tabindex="<?php echo 3+($i*5);?>" onKeyUp="calprice1(this.value,'<?php echo $i; ?>');" value="1" /> 
     </td> 
     <td> 
     <input type="text" name="prddamount[]" tabindex="<?php echo 5+($i*5);?>" readonly="true" id="prd_damount<?php echo $i; ?>" onKeyUp="calprice2(this.value,'<?php echo $i; ?>');" /> 
     </td> 
     <td id="readonly"> 
     <input readonly="readonly" name="prdprice[]" id="prd_price<?php echo $i; ?>" value="0" /> 
     </td> 
    </tr> 
    <?php 
    $i++; 
    } 
    ?> 
    </tbody> 
</table><!--#invoices-product-detail-->

现在下，我在js文件添加new line

<input type="button" onClick="createRow();" value="Add a new line"></span>

一个名为按钮我有createRow() function这样

function createRow() { 
    var newlineno = document.forms[0].elements["prdprice[]"].length; 
    newlineno++; 

    var row = document.createElement('tr'); 
    var col1 = document.createElement('td'); 
    var col2 = document.createElement('td'); 
    var col3 = document.createElement('td'); 
    var col4 = document.createElement('td'); 
    var col5 = document.createElement('td'); 
    var col6 = document.createElement('td'); 
    var col7 = document.createElement('td'); 

    row.appendChild(col1); 
    row.appendChild(col2); 
    row.appendChild(col3); 
    row.appendChild(col4); 
    row.appendChild(col5); 
    row.appendChild(col6); 
    row.appendChild(col7); 

    col1.innerHTML = "<input type=\"hidden\" name=\"prdid[]\" id=\"prd_id"+newlineno+"\" /><input type=\"text\" name=\"prdname[]\" id=\"prd_name"+newlineno+"\"; 
    col2.innerHTML = "<input type=\"text\" disabled=\"disabled\" name=\"prddesc[]\" id=\"prd_desc"+newlineno+"\" />"; 
    col3.innerHTML = "<input type=\"text\" disabled=\"disabled\" name=\"prdcost[]\" id=\"prd_cost"+newlineno+"\" value=\"0\" />"; 
    col4.innerHTML = "<input type=\"text\" name=\"prdquentity[]\" id=\"prd_quentity"+newlineno+"\" onKeyUp=\"calprice1(this.value,'"+newlineno+"');\" value=\"1\" />"; 
    col5.innerHTML = "<select name=\"prddtype[]\" class=\"discount-type\" id=\"prd_dtype"+newlineno+"\" >"+document.getElementById("prd_dtype0").innerHTML+"</select>"; 
    col6.innerHTML = "<input type=\"text\" name=\"prddamount[]\" id=\"prd_damount"+newlineno+"\" onKeyUp=\"calprice2(this.value,'"+newlineno+"');\" />"; 
    col7.innerHTML = "<input type=\"text\" name=\"prdprice[]\" id=\"prd_price"+newlineno+"\" class=\"price-input-text\" disabled=\"disabled\" value=\"0\" />"; 
    var table = document.getElementById("tableToModify"); // find table to append to 
    table.appendChild(row); // append row to table 
}

现在这里一切安好。根据js，我可以轻松添加另一行。但是，当我检查输入字段的ID时，我看到第一行（默认值）显示<input type="text id="prd_name1">哪一个是好的。但是当我点击添加一个新行，新创建的行ID是<input type="text" id="prd_nameNaN">。但在这里，我想要的id应该像<input type="text" id="prd_name2">和第三排<input type="text" id="prd_name3">等。在这里，对于每个新创建的行，行数将被添加到每个字段ID。这里有人可以告诉我为什么这个问题在这里？任何帮助和建议都非常可观。谢谢

来源

2013-07-30 NewUser

在调用VAR newlineno = document.forms [0] .elements [ “prdprice []”]。长度检查是什么newlineno。您可能需要以不同的方式获取元素的数量。如jquery，$（'。specific-class-only-for-product-names'）。 – andrewb

查看你发布的JavaScript中的突出显示。以'col1.innerHTML ='开始的行会打破语法突出显示，因为它在结尾处缺少一个'“' 虽然这不会成为问题的原因，但它可能会在以后导致您其他问题 – UweB

document.forms[0].elements["prdprice[]"]如果页面上只有一个实例，因此调用此.length将返回undefined只会返回一个DOM元素：

var newlineno = document.forms[0].elements["prdprice[]"].length; // Undefined 
newlineno++; // NaN

使用querySelectorAll如果可能的话，而不是：

var newlineno = document.querySelectorAll("[name='prdprice[]']").length

看到这个小提琴演示三种inpu TS：http://jsfiddle.net/Blade0rz/3Eyba/

而这一次展示一个：http://jsfiddle.net/Blade0rz/kqakC/

来源

2013-07-30 06:43:46 CodingIntrigue

一个工作感谢... – NewUser

看起来变量newlineno不是一个数字，这就是NaN代表。检查以下行创建一个实际数目：

var newlineno = document.forms[0].elements["prdprice[]"].length; 
newlineno++; 
console.log(newlineno); // open Firefox' Firebug or a similar tool to see the output of this variable

来源

2013-07-30 06:39:03 Zim84

所有你需要做的ID周围添加newlineno变量parseInt函数（）函数将其转换为整数value.I有同样的问题，并和它像这样解决了

var size = parseInt（document.getElementById（disease +“members”）。value）;

，也许你应该使用代替。长度.value的

例如： VAR newlineno = parseInt函数（的document.getElementById（ “prdprice”）值）;

或对上述示例进行一些更改，它可能适用于您。

来源

2013-07-30 08:22:33 darkHorse

Javascript在atable中添加另一行以显示NAN值为唯一标识id

回答

相关问题