CODEWITHSUNDEEP
javascriptjqueryhtml
kanishka
kanishka

Reputation: 89

jQuery Clone table row with selected drop down value

i want clone previous row's selected option value to the new raw while cloning new row. 

$("#btnAdd").on("click", function() {
  var $tableBody = $('#tbl').find("tbody"),
    $trLast = $tableBody.find("tr:last"),
    $trNew = $trLast.clone();
  $trLast.after($trNew);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id='tbl'>
  <tbody>
    <tr>
      <td>
        <p>Cell3</p>
      </td>
      <td>
        <select>
          <option value="volvo">Volvo</option>
          <option value="saab">Saab</option>
        </select>
      </td>
    </tr>
  </tbody>
</table>

<input type="button" id="btnAdd" value="Add New Row"></button>

I'm unable to copy the last row selected drop down list value, any solution or cloning is not the way to do it?

Upvotes: 2

Views: 2743

Answers (3)

Marcos Augusto
Marcos Augusto

Reputation: 41

My solution was

$trNew.find('.bootstrap-select').next().remove();

Upvotes: 0

Satpal
Satpal

Reputation: 133433

You need to set the select elements value as .clone() intentionally doesn't copy dynamic state of textarea and select

Note: For performance reasons, the dynamic state of certain form elements (e.g., user data typed into textarea and user selections made to a select) is not copied to the cloned elements. When cloning input elements, the dynamic state of the element (e.g., user data typed into text inputs and user selections made to a checkbox) is retained in the cloned elements.

Use

$trNew.find('select').val($trLast.find('select').val());


$("#btnAdd").on("click", function() {
  var $tableBody = $('#tbl').find("tbody"),
    $trLast = $tableBody.find("tr:last"),
    $trNew = $trLast.clone();
  //Set updated value
  $trNew.find('select').val($trLast.find('select').val())
  $trLast.after($trNew);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id='tbl'>
  <tbody>
    <tr>
      <td>
        <p>Cell3</p>
      </td>
      <td>
        <select>
          <option value="volvo">Volvo</option>
          <option value="saab">Saab</option>
        </select>
      </td>
    </tr>
  </tbody>
</table>

<input type="button" id="btnAdd" value="Add New Row"></button>

If case tr has multiple select, Value's can be fetched based on index of the element.

$trNew.find('select').val(function(index, value) {
  return $trLast.find('select').eq(index).val();
});


$("#btnAdd").on("click", function() {
  var $tableBody = $('#tbl').find("tbody"),
    $trLast = $tableBody.find("tr:last"),
    $trNew = $trLast.clone();

  $trNew.find('select').val(function(index, value) {
    return $trLast.find('select').eq(index).val();
  });
  $trLast.after($trNew);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id='tbl'>
  <tbody>
    <tr>
      <td>
        <p>Cell3</p>
      </td>
      <td>
        <select>
          <option value="volvo">Volvo</option>
          <option value="saab">Saab</option>
        </select>
      </td>
      <td>
        <select>
          <option value="red">Red</option>
          <option value="blue">Blue</option>
        </select>
      </td>
    </tr>
  </tbody>
</table>

<input type="button" id="btnAdd" value="Add New Row"></button>

Upvotes: 3

kgbph
kgbph

Reputation: 921

You can modify $trNew elements before appending it.

In your case:

$('select', $trNew).val($('select', $trLast).val());

Upvotes: 1

Related Questions