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

その下に 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 を確認すると、最初の行 (デフォルトの行) が<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 に追加されます。この問題がここにある理由を教えてください。ヘルプと提案は非常に高く評価されます。ありがとう

4

3 に答える 3

2

document.forms[0].elements["prdprice[]"]ページにインスタンスが 1 つしかない場合、単一の DOM 要素のみを返すため、.lengthこれを呼び出すと次のものが返されundefinedます。

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

可能であれば、代わりに querySelectorAll を使用してください。

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

3 つの入力を示すこのフィドルを参照してください: http://jsfiddle.net/Blade0rz/3Eyba/

そして、これは1つを示しています: http://jsfiddle.net/Blade0rz/kqakC/

于 2013-07-30T06:43:46.943 に答える
0

newlineno 変数の周りに parseInt() 関数を追加して整数値に変換するだけで済みます。同じ問題があり、このように解決されました

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

おそらく、.length の代わりに .value を使用する必要があります

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

または、上記の例にいくつかの変更を加えると、うまくいくかもしれません。

于 2013-07-30T08:22:33.200 に答える
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 に答える