无法通过遍历Javascript数组向现有表添加新列

Question

我有两个表，我将行从一个表复制到另一个表。在复制时，我只想复制列中的一个下拉列表中的选定值和行，我几乎可以这样做，但是第一个值在追加时从数组中丢失了。

这是我的密码

​

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

​

下面的图片显示了我能得到的结果。请建议我在这里缺少的更改，以获得正确的值。谢谢您对此所需的修改/建议。

​

​

Answer 1

使用$('#dynamictable tbody tr')而不是$('#dynamictable tbody')。您可以只添加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>

​