Javascript-行に動的にドロップボックスと数式が含まれています

Question

コード、名前、数量、価格、合計の5つの列で構成される表があります。

コードには、別のテーブルから動的に取得するドロップボックスメニューが含まれています。ユーザーがドロップボックスをクリックしてコードを選択すると、アイテムの名前が[名前]列に自動的に表示されます。

合計列の場合は、数量と価格を掛けた値が表示されます。私が使用した乗算のスクリプトは次のとおりです。

<script language="javascript" type="text/javascript"> 
    function multiply() 
    { 
    a=Number(document.calculator.qty.value); 
    b=Number(document.calculator.price.value); 
    c=a*b; 
    document.calculator.total.value=c; 
    } 
</script> 

として、以下の表のための私のコード：

<table id="theTable" border="1"> 
     <script> 
      var maxID = 0; 
      function getTemplateRow() { 
      var x = document.getElementById("templateRow").cloneNode(true); 
      x.id = ""; 
      x.style.display = ""; 
      x.innerHTML = x.innerHTML.replace(/{id}/, ++maxID); 
      return x; 
      } 
      function addRow() { 
      var t = document.getElementById("theTable"); 
      var rows = t.getElementsByTagName("tr"); 
      var r = rows[rows.length - 1]; 
      r.parentNode.insertBefore(getTemplateRow(), r); 
      } 
     </script> 

    <thead> 
     <tr> 
      <th> Code </th> 
      <th> Name </th> 
      <th> Qty </th> 
      <th> Price </th> 
      <th> Total </th> 
     <tr> 
    </thead> 

    <tbody> 
     <tr id="templateRow"> 
      <td type="text" name="code" id="code"/readonly> 
       <?php 
       mysql_connect("localhost","root",""); 
       mysql_select_db("inventory"); 
       $result = mysql_query("select * from input_code_data"); 
       $jsArray = "var code = new Array();\n"; 
       echo '<select name="code" onchange="changeValue(this.value)">'; 
       echo '<option></option>'; 
       while ($row = mysql_fetch_array($result)) { 
       echo '<option value="' . $row['code'] . '">' . $row['code'] . '</option>'; 
       $jsArray .= "code['" . $row['code'] . "'] = {name:'" . addslashes($row['name']) . "',desc:'".addslashes($row['name'])."'};\n"; 
       } 
       echo '</select>'; 
       ?> 
      </td> 

      <td><input type="text" name="name" id="name"/readonly> 
       <script type="text/javascript"> 
        <?php echo $jsArray; ?> 
        function changeValue(id){ 
        document.getElementById('code').value = code[id].name; 
        document.getElementById('name').value = code[id].desc; 
        }; 
       </script> 
      </td> 

      <td><input type="text" name="qty"></td> 
      <td><input type="text" name="price"></td> 
      <td><input type="text" name="total" /readonly><INPUT type="button" value="Click" onclick="javascript:multiply();"></td> 
     </tr> 
    </tbody>   
    </table> 
    <INPUT type='button' value='+' onclick="addRow('theTable')" /> 

私は行を追加クリックすると、新しい行が表示され、フォーマットは正しいです。問題は、2番目の行のコードをドロップボックスから選択すると、2番目の行ではなく、1番目の行に名前が表示されることです。別の問題Click乗算のボタンが2番目の行で機能していません。

誰に教えてもらえませんか？ありがとう。

Answer 1

あなたのchangeValue(id)関数が行IDではなく選択フィールドの値で呼び出されているからです。さらに、静的IDを渡すのではなく静的IDで要素を取得しています.HTMLでは、IDはページごとに1回しか表示されないと仮定しているため、最初の一致が常に返されます。いくつかのサンプルコードの

---

EDITは：（私は正しくあなたを理解していた場合）

これは、問題のいくつかを扱います。 IDとその他のセレクタの仕組みについては、MDN docsが役に立ちます。

multiply

は、元のコードと同じ問題に苦しんでいるが、以下である何がに基づいてそれを把握することができるはずです。

<table id="theTable" border="1"> 
    <thead> 
     <tr> 
      <th> Code </th> 
      <th> Name </th> 
      <th> Qty </th> 
      <th> Price </th> 
      <th> Total </th> 
     <tr> 
    </thead> 
    <tbody> 
     <tr class="templateRow" id="invoice-line-1"> 
      <td class="code"> 
       <select onchange="changeValue(this.value, 'invoice-line-1')"> 
        <option value="1">Option 1</option> 
        <option value="2">Option 2</option> 
        <!-- etc. --> 
       </select> 
       <span></span> 
      </td> 
      <td class="name"></td> 
      <td><input type="text" name="qty"></td> 
      <td><input type="text" name="price"></td> 
      <td> 
       <input type="text" name="total" /readonly> 
       <input type="button" value="Click" onclick="javascript:multiply();"> 
      </td> 
     </tr> 
    </tbody>   
</table> 
<input type='button' value='+' onclick="addRow('theTable')" /> 

<script type="text/javascript"> 
    var codes = { 
      "1": {value: 1, name: "Option 1"}, 
      "2": {value: 2, name: "Option 2"}, 
      // etc. 
     }, 
     numRows = 1; 

    function changeValue(value, id){ 
     document.querySelector('#' + id + ' td.name').innerHTML = codes[value].name; 
     document.querySelector('#' + id + ' td.code > span').innerHTML = code[value].value; 
    }; 

    function addRow() { 
     var newRow = document.getElementById("invoice-line-1").cloneNode(true), 
     table = document.querySelector("#theTable > tbody"); 
     newRow.id = "invoice-line-" + (numRows = numRows + 1); 
     table.appendChild(rewRow); 
     document.querySelector("#invoice-line-" + numRows + " .code > select").setAttribute('onchange', "changeValue(this.value, 'invoice-line-" + numRows + "')"); 
    } 
</script>