新しい行が配列にプッシュされるたびに、配列の最初の値を編集します。

Question

文字列ジェネレータを作成していますが、最後の部分に固執しています。

私はいくつかの入力フィールドを持つテーブルを持っています。このテーブルはクローン化されている可能性がありますので、入力フィールドの数は5,10,15などとなります。

私はテーブル内のすべての入力フィールドをループする関数を使用しています。これらの行はすべて1つの配列にまとめられます。私は$(this).find(':input.generateinput').each関数を使用して、これらの値を配列にプッシュします。問題は、すべての新しい行の最初の値の後に文字列を追加する必要があることです。

これらの私の結果は、ATMあり

1行目：Window:1:200:0:1ニーズがあることを：Window:0:0.0000:1:200:0:1

2行：にする必要がありWindow:1:200:0:1,Door:1:100:0:2：Window:0:0.0000:1:200:0:1,Door:0:0.0000:1:100:0:2

など..あなたのよう

追加する必要がある文字列を見ることができます= :0:0.0000 そして、Window:1:200:0:1は、配置されている文字列ですrを配列外の値で除算します。

あなたが私の言いたいことを理解してもらえたら、私に聞いてみてください。

これは私が使用しているコードです：

$('.generateString').click(function(e) { 
 
    e.preventDefault(); 
 
    var arrayProducts = new Array(); 
 
    $('.tableProducts').each(function(i) { 
 
    if (typeof arrayProducts[i] == "undefined") 
 
     arrayProducts[i] = new Array(); 
 
    $(this).find(':input.generateinput').each(function(k) { 
 
     // String that needs to be added behind every first item in a new array 
 
     var string = ":0:0.0000"; 
 
     arrayProducts[i].push($(this).val()); 
 
     // Here comes the last part of the code I think 
 
    }); 
 

 
    }); 
 
    var string = arrayProducts.join("|"); 
 
    var productstring = string.replace(/,/g, ":"); 
 

 
    var optionstring = arrayOptions.join("|"); 
 

 
    $('#optionstring').html(optionstring); 
 
    $('#productstring').html(productstring.split(/:(?=\D)/g).toString()); 
 

 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="productdiv"> 
 
    <table class="tableProducts"> 
 
    <tbody> 
 
     <tr> 
 
     <td>SKU:</td> 
 
     <td>Default:</td> 
 
     <td>Default Quantity:</td> 
 
     <td>User defined:</td> 
 
     <td>Position:</td> 
 
     <td></td> 
 
     </tr> 
 
     <tr> 
 
     <td> 
 
      <input type="text" class="generateinput"> 
 
     </td> 
 
     <td> 
 
      <select class="generateinput"> 
 
      <option value="1">Yes</option> 
 
      <option value="0">No</option> 
 
      </select> 
 
     </td> 
 
     <td> 
 
      <input type="text" class="generateinput"> 
 
     </td> 
 
     <td> 
 
      <select class="generateinput"> 
 
      <option value="0">No</option> 
 
      <option value="1">Yes</option> 
 
      </select> 
 
     </td> 
 
     <td> 
 
      <input type="text" class="generateinput"> 
 
     </td> 
 
     <td> 
 
      <button class="deleteProduct">Delete</button> 
 
     </td> 
 
     </tr> 
 
     <tr> 
 
     <td> 
 
      <button class="addproduct">Add Option</button> 
 
     </td> 
 
     </tr> 
 
    </tbody> 
 
    </table> 
 
</div> 
 
<hr class="hr"> 
 
<button class="generateString">Genereer string</button>

Answer 1

をあなたはindex==0をチェックして、唯一のその配列の値にカスタム文字列を追加することができます。

arrayProducts[i].push($(this).val()+(k==0?string:''));// add string only for first indexed value 

更新、非常に最初の値についてはあなたが別のクラスcustomによってそれを区別することができ、スニペットの下を参照して以下の声明に焦点を当てることは、以下のコードのように、と言ってみましょう。

arrayProducts[i].push(this.value+($(this).hasClass('custom')?string:'')); 

$('.generateString').click(function(e) { 
 
    e.preventDefault(); 
 
    var arrayProducts = new Array(); 
 
    $('.tableProducts').each(function(i) { 
 
    if (typeof arrayProducts[i] == "undefined") 
 
     arrayProducts[i] = new Array(); 
 
    $(this).find('.generateinput').each(function(k) { // taking drop downs with input here 
 
     // String that needs to be added behind every first item in a new array 
 
     var string = ":0:0.0000"; 
 
     arrayProducts[i].push(this.value+($(this).hasClass('custom')?string:'')); 
 
     // Here comes the last part of the code I think 
 
    }); 
 

 
    }); 
 
    var string = arrayProducts.join("|"); 
 
    var productstring = string.replace(/,/g, ":"); 
 

 
    var optionstring = arrayProducts.join("|"); 
 

 
    $('#optionstring').html(optionstring); 
 
    $('#productstring').html(productstring.split(/:(?=\D)/g).toString()); 
 

 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="productdiv"> 
 
    <table class="tableProducts"> 
 
    <tbody> 
 
     <tr> 
 
     <td>SKU:</td> 
 
     <td>Default:</td> 
 
     <td>Default Quantity:</td> 
 
     <td>User defined:</td> 
 
     <td>Position:</td> 
 
     <td></td> 
 
     </tr> 
 
     <tr> 
 
     <td> 
 
      <input type="text" class="generateinput custom"/> 
 
     </td> 
 
     <td> 
 
      <select class="generateinput"> 
 
      <option value="1">Yes</option> 
 
      <option value="0">No</option> 
 
      </select> 
 
     </td> 
 
     <td> 
 
      <input type="text" class="generateinput"> 
 
     </td> 
 
     <td> 
 
      <select class="generateinput"> 
 
      <option value="0">No</option> 
 
      <option value="1">Yes</option> 
 
      </select> 
 
     </td> 
 
     <td> 
 
      <input type="text" class="generateinput"> 
 
     </td> 
 
     <td> 
 
      <button class="deleteProduct">Delete</button> 
 
     </td> 
 
     </tr> 
 
     <tr> 
 
     <td> 
 
      <button class="addproduct">Add Option</button> 
 
     </td> 
 
     </tr> 
 
    </tbody> 
 
    </table> 
 
</div> 
 
<hr class="hr"> 
 
<div id="optionstring"></div> 
 
<div id="productstring"></div> 
 
<button class="generateString">Genereer string</button>