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值进行排序？非常感谢

Answer 1

以下代码将.change事件监听器添加到select类中的每个.cell-select中。然后，它会收集产品名称，ID（我已经添加了ID）以及从选择项中选择的选项。

然后在第一次更改选择时添加新行，或者编辑现有行（如果确实存在）。我为每个原始表行添加了一个id，以实现此目的，如果需要，您可以使用另一个唯一值，但是最好向原始表的每一行添加一个唯一标识符。 / p>

我还添加了一项检查，以查看用户是否返回默认的“选择一个”，如果选择的值为=""，则将从结果表中删除任何先前的选择，然后函数退出早点。

让我知道这是否不是您想要的。

// 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>

Answer 2

您的代码看起来不错，但是您必须了解添加时要询问的模式，这是您可以做的。

您需要考虑的几件事：

您不需要结果附加行
我在其上添加了for(i in 0..10) { SystemClock.sleep(300) try { onView(withText("Andrew Bruce")).check(matches(isDisplayed()) return } catch (e : NoMatchingViewException) { }，以应用您的代码。

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}

jQuery替换覆盖内容

2 个答案: