Question

我有一个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-->

现在，我有一个名为add a new line

的按钮

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

在js文件中我有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时，我看到第一行（默认值为1）显示<input type="text id="prd_name1">哪一个很好。但是，当我点击添加新行时，新创建的行ID为<input type="text" id="prd_nameNaN">。但是在这里我希望id应该像<input type="text" id="prd_name2">和第3行<input type="text" id="prd_name3">一样。对于每个新创建的行，行数将添加到每个字段id。有人可以告诉我为什么这个问题在这里？任何帮助和建议都非常值得赞赏。感谢

Answer 1

如果页面上只有一个实例，

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/

Answer 2

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

Answer 3

你需要做的就是在newlineno变量周围添加一个parseInt（）函数将它转换成一个整数值。我遇到了同样的问题并且它像这样解决了

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

可能你应该使用.value而不是.length

例如： var newlineno = parseInt（document.getElementById（“prdprice”）。value）;

或对上面的示例进行一些更改，它可能适合您。

Javascript在表中添加另一行，用于显示id的NAN值的唯一ID

3 个答案: