循环遍历html单元格

循环遍历html单元格

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

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





我插入带有随机插入的水果名称的行,并动态添加一个名为Sell的按钮。当我单击“卖出”时,应检查第二行表中是否存在该行的水果名称,然后将卖出金额添加到第二张表中具有相同名称的行中。如果不是,那么只需在第二个表中添加名称和已售金额的新行。 jQuery还可以。

最佳答案

这是一个可能的解决方案,代替您的函数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;

    }



}

关于javascript - 循环遍历html单元格,并在满足条件的情况下执行功能,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/28092247/

10-12 07:11