时间戳

首页 > 解决方案 > jquery替换覆盖内容

jquery - jquery替换覆盖内容

问题描述

简而言之，我在多行上有多个选择，当我想从选择中更改某些内容时，在更改时，我想将值附加到另一行。

所以基本上，如果我从第 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 值升序进行排序？非常感谢

标签： jquerystringselectreplace

解决方案

下面的代码为每个类添加了一个.change事件监听器。然后它收集产品名称、ID（我已添加）以及从选择中选择的选项。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>

推荐阅读