javascript - jquery查找单元格值，如果存在则更改单元格，如果不存在则添加新行

Question

任何帮助将不胜感激。

我想要实现的是，当输入到代码框中的数字/文本时，它会搜索表格，如果找到，则数量加一，如果找不到，则添加一个新行，将无列加一。

我已经有了一些基本的 jQuery 代码。

<input type="text" style="width: 200px" id="code" name="code" />
<input id = "btnSubmit" type="submit" value="Release"/>
<table> <thead>
            <tr>
                <th>No</th>
                <th>Code</th>
                <th>Qty</th>

            </tr>
        </thead>
    <tbody>
        <tr>
            <td>1</td>
            <td>4444</td>
            <td>1</td>
        </tr>
        <tr>
            <td>2</td>
            <td>5555</td>
            <td>1</td>

        </tr>
        <tr>
            <td>3</td>
            <td>6666</td>
            <td>1</td>

        </tr>
  <tr>
            <td>4</td>
            <td>7777</td>
            <td>1</td>

        </tr>
    </tbody>
</table>

编辑:我的代码。

$(document).ready(function() {

  $("#btnSubmit").click(function() {

    var code = $("input#code").val()
    var table = $("table tbody");
    table.find('tr').each(function(i) {
      no = $(this).find('td').eq(0).text(),
        productId = $(this).find('td').eq(1).text(),
        Quantity = $(this).find('td').eq(2).text();


      if (productId == code) { //see if product is in table

        Quantity = +Quantity + +Quantity; // increase qty
        alert('found' + Quantity); 

      } else {
        // Add new row
        alert('not found');


      }


    });
  });
});

Answer 1

我整理了一个JSFiddle for you ，并将JS代码复制到这里。我试图让它尽可能对初学者友好......

$("#btnSubmit").on("click", function(){
    numRows = $("tr").length;
    for(var i=1 ; i<numRows ; i++){
        var code = $("tr:nth-child(" + i + ") td:nth-child(2)").html();
        var qty = $("tr:nth-child(" + i + ") td:nth-child(3)").html();
        if(code == $("#code").val()){
            $("tr:nth-child(" + i + ") td:nth-child(3)").html(parseInt(qty) + 1);
            return true;
        }
    }

    $("tbody").append("<tr><td>" + numRows + "</td><td>" + $("#code").val() + "</td><td>1</td></tr>");
    return true;
});