4

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

现在，我有一个名为添加的按钮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 时，我看到第一行（默认行）显示了<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。有人可以告诉我为什么会出现这个问题吗？任何帮助和建议都是非常值得赞赏的。谢谢

4

3 回答 3

2

document.forms[0].elements["prdprice[]"]如果页面上只有一个实例，则只会返回一个 DOM 元素，因此调用.lengththis 将返回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/

于 2013-07-30T06:43:46.943 回答
0

看来变量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-30T06:39:03.053 回答
0

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

var size = parseInt(document.getElementById(disease+"members").value);

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

例如： var newlineno = parseInt(document.getElementById("prdprice").value);

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

于 2013-07-30T08:22:33.200 回答