Javascriptの配列をループして新しい列を既存の表に追加できません

Question

2つの表があり、1つの表から別の表に行をコピーしています。コピー中は選択した値だけを列の1つのドロップダウンからrow.Nだけにコピーしたいと思っていますが、ほとんどの場合行えますが、最初の値は追加中に配列から抜けています。

は、ここで私は取得することができていますどのような結果を示し、画像の下に私のコード

$("#addrecords").click(function() { 
 
    alert("clicked"); 
 
    var found = false; 
 
    var jsonObj = []; //creating array to push all values which are selected from each drop down. 
 
    var count=0; //initializing count to iterate later to create dynamic column and append at last 
 

 
    $('#dataTable').find('tr').each(function() { 
 
    var row = $(this); 
 
    if (row.find('input[type="checkbox"]').is(':checked')) { 
 
     found = true; 
 

 
     var row = $(this).closest('tr').html(); //get checked row 
 
     var dropdownVal= $(this).find("td:eq(5)").find('option:selected').val(); //get the selected val from dropdown 
 

 
     jsonObj.push(dropdownVal); //pushing into array 
 

 
     $('#dynamictable tbody').append('<tr>' + row + '</tr>'); //appending copied row from first table to second table 
 
    } 
 
    else { 
 
     //alert "NOthing found" 
 
     //found=false; 
 
    }; 
 
    }); 
 
    if (!found) { 
 
    alert("Nothing Found"); 
 
    } 
 
    else { 
 
    //alert("Found");// Or you can omit the else part 
 
    //alert("val---" + values); 
 
    } 
 

 

 
    $('#dynamictable tr').find('td:last-child').remove(); // removing last column td in second table 
 

 
    $('#dynamictable tbody').each(function(count){ 
 

 
    $(this).find('td').eq(4).after(jsonObj[count]); //trying to append new column to table by iterating through array jsonObj loop 
 

 
    }); 
 

 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table border="1" style="width:50%" class="table table-striped" id="dataTable"> 
 
    <thead> 
 
    <tr> 
 
     <th>Select</th> 
 
     <th>FR_ID</th> 
 
     <th>Tag Name</th> 
 
     <th>FR_Source</th> 
 
     <th>FR_Destination</th> 
 
     <th>Reusability</th> 
 
    </tr> 
 
    </thead> 
 
    <tbody> 
 
    <tr> 
 
     <td><input type="checkbox" /></td> 
 
     <td>1</td> 
 
     <td>Molex</td> 
 
     <td>ITSM</td> 
 
     <td>Service Now</td> 
 
     <td><Select> 
 
     <option value="Completely">Completely</option> 
 
     <option value="Partially">Partially</option> 
 
     </Select> 
 
     </td> 
 
    </tr> 
 
    <tr> 
 
     <td><input type="checkbox" /></td> 
 
     <td>14</td> 
 
     <td>bpm,xml,snow,srms</td> 
 
     <td>itsm</td> 
 
     <td>b2b</td> 
 
     <td><Select> 
 
     <option value="Completely">Completely</option> 
 
     <option value="Partially">Partially</option> 
 
     </Select> 
 
     </td> 
 
    </tr> 
 
    </tbody> 
 
</table> 
 
<div class="small-12 columns"> 
 
    <div> 
 
    <input type="submit" value="Next" id="addrecords" style="font-size: 10px" /> 
 
    </div> 
 
</div> 
 
<br /> 
 
<table border="1" style="width:50%" class="table table-striped" id="dynamictable"> 
 
    <thead> 
 
    <tr> 
 
     <th>Select</th> 
 
     <th>FR_ID</th> 
 
     <th>FR_Client</th> 
 
     <th>FR_Source</th> 
 
     <th>FR_Destination</th> 
 
     <th>Reusability</th> 
 
    </tr> 
 
    </thead> 
 
    <tbody></tbody> 
 
</table>

です。正しい値を得るためにここに欠けている変更を私に提案してください。代わりに$('#dynamictable tbody')のいかなる変更/提案ここで必要

Answer 1

使用$('#dynamictable tbody tr')いただきありがとうございます。 最後の列を削除する代わりに、html()を追加するだけで済みます。 jsonObjもグローバル変数として初期化します。

var jsonObj = []; //creating array to push all values which are selected from each drop down. 
 
$("#addrecords").click(function() { 
 
    alert("clicked"); 
 
    var found = false; 
 
    var count = 0; //initializing count to iterate later to create dynamic column and append at last 
 

 
    $('#dataTable').find('tr').each(function() { 
 
    var row = $(this); 
 
    if (row.find('input[type="checkbox"]').is(':checked')) { 
 
     found = true; 
 
     var row = $(this).closest('tr').html(); //get checked row 
 
     var dropdownVal = $(this).find("td:eq(5)").find('option:selected').val(); //get the selected val from dropdown 
 
     jsonObj.push(dropdownVal); //pushing into array 
 
     $('#dynamictable tbody').append('<tr>' + row + '</tr>'); //appending copied row from first table to second table     
 
    } else { 
 
     //alert "NOthing found" 
 
     //found=false; 
 
    }; 
 
    }); 
 
    if (!found) { 
 
    alert("Nothing Found"); 
 
    } else { 
 
    //alert("Found");// Or you can omit the else part 
 
    //alert("val---" + values); 
 
    } 
 

 

 
    $('#dynamictable tr').find('td:last-child').empty(); // removing last column td in second table 
 
    $('#dynamictable tbody tr').each(function(count) { 
 
    console.log(jsonObj) 
 
    $(this).find('td:last-child').text(jsonObj[count]); //trying to append new column to table by iterating through array jsonObj loop 
 

 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table border="1" style="width:50%" class="table table-striped" id="dataTable"> 
 
    <thead> 
 
    <tr> 
 
     <th>Select</th> 
 
     <th>FR_ID</th> 
 
     <th>Tag Name</th> 
 
     <th>FR_Source</th> 
 
     <th>FR_Destination</th> 
 
     <th>Reusability</th> 
 
    </tr> 
 
    </thead> 
 
    <tbody> 
 
    <tr> 
 
     <td> 
 
     <input type="checkbox" /> 
 
     </td> 
 
     <td>1</td> 
 
     <td>Molex</td> 
 
     <td>ITSM</td> 
 
     <td>Service Now</td> 
 
     <td> 
 
     <Select> 
 
      <option value="Completely">Completely</option> 
 
      <option value="Partially">Partially</option> 
 
     </Select> 
 
     </td> 
 
    </tr> 
 
    <tr> 
 
     <td> 
 
     <input type="checkbox" /> 
 
     </td> 
 
     <td>14</td> 
 
     <td>bpm,xml,snow,srms</td> 
 
     <td>itsm</td> 
 
     <td>b2b</td> 
 
     <td> 
 
     <Select> 
 
      <option value="Completely">Completely</option> 
 
      <option value="Partially">Partially</option> 
 
     </Select> 
 
     </td> 
 
    </tr> 
 
    </tbody> 
 
</table> 
 
<div class="small-12 columns"> 
 
    <div> 
 
    <input type="submit" value="Next" id="addrecords" style="font-size: 10px" /> 
 
    </div> 
 
</div> 
 
<br /> 
 
<table border="1" style="width:50%" class="table table-striped" id="dynamictable"> 
 
    <thead> 
 
    <tr> 
 
     <th>Select</th> 
 
     <th>FR_ID</th> 
 
     <th>FR_Client</th> 
 
     <th>FR_Source</th> 
 
     <th>FR_Destination</th> 
 
     <th>Reusability</th> 
 
    </tr> 
 
    </thead> 
 
    <tbody></tbody> 
 
</table>