JQuery заменить перезаписать содержимое

Question

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

В общем, если я выбираю что-то из строки 1, если это первый раз, когда я выбираю, добавляю значения в новую таблицу, если я передумал и хочу что-то изменить, просто обновитеценности.И так далее, с каждой выбранной строкой.

Это мой код и то, что я сделал до сих пор, но я застрял и не знаю, как его решить.

<table>
<tr>
  <td class="cell1">1</td>
  <td class="cell2">111</td>
  <td class="cell3">2018-12-22</td>
  <td class="cell4">Apples</td>
  <td class="liga">France</td>
  <td>
    <select class="cell-select">
      <option value="" selected="">Select one</option>
      <option value="1.4">A</option>
      <option value="2.3">B</option>
      <option value="3.2">C</option>
      <option value="1.5">D</option>
    </select>
  </td>
</tr>  
<tr>
    <td class="cell1">2</td>
    <td class="cell2">222</td>
    <td class="cell3">2018-12-23</td>
    <td class="cell4">Oranges</td>
    <td class="liga">Austria</td>
    <td>
      <select class="cell-select">
        <option value="" selected="">Select one</option>
        <option value="1.1">X</option>
        <option value="4.3">Y</option>
        <option value="2.2">Z</option>
        <option value="3.5">W</option>
      </select>
    </td>
  </tr>  
<tr>
    <td class="cell1">3</td>
    <td class="cell2">222</td>
    <td class="cell3">2018-12-24</td>
    <td class="cell4">Bananas</td>
    <td class="liga">Germany</td>
    <td>
      <select class="cell-select">
        <option value="" selected="">Select one</option>
        <option value="2.1">L</option>
        <option value="3.5">M</option>
        <option value="4.1">N</option>
        <option value="2.2">Q</option>
      </select>
    </td>
  </tr>   
</table>

<table class="result">
    <tr>
        <td class="newcell1"></td>
        <td class="newcell2"></td>
        <td class="newcell3"></td>
    </tr>
</table>

Код jquery:

$('document').ready(function() {
    $( "select.cell-select" ).change(function() {
        var cell2 = $(this).closest('tr').find('.cell2').text();
        var cell4 = $(this).closest('tr').find('.cell4').text();
        var cellSelect = this.value;

        var newcell1 = $('.newcell1').empty().append(cell2);
        var newcell2 = $('.newcell2').empty().append(cell4);
        var newcell3 = $('.newcell3').empty().append(cellSelect);

$('.result').append('<tr><td class="newcell1">'+cell2+'</td><td class="newcell2">'+cell4+'</td><td class="newcell3">'+cellSelect+'</td></tr>');
        });
});

И игровая площадка: https://codepen.io/tudor-taranu/pen/qLrGWY Еще один вопрос, есть ли способ сортировки значений OPTION Ascending?Большое спасибо

Answer 1

Ваш код выглядит хорошо, но вы должны понимать шаблон, который вы запрашиваете при добавлении, вот что вы можете сделать.

Несколько вещей, которые вам нужно учитывать:

• Вам не нужен результат, добавьте строку
• Я добавил data-select поверх него примените ваш код.

$('document').ready(function() {
	$( "select.cell-select" ).change(function() {
    var classToCheck = $(this).attr('data-select')
		var cell2 = $(this).closest('tr').find('.cell2').text();
		var cell4 = $(this).closest('tr').find('.cell4').text();
		var cellSelect = this.value;
   
		var newcell1 = $('.' + classToCheck).find('td').eq(0).empty().append(cell2);
		var newcell2 = $('.' + classToCheck).find('td').eq(1).empty().append(cell4);
		var newcell3 = $('.' + classToCheck).find('td').eq(2).empty().append(cellSelect);

//$('.result').append('<tr><td class="newcell1">'+cell2+'</td><td class="newcell2">'+cell4+'</td><td class="newcell3">'+cellSelect+'</td></tr>');
		});
});

table{float:left}
td{border:1px solid #ccc}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<tr>
  <td class="cell1">1</td>
  <td class="cell2">111</td>
  <td class="cell3">2018-12-22</td>
  <td class="cell4">Apples</td>
  <td class="liga">France</td>
  <td>
    <select  data-select="newcell1" class="cell-select">
      <option value="" selected="">Select one</option>
      <option value="1.4">A</option>
      <option value="2.3">B</option>
      <option value="3.2">C</option>
      <option value="1.5">D</option>
    </select>
  </td>
</tr>  
<tr>
    <td class="cell1">2</td>
    <td class="cell2">222</td>
    <td class="cell3">2018-12-23</td>
    <td class="cell4">Oranges</td>
    <td class="liga">Austria</td>
    <td>
      <select  data-select="newcell2" class="cell-select">
        <option value="" selected="">Select one</option>
        <option value="1.1">X</option>
        <option value="4.3">Y</option>
        <option value="2.2">Z</option>
        <option value="3.5">W</option>
      </select>
    </td>
  </tr>  
<tr>
    <td class="cell1">3</td>
    <td class="cell2">333</td>
    <td class="cell3">2018-12-24</td>
    <td class="cell4">Bananas</td>
    <td class="liga">Germany</td>
    <td>
      <select  data-select="newcell3"  class="cell-select">
        <option value="" selected="">Select one</option>
        <option value="2.1">L</option>
        <option value="3.5">M</option>
        <option value="4.1">N</option>
        <option value="2.2">Q</option>
      </select>
    </td>
  </tr>   
</table>

<table class="result">
	<tr class="newcell1">
		<td></td>
		<td></td>
		<td></td>
	</tr>
  <tr class="newcell2">
		<td></td>
		<td></td>
		<td></td>
	</tr>
  <tr class="newcell3">
		<td></td>
		<td></td>
		<td></td>
	</tr>
</table>

<table>
<tr>
		<td class="">111</td>
		<td class="">Apples</td>
		<td class="">1.4</td>
</tr>
<tr>
		<td class="">222</td>
		<td class="">Oranges</td>
		<td class="">4.3</td>
</tr>
<tr>
		<td class="">333</td>
		<td class="">Bananas</td>
		<td class="">4.1</td>
</tr>
</table>

Answer 2

Приведенный ниже код добавляет прослушиватель событий .change к каждому из select в классе .cell-select.Затем он собирает название продукта, идентификатор (который я добавил), а также выбранную опцию из выбора.

Затем он добавляет новую строку при первом изменении выбора или редактирует существующую строкуесли он существует.Я добавил id к каждой из строк исходной таблицы, чтобы сделать это возможным, вы можете использовать другое уникальное значение, если хотите, но, вероятно, лучше добавить уникальный идентификатор для каждой строки в исходной таблице.

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

Дайте мне знать, если это не то, на что вы надеялись.

// Add change event to each select
$(".cell-select").change(function() {

  // Get ID, name and chosen option
  productID = $(this).closest("tr").attr("id");
  productName = $(this).closest("tr").find(".cell4").text();
  chosenOption = $(this).find(":selected").text();
  chosenValue = $(this).find(":selected").val();

  // Check if 'Select one' has been chosen, remove any previous selection and exit function early
  if (chosenValue == "") {
    $("#" + productID + "-result").remove();
    return;
  }

  // Check if a results row exists
  if ($("#" + productID + "-result").length == 0) {

    // Create row if it does not exist
    $("table.result").append("<tr id='" + productID + "-result'><td>" + productName + "</td><td class='choice'>Choice: " + chosenOption + "</td></tr>");

  } else {

    // Update choice if it does exist
    $("#" + productID + "-result .choice").html("Choice: " + chosenOption);

  }


});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<table>
  <tr id="product1">
    <td class="cell1">1</td>
    <td class="cell2">111</td>
    <td class="cell3">2018-12-22</td>
    <td class="cell4">Apples</td>
    <td class="liga">France</td>
    <td>
      <select class="cell-select">
        <option value="" selected="">Select one</option>
        <option value="1.4">A</option>
        <option value="2.3">B</option>
        <option value="3.2">C</option>
        <option value="1.5">D</option>
      </select>
    </td>
  </tr>
  <tr id="product2">
    <td class="cell1">2</td>
    <td class="cell2">222</td>
    <td class="cell3">2018-12-23</td>
    <td class="cell4">Oranges</td>
    <td class="liga">Austria</td>
    <td>
      <select class="cell-select">
        <option value="" selected="">Select one</option>
        <option value="1.1">X</option>
        <option value="4.3">Y</option>
        <option value="2.2">Z</option>
        <option value="3.5">W</option>
      </select>
    </td>
  </tr>
  <tr id="product3">
    <td class="cell1">3</td>
    <td class="cell2">222</td>
    <td class="cell3">2018-12-24</td>
    <td class="cell4">Bananas</td>
    <td class="liga">Germany</td>
    <td>
      <select class="cell-select">
        <option value="" selected="">Select one</option>
        <option value="2.1">L</option>
        <option value="3.5">M</option>
        <option value="4.1">N</option>
        <option value="2.2">Q</option>
      </select>
    </td>
  </tr>
</table>

<table class="result">
  <tr>
    <td class="newcell1"></td>
    <td class="newcell2"></td>
    <td class="newcell3"></td>
  </tr>
</table>