Question

＆＃13;

var tableBody = document.getElementById("firstTableBody"),
  secondTable = document.getElementById("secondTable");

function insertRow() {
  var Row = tableBody.insertRow();
  for (var c = 0; c < 3; c += 1) {
    Row.insertCell(c);
  }
  var Fruits = ["Apples", "Oranges", "Strawberries"],
    random_Fruits = Fruits[Math.floor(Math.random() * Fruits.length)];
  Row.cells[0].innerHTML = random_Fruits;
  Row.cells[1].innerHTML = 100;
  var Sellbtn = document.createElement('button');
  Sellbtn.innerHTML = "Sell"
  Sellbtn.onclick = function Sell() {
    if (secondTable.rows.length < 1) {
      var Row = secondTable.insertRow();
      for (var f = 0; f < 2; f += 1) {
        Row.insertCell(f);
      }
      Row.cells[0].innerHTML = this.parentNode.parentNode.cells[0].innerHTML;
      Row.cells[1].innerHTML = this.parentNode.parentNode.cells[1].innerHTML;
    } else {
      for (var i = 0; i < secondTable.rows.length; i += 1) {
        if (secondTable.rows[i].cells[0].innerHTML === this.parentNode.parentNode.cells[0].innerHTML) {
          secondTable.rows[i].cells[1].innerHTML = +this.parentNode.parentNode.cells[1].innerHTML;
        } else {
          var Rowz = secondTable.insertRow();
          for (var k = 0; k < 4; k += 1) {
            Rowz.insertCell(k);
          }

          Rowz.cells[0].innerHTML = this.parentNode.parentNode.cells[0].innerHTML;
          Rowz.cells[1].innerHTML = this.parentNode.parentNode.cells[1].innerHTML;
        }
      }
    }


  }
  Row.cells[2].appendChild(Sellbtn);
};

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<body>
  <table border="1">
    <thead>
      <th>Item</th>
      <th>Sold</th>
      <th>
        <button onclick="insertRow()">Insert</button>
      </th>
    </thead>
    <tbody id="firstTableBody">
    </tbody>
  </table>

  <table border="1">
    <thead>
      <th>Item</th>
      <th>Sold</th>
    </thead>
    <tbody id="secondTable">
    </tbody>
  </table>
</body>

＆＃13;

我插入一行随机插入的水果名称和一个名为sell的动态添加按钮。当我点击卖出时，它应该检查第二个表中是否存在该行的水果名称，如果是，那么它应该将销售量添加到第二个表中具有相同名称的行中。如果没有，那么只需在第二个表中添加一个新行，其中包含名称和销售金额。 jQuery没问题。

Answer 1

这是一个可能的解决方案，替换你的功能Sell（）

Sellbtn.onclick = function Sell() {

var found = false,
    rows = secondTable.rows,
    numrows = rows.length,
    tofind = this.parentNode.parentNode.cells[0].innerHTML,
    foundin,
    numToAdd = parseInt(this.parentNode.parentNode.cells[1].innerHTML),
    num,
    x;

    for(x=0;x<numrows;x++){

        if(rows[x].cells[0].innerHTML === tofind){

            found = true;

            foundin = x;

        }

    }

    if(found){

        num = parseInt(rows[foundin].cells[1].innerHTML) + numToAdd;

        rows[foundin].cells[1].innerHTML = num;

    }
    else{

        var Row = secondTable.insertRow();
        for (var f = 0; f < 2; f += 1) {
            Row.insertCell(f);
        }
        Row.cells[0].innerHTML = this.parentNode.parentNode.cells[0].innerHTML;
        Row.cells[1].innerHTML = this.parentNode.parentNode.cells[1].innerHTML;

    }



}

Answer 2

这就是你要找的东西吗？

＆＃13;

$(document).ready(function() {
    $('.insert').on('click', function() {
        var Fruits = ["Apples", "Oranges", "Strawberries"];
        var random_Fruit = Fruits[Math.floor(Math.random() * Fruits.length)];
        var clone = $('#template').clone(true).attr('id', '');
        clone.css('display', '');
        clone.closest('tr').find('.item').html(random_Fruit);
        clone.appendTo('#firstTableBody');        
    });
    $('#firstTableBody').on('click', '.sell', function(e) {
        e.preventDefault();
        var item = $(this).closest('tr').find('.item').html();
        var add = parseInt($(this).closest('tr').find('.number').html());
        
        var inTable2 = [];
        $('#secondTable tr').each(function() {
            var fruit = $(this).find('.item').html();
            inTable2.push(fruit);
        });
        console.log(inTable2);
        
        if ($.inArray(item, inTable2) > -1) {
            console.log('in array');
            $('#secondTable tr').each(function() {
                var fruitIn2 = $(this).find('.item').html();
                if (fruitIn2 == item) {
                    var sold = parseInt($(this).find('.number').html());
                    $(this).find('.number').html(sold + add);
                }
            });
        }        
        else {
            console.log('add');
            var clone = $('#template').clone(true).attr('id', '');
            clone.css('display', '');
            clone.closest('tr').find('.item').html(item);
            clone.closest('tr').find('.sellTd').remove();
            clone.appendTo('#secondTable');
        }
    });
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table border="1">
    <thead>
        <th>Item</th>
        <th>Number</th>
        <th>
            <button class="insert">Insert</button>
        </th>
    </thead>
    <tbody id="firstTableBody">
        <tr id="template" class="fruit" style="display:none;">
            <td class="item"></td>
            <td class="number">100</td>
            <td class="sellTd"><button class="sell">Sell</button></td>
        </tr>
    </tbody>
</table>
<br/><br/>
<table border="1">
    <thead>
        <th>Item</th>
        <th>Sold</th>
    </thead>
    <tbody id="secondTable">
    </tbody>
</table>

＆＃13;

抱歉，我有点使用了所有的jquery，因为它使我更容易编写代码并思考xp但是它有效：D

循环遍历html单元格并在满足条件时执行函数

2 个答案: