user3534759 user3534759 - 6 months ago 37
jQuery Question

unable to append new column to existing table by looping through Javascript array

I have two tables and I am copying row from one table to another. while copying I want to copy only selected value from dropdown in one of the column along with row.I am able to do it almost but first value it is missing from an array while appending.

Here is my code



$("#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>





Below image show the results what I am able to get. Please suggest me the changes which is missing here to get correct values. Thanks for any modifications/suggestions required here

enter image description here

Answer

Use $('#dynamictable tbody tr') instead of $('#dynamictable tbody'). Instead of removing last column, you can just add html(). Also initialize jsonObj as a global variable.

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>