JavaScript在atable中为唯一id添加另一行，显示id的NAN值

JavaScript add another row in atable for unique id showing NAN value for id

本文关键字：id 一行 显示 NAN atable 唯一 添加 JavaScript      更新时间：2023-09-26

我有一个html表。我的标记是这样的：

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

现在，我有一个名为的按钮添加新行：

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

在js文件中，我有类似于的createRow()函数

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中。有人能告诉我为什么会出现这个问题吗？任何帮助和建议都是非常可观的。

如果页面上只有一个实例，则document.forms[0].elements["prdprice[]"]将只返回单个DOM元素，因此在此调用.length将返回undefined: 
var newlineno = document.forms[0].elements["prdprice[]"].length; // Undefined
newlineno++; // NaN

如果可能，请使用querySelectorAll：

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

看这把小提琴演示三个输入：http://jsfiddle.net/Blade0rz/3Eyba/

这个演示了一个：http://jsfiddle.net/Blade0rz/kqakC/

变量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

您所要做的就是在newlineno变量周围添加一个parseInt（）函数，将其转换为整数值。我遇到了同样的问题，它像一样得到了解决

var size=parseInt（document.getElementById（disease+"members"）.value）；

也许你应该使用.value而不是.length

示例：var newlineno=parseInt（document.getElementById（"prdprice"）.value）；

或者对上面的例子做一些修改，它可能对你有用。

相关文章：