2017-12-13 3 views
4

私は何をしようとしているのかに適切な解決策を見つけるのが少し難しいです。 私はテーブルを持っている:私は上記のuを示したようテーブル行に値が存在するかどうかを確認する方法は?

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>

私はそれを押しています。

新しい要素を動的に追加するときに、テーブルにプッシュする列の値がテーブルに存在するかどうかをチェックしたい場合は、 を入力します。存在しない場合は、新しい列があれば結果列を変更します。 どうすればアーカイブできますか?このような

+3

試しましたか? – Pedram

+2

ちょうど動的に追加することをした、と私は残りのアイデアはありません。だから、私は実際にテーブルのチェックのためのコードを試みていない。 : – Hatchling

+0

これまでに試したことを示してみよう –

答えて

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>

私は、これはあなたの問題を解決することができると思い私はチェックしてくださいテキストボックスを使用して動的な入力を追加する両方のテキストボックスに同じ値を入力してくださいn結果の値が増えます。そうでない場合は、新しい<tr>が作成されます。

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>

関連する問題