每次將新行推送到數組時，編輯數組中的第一個值

Question

我正在創建一個字符串生成器，但我被卡在最後一部分。

我有一個表格有一些輸入字段。這張表可以被克隆，所以我不知道有多少輸入字段，它可能是5,10,15等等。我使用一個函數來遍歷表中的所有輸入字段。所有這些行將放在一個數組中。然後我使用我的$(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>