Блог

Главная - Вопросы по программированию - Как добавить новую строку таблицы с выбранными значениями в виде текста в новую строку

Как добавить новую строку таблицы с выбранными значениями в виде текста в новую строку

#jquery

Вопрос:

У меня есть строка таблицы с выпадающим списком «Выбрать» и ввод текста, который следует добавить в ту же таблицу, что и новая строка, но вместо выбора все значения должны быть в вводе текста, только для чтения.

То, что у меня есть, — это функция клонирования. Но как соответствующим образом изменить выбор? Не могу этого понять.

 <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);
});
});

Видишь https://jsfiddle.net/juwxspeo/

Ответ №1:

Вы можете добавить эту строку:

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

Так оно и будет:

 $(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())
  });
});

При этом для параметра «Выбор» будут установлены те же значения, что и в строке, которую вы щелкнули.

ДЕМОНСТРАЦИЯ

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

Комментарии:

1. Спасибо, но в таком виде он все равно будет доступен для редактирования. Как я могу добавить тег только для чтения в новую строку?

2. Итак, вы хотите, чтобы новый выбор был доступен только для чтения? Обновлена демо-версия

Метки: