CODEWITHSUNDEEP
jquery
Oliver
Oliver

Reputation: 156

How to add new table row with selected values as Text in a new row

I have a table row with select dropdown and a text input that should be added to the same table as new row but instead of a select all values should be in a text input, readonly.

What I have is the clone function. But how to change the select accordingly? Can't figure it.

<table id="table-data">
  <tbody>
  <tr id="id1" class="tr_clone"><th>Equipment</th><td>
    <select name="equi[]" id="equi">
    <option value="123">123</option>
    <option value="456">456</option>
    </select>
    <th>QTY</th><td>
      <input type="number" name="qty[]" value="0">
      </td>
      <td align="right">
<a class="add" title="add" data-toggle="tooltip">add</a>
</td></tr>
</tbody>
</table>


$(document).ready(function(){
$(document).on('click', '.add', function(e){
e.preventDefault();
var row = $(e.target).closest('tr'),
copy = row.clone();
copy.insertAfter(row);
});
});

See https://jsfiddle.net/juwxspeo/

Upvotes: 0

Views: 38

Answers (1)

Carsten L&#248;vbo Andersen
Carsten L&#248;vbo Andersen

Reputation: 27051

You can add this line:

copy.find("select").val(row.find("select").val())

So it will be:

$(document).ready(function() {
  $(document).on('click', '.add', function(e) {
    e.preventDefault();
    var row = $(e.target).closest('tr'),
      copy = row.clone();
    copy.insertAfter(row);
    copy.find("select").val(row.find("select").val())
  });
});

This will set the select to the same values as the one in the row you clicked.

Demo

$(document).ready(function() {
  $(document).on('click', '.add', function(e) {
    e.preventDefault();
    var row = $(e.target).closest('tr'),
      copy = row.clone();
    copy.insertAfter(row);
    copy.find("select").attr("disabled","true")
    copy.find("select").val(row.find("select").val())
  });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="table-data">
  <tbody>
    <tr id="id1" class="tr_clone">
      <th>Equipment</th>
      <td>
        <select name="equi[]" id="equi" >
          <option value="123">123</option>
          <option value="456">456</option>
        </select>
        <th>QTY</th>
        <td>
          <input type="number" name="qty[]" value="0">
        </td>
        <td align="right">
          <a class="add" title="add" data-toggle="tooltip">add</a>
        </td>
    </tr>
  </tbody>
</table>

Upvotes: 1

Related Questions