如何检查表行中是否存在值?

时间:2017-12-13 06:05:59

标签: javascript jquery

我找不到正确的解决方案,因为我试图做的事情。 我有一张桌子:



var _1 = "Something1";
var _2 = "Something2";
var result = "dsadas";
$('<tr><td>' + _1 + '</td><td>' + _2 + '</td><td>' + result + '</td></tr>').appendTo('#test');
&#13;
td {
border: 1px solid black;
}
&#13;
<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>
&#13;
&#13;
&#13;

我推动它就像我在上面展示的那样。

当我动态添加新元素时,我想检查表中是否存在推送到表中的列的值,并且: 如果没有,推送新的,如果存在,只需更改结果列。 我该如何存档?

2 个答案:

答案 0 :(得分:1)

这样的事情将有助于实现您的需求:

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>

答案 1 :(得分:1)

&#13;
&#13;
$(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;
    })
})
&#13;
<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>
&#13;
&#13;
&#13;

我认为这可以解决您的问题请检查我是否使用文本框添加动态输入请在两个文本框中输入相同的值然后结果值将递增,否则将创建新的<tr>