How to check if values ​​exist in a table row?

Question

I have a bit of trouble finding the right solution for what I'm trying to do. I have a table:

var _1 = "Something1";
var _2 = "Something2";
var result = "dsadas";
$('<tr><td>' + _1 + '</td><td>' + _2 + '</td><td>' + result + '</td></tr>').appendTo('#test');

td {
border: 1px solid black;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="gr">
  <thead>
    <tr>
      <th>Something1</th>
      <th>Something2</th>
      <th>Result</th>
    </tr>
  </thead>
  <tbody id="test">
    <tr>
      <td>Something1</td>
      <td>Something2</td>
      <td>32</td>
    </tr>
  </tbody>
</table>

Run codeHide result

I push him as shown above.

And when I dynamically add a new element, I want to check if the table contains values ​​of the im columns inserted into the table, and: If not, click new, if there is, just change the result column. How can I archive this?

Answer 1

$(function(){
    $("#addtr").on('submit', function(){
        var something1 = $("#something1").val();
        var something2 = $("#something2").val();
        var result = $("#result").val();
        var inc = 0;
            
        var cnt = 0;    
        $('#tbody tr').each(function(i, el){
            var value1 = $(el).children().eq(0).text();
            var value2 = $(el).children().eq(1).text();
            var res = $(el).children().eq(2).text();
            if(value1 == something1 && value2 == something2){
                inc = (inc)+1;
                res = parseInt(res)+(1);
                $(this).children(":eq(2)").text(res);
            }
            cnt = cnt+1;
        })
        if(inc == 0){
            var add = "<tr><td>"+something1+"</td><td>"+something2+"</td><td>"+result+"</td></tr>";
                $(".gr tbody").append(add);
        } else {
            //console.log("exist");
        }
         
        return false;
    })
})

<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<table class="gr">
  <thead>
    <tr>
      <th>Something1</th>
      <th>Something2</th>
      <th>Result</th>
    </tr>
  </thead>
  <tbody id='tbody'>
    <tr>
      <td>Something1</td>
      <td>Something2</td>
      <td>32</td>
    </tr>
  </tbody>
</table>
<form method='post' action='#' id='addtr'>
    <input type='text' name='something1' id='something1' />
    <input type='text' name='something2' id='something2' />
    <input type='text' name='result' id='result' />
    <button type='submit' id='submit'>Add</button>
</form>

Run codeHide result

I think this may be the solution to your problem, please check if I am adding dynamic input using a text field, enter the same value in both text fields, then the result value will be increased, otherwise a new one will be created <tr>

Answer 2

Something like this will help achieve what you need:

var _1 = "Something1";
var _2 = "Something2";
var result = "dsadas";

var change = false;
$("tbody#test").find("tr").each(function() {
  var $td = jQuery(this).find("td");
  if ($td.first()[0].innerHTML == _1 && $td.next()[0].innerHTML == _2) {
    change = true;
    $td.last()[0].innerHTML = result;
  }

});

if (!change) {
  $('<tr><td>' + _1 + '</td><td>' + _2 + '</td><td>' + result + '</td></tr>').appendTo('#test');
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="gr">
  <thead>
    <tr>
      <th>Something1</th>
      <th>Something2</th>
      <th>Result</th>
    </tr>
  </thead>
  <tbody id="test">
    <tr>
      <td>Something1</td>
      <td>Something2</td>
      <td>32</td>
    </tr>
  </tbody>
</table>

Run codeHide result